Black
#041C2F
BlueColor Codes
All color formats for development
HEX
#041C2FRGB
rgb(4, 28, 47)HSL
hsl(207, 84%, 10%)OKLCH
oklch(0.219 0.048 245.4)CMYK
cmyk(91%, 40%, 0%, 82%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#04192A
2#031626
3#031321
4#02111C
5#020E17
6#020B13
7#01080E
8#010609
9#000305
Tints
Lighter variations
1#083559
2#0B4D83
3#0F66AE
4#137FD8
5#2C96ED
6#56ABF0
7#80C0F4
8#ABD5F8
9#D5EAFB
Tones
Muted variations
1#061B2D
2#081B2B
3#0B1B28
4#0D1B26
5#0F1B24
6#111A22
7#131A20
8#151A1E
9#171A1C
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1F8 #F1F8FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DEEF #DEEFFC | Light backgroundsTable row hoverSkeleton loading |
| 200 | C2E1 #C2E1FA | Secondary backgroundsInput backgroundsDividers |
| 300 | 93C9 #93C9F6 | BordersInactive statesPlaceholder text |
| 400 | 5BAD #5BADF1 | Disabled statesSecondary iconsMuted text |
| 500 | 2C96 #2C96ED | Primary brand colorCTAsActive elementsLinks |
| 600 | 127A #127ACE | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0E61 #0E61A4 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0A45 #0A4575 | Text on light backgroundsHeadingsStrong borders |
| 900 | 072C #072C4B | Primary textHigh emphasis contentDark headings |
| 950 | 041C #041C2F | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--black-50: #F1F8FE;
--black-100: #DEEFFC;
--black-200: #C2E1FA;
--black-300: #93C9F6;
--black-400: #5BADF1;
--black-500: #2C96ED;
--black-600: #127ACE;
--black-700: #0E61A4;
--black-800: #0A4575;
--black-900: #072C4B;
--black-950: #041C2F;
}