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-link
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>