Black
#161D1D
CyanColor Codes
All color formats for development
HEX
#161D1DRGB
rgb(22, 29, 29)HSL
hsl(180, 14%, 10%)OKLCH
oklch(0.224 0.01 196.4)CMYK
cmyk(24%, 0%, 0%, 89%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#141A1A
2#121717
3#0F1414
4#0D1111
5#0B0F0F
6#090C0C
7#070909
8#040606
9#020303
Tints
Lighter variations
1#2A3737
2#3D5151
3#516C6C
4#658686
5#7C9C9C
6#96B0B0
7#B1C4C4
8#CBD8D8
9#E5EBEB
Tones
Muted variations
1#161D1D
2#171C1C
3#171C1C
4#171C1C
5#181B1B
6#181B1B
7#181B1B
8#191A1A
9#191A1A
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F6F8 #F6F8F8 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | EBF0 #EBF0F0 | Light backgroundsTable row hoverSkeleton loading |
| 200 | D9E2 #D9E2E2 | Secondary backgroundsInput backgroundsDividers |
| 300 | BCCD #BCCDCD | BordersInactive statesPlaceholder text |
| 400 | 99B2 #99B2B2 | Disabled statesSecondary iconsMuted text |
| 500 | 7C9C #7C9C9C | Primary brand colorCTAsActive elementsLinks |
| 600 | 6080 #608080 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 4D66 #4D6666 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 3749 #374949 | Text on light backgroundsHeadingsStrong borders |
| 900 | 232F #232F2F | Primary textHigh emphasis contentDark headings |
| 950 | 161D #161D1D | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--black-50: #F6F8F8;
--black-100: #EBF0F0;
--black-200: #D9E2E2;
--black-300: #BCCDCD;
--black-400: #99B2B2;
--black-500: #7C9C9C;
--black-600: #608080;
--black-700: #4D6666;
--black-800: #374949;
--black-900: #232F2F;
--black-950: #161D1D;
}