Black
#022831
CyanColor Codes
All color formats for development
HEX
#022831RGB
rgb(2, 40, 49)HSL
hsl(191, 92%, 10%)OKLCH
oklch(0.256 0.044 217.6)CMYK
cmyk(96%, 18%, 0%, 81%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#02242C
2#022027
3#011C22
4#01181D
5#011418
6#011014
7#010C0F
8#00080A
9#000405
Tints
Lighter variations
1#044D5D
2#067189
3#0895B5
4#09BAE1
5#23CFF6
6#4FD9F8
7#7BE2F9
8#A7ECFB
9#D3F5FD
Tones
Muted variations
1#04272F
2#07252C
3#09242A
4#0B2228
5#0E2125
6#101F23
7#121E21
8#151C1E
9#171B1C
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0FC #F0FCFE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DDF8 #DDF8FE | Light backgroundsTable row hoverSkeleton loading |
| 200 | BFF1 #BFF1FC | Secondary backgroundsInput backgroundsDividers |
| 300 | 8EE7 #8EE7FA | BordersInactive statesPlaceholder text |
| 400 | 54DA #54DAF8 | Disabled statesSecondary iconsMuted text |
| 500 | 23CF #23CFF6 | Primary brand colorCTAsActive elementsLinks |
| 600 | 09B2 #09B2D7 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 078D #078DAB | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0565 #05657A | Text on light backgroundsHeadingsStrong borders |
| 900 | 0341 #03414E | Primary textHigh emphasis contentDark headings |
| 950 | 0228 #022831 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--black-50: #F0FCFE;
--black-100: #DDF8FE;
--black-200: #BFF1FC;
--black-300: #8EE7FA;
--black-400: #54DAF8;
--black-500: #23CFF6;
--black-600: #09B2D7;
--black-700: #078DAB;
--black-800: #05657A;
--black-900: #03414E;
--black-950: #022831;
}