Black
#17171C
BlueColor Codes
All color formats for development
HEX
#17171CRGB
rgb(23, 23, 28)HSL
hsl(240, 10%, 10%)OKLCH
oklch(0.207 0.01 285.5)CMYK
cmyk(18%, 18%, 0%, 89%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#151519
2#121216
3#101014
4#0E0E11
5#0B0B0E
6#09090B
7#070708
8#050506
9#020203
Tints
Lighter variations
1#2C2C35
2#40404F
3#555568
4#6A6A81
5#818198
6#9A9AAC
7#B3B3C1
8#CDCDD6
9#E6E6EA
Tones
Muted variations
1#17171C
2#17171C
3#18181B
4#18181B
5#18181B
6#18181B
7#19191A
8#19191A
9#19191A
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F7F7 #F7F7F8 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | EBEB #EBEBEF | Light backgroundsTable row hoverSkeleton loading |
| 200 | DBDB #DBDBE1 | Secondary backgroundsInput backgroundsDividers |
| 300 | BEBE #BEBECA | BordersInactive statesPlaceholder text |
| 400 | 9D9D #9D9DAF | Disabled statesSecondary iconsMuted text |
| 500 | 8181 #818198 | Primary brand colorCTAsActive elementsLinks |
| 600 | 6565 #65657B | Hover statesFocus ringsPrimary buttons hover |
| 700 | 5050 #505062 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 3939 #393946 | Text on light backgroundsHeadingsStrong borders |
| 900 | 2525 #25252D | Primary textHigh emphasis contentDark headings |
| 950 | 1717 #17171C | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--black-50: #F7F7F8;
--black-100: #EBEBEF;
--black-200: #DBDBE1;
--black-300: #BEBECA;
--black-400: #9D9DAF;
--black-500: #818198;
--black-600: #65657B;
--black-700: #505062;
--black-800: #393946;
--black-900: #25252D;
--black-950: #17171C;
}