Color

Cocobits offers three tints to use for many use cases and default color utility classes meet WCAG's AAA standards. Colors can be applied to backgrounds, texts and borders.

Default Colors


Class value Color variable
color-text-primary
$gray-700
color-text-secondary
$gray-500
color-text-tertiary
$gray-300
color-text-link
$blue-300
color-text-error
$red-400
color-bg-light
$gray-050
color-bg-dark
$blue-700
color-bg-info
$blue-050
color-bg-error
$red-050
color-border-primary
$gray-200
white
$white
black
$black
color-text-primary
color-text-secondary
color-text-tertiary
color-text-error
color-bg-light
color-bg-dark color-text-tertiary
color-bg-info
color-bg-error color-text-error
color-border-primary
color-border-error color-text-error
<div class="color-bg-error color-text-error">...</div>

Gray Tints

Class value Tint
gray-050
rgb(248, 248, 250)
gray-100
rgb(231, 231, 231)
gray-200
rgb(209, 209, 209)
gray-300
rgb(170, 170, 171)
gray-400
rgb(122, 122, 123)
gray-500
rgb(76, 76, 76)
gray-600
rgb(41, 41, 42)
gray-700
rgb(15, 15, 15)
gray-050
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
<div class="gray-400">...</div>

Blues Tints

Class value Tint
blue-050
rgb(235, 244, 254)
blue-100
rgb(211, 231, 255)
blue-200
rgb(137, 186, 248)
blue-300
rgb(59, 140, 244)
blue-400
rgb(47, 112, 195)
blue-500
rgb(35, 84, 146)
blue-600
rgb(18, 42, 73)
blue-700
rgb(12, 28, 49)
blue-050
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
<div class="blue-400">...</div>

Red Tints

Class value Tint
red-050
rgb(255, 234, 234)
red-100
rgb(255, 205, 205)
red-200
rgb(255, 169, 169)
red-300
rgb(255, 122, 122)
red-400
rgb(255, 77, 77)
red-500
rgb(236, 32, 32)
red-600
rgb(193, 16, 16)
red-700
rgb(139, 12, 12)
red-050
red-100
red-200
red-300
red-400
red-500
red-600
red-700
<div class="red-400">...</div>

Background Gray Tints

Class value Tint
bg-black
rgb(0, 0, 0)
bg-white
rgb(255, 255, 255)
bg-gray-050
rgb(248, 248, 250)
bg-gray-100
rgb(231, 231, 231)
bg-gray-200
rgb(209, 209, 209)
bg-gray-300
rgb(170, 170, 171)
bg-gray-400
rgb(122, 122, 123)
bg-gray-500
rgb(76, 76, 76)
bg-gray-600
rgb(41, 41, 42)
bg-gray-700
rgb(15, 15, 15)
bg-white
bg-gray-050
bg-gray-100
bg-gray-200
bg-gray-300
bg-gray-400
bg-gray-500
bg-gray-600
bg-gray-700
bg-black
<div class="bg-gray-400">...</div>

Background Blues Tints

Class value Tint
bg-blue-050
rgb(235, 244, 254)
bg-blue-100
rgb(211, 231, 255)
bg-blue-200
rgb(137, 186, 248)
bg-blue-300
rgb(59, 140, 244)
bg-blue-400
rgb(47, 112, 195)
bg-blue-500
rgb(35, 84, 146)
bg-blue-600
rgb(18, 42, 73)
bg-blue-700
rgb(12, 28, 49)
bg-blue-050
bg-blue-100
bg-blue-200
bg-blue-300
bg-blue-400
bg-blue-500
bg-blue-600
bg-blue-700
<div class="bg-blue-400">...</div>

Background Red Tints

Class value Tint
bg-red-050
rgb(255, 234, 234)
bg-red-100
rgb(255, 205, 205)
bg-red-200
rgb(255, 169, 169)
bg-red-300
rgb(255, 122, 122)
bg-red-400
rgb(255, 77, 77)
bg-red-500
rgb(236, 32, 32)
bg-red-600
rgb(193, 16, 16)
bg-red-700
rgb(139, 12, 12)
bg-red-050
bg-red-100
bg-red-200
bg-red-300
bg-red-400
bg-red-500
bg-red-600
bg-red-700
<div class="bg-red-400">...</div>