Black
#181B1B
GrayColor Codes
All color formats for development
HEX
#181B1BRGB
rgb(24, 27, 27)HSL
hsl(180, 6%, 10%)OKLCH
oklch(0.219 0.005 196.8)CMYK
cmyk(11%, 0%, 0%, 89%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#161818
2#131616
3#111313
4#0E1010
5#0C0E0E
6#0A0B0B
7#070808
8#050505
9#020303
Tints
Lighter variations
1#2E3333
2#434C4C
3#596464
4#6E7C7C
5#859393
6#9EA9A9
7#B6BEBE
8#CED4D4
9#E7E9E9
Tones
Muted variations
1#181B1B
2#181B1B
3#181B1B
4#191A1A
5#191A1A
6#191A1A
7#191A1A
8#191A1A
9#191A1A
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F7F8 #F7F8F8 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | ECEE #ECEEEE | Light backgroundsTable row hoverSkeleton loading |
| 200 | DCE0 #DCE0E0 | Secondary backgroundsInput backgroundsDividers |
| 300 | C1C8 #C1C8C8 | BordersInactive statesPlaceholder text |
| 400 | A0AB #A0ABAB | Disabled statesSecondary iconsMuted text |
| 500 | 8593 #859393 | Primary brand colorCTAsActive elementsLinks |
| 600 | 6977 #697777 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 545F #545F5F | Active/pressed statesDark mode accentsSecondary text |
| 800 | 3C44 #3C4444 | Text on light backgroundsHeadingsStrong borders |
| 900 | 262B #262B2B | Primary textHigh emphasis contentDark headings |
| 950 | 181B #181B1B | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--black-50: #F7F8F8;
--black-100: #ECEEEE;
--black-200: #DCE0E0;
--black-300: #C1C8C8;
--black-400: #A0ABAB;
--black-500: #859393;
--black-600: #697777;
--black-700: #545F5F;
--black-800: #3C4444;
--black-900: #262B2B;
--black-950: #181B1B;
}