Black
#161B1D
BlueColor Codes
All color formats for development
HEX
#161B1DRGB
rgb(22, 27, 29)HSL
hsl(197, 14%, 10%)OKLCH
oklch(0.218 0.008 223.9)CMYK
cmyk(24%, 7%, 0%, 89%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#14181A
2#121617
3#0F1314
4#0D1011
5#0B0E0F
6#090B0C
7#070809
8#040506
9#020303
Tints
Lighter variations
1#2A3337
2#3D4C51
3#51646C
4#657C86
5#7C939C
6#96A9B0
7#B1BEC4
8#CBD4D8
9#E5E9EB
Tones
Muted variations
1#161B1D
2#171B1C
3#171B1C
4#171A1C
5#181A1B
6#181A1B
7#181A1B
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 | EBEE #EBEEF0 | Light backgroundsTable row hoverSkeleton loading |
| 200 | D9E0 #D9E0E2 | Secondary backgroundsInput backgroundsDividers |
| 300 | BCC8 #BCC8CD | BordersInactive statesPlaceholder text |
| 400 | 99AB #99ABB2 | Disabled statesSecondary iconsMuted text |
| 500 | 7C93 #7C939C | Primary brand colorCTAsActive elementsLinks |
| 600 | 6077 #607780 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 4D5F #4D5F66 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 3744 #374449 | Text on light backgroundsHeadingsStrong borders |
| 900 | 232B #232B2F | Primary textHigh emphasis contentDark headings |
| 950 | 161B #161B1D | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--black-50: #F6F8F8;
--black-100: #EBEEF0;
--black-200: #D9E0E2;
--black-300: #BCC8CD;
--black-400: #99ABB2;
--black-500: #7C939C;
--black-600: #607780;
--black-700: #4D5F66;
--black-800: #374449;
--black-900: #232B2F;
--black-950: #161B1D;
}