Black
#08282B
CyanColor Codes
All color formats for development
HEX
#08282BRGB
rgb(8, 40, 43)HSL
hsl(185, 69%, 10%)OKLCH
oklch(0.255 0.037 204)CMYK
cmyk(81%, 7%, 0%, 83%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#072427
2#062022
3#061C1E
4#05181A
5#041416
6#031011
7#020C0D
8#020809
9#010404
Tints
Lighter variations
1#0F4C52
2#167079
3#1D959F
4#24B9C6
5#3DCEDB
6#64D8E3
7#8BE2EA
8#B1EBF1
9#D8F5F8
Tones
Muted variations
1#0A2729
2#0B2528
3#0D2426
4#0F2224
5#112122
6#121F21
7#141E1F
8#161C1D
9#181B1B
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F2FC #F2FCFD | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E1F7 #E1F7F9 | Light backgroundsTable row hoverSkeleton loading |
| 200 | C7F1 #C7F1F5 | Secondary backgroundsInput backgroundsDividers |
| 300 | 9CE6 #9CE6ED | BordersInactive statesPlaceholder text |
| 400 | 68D9 #68D9E3 | Disabled statesSecondary iconsMuted text |
| 500 | 3DCE #3DCEDB | Primary brand colorCTAsActive elementsLinks |
| 600 | 23B1 #23B1BE | Hover statesFocus ringsPrimary buttons hover |
| 700 | 1C8D #1C8D97 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 1464 #14646C | Text on light backgroundsHeadingsStrong borders |
| 900 | 0D40 #0D4045 | Primary textHigh emphasis contentDark headings |
| 950 | 0828 #08282B | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--black-50: #F2FCFD;
--black-100: #E1F7F9;
--black-200: #C7F1F5;
--black-300: #9CE6ED;
--black-400: #68D9E3;
--black-500: #3DCEDB;
--black-600: #23B1BE;
--black-700: #1C8D97;
--black-800: #14646C;
--black-900: #0D4045;
--black-950: #08282B;
}