Black
#0A1629
BlueColor Codes
All color formats for development
HEX
#0A1629RGB
rgb(10, 22, 41)HSL
hsl(217, 61%, 10%)OKLCH
oklch(0.201 0.042 259.2)CMYK
cmyk(76%, 46%, 0%, 84%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#091425
2#081121
3#070F1D
4#060D19
5#050B15
6#040910
7#03070C
8#020408
9#010204
Tints
Lighter variations
1#132A4E
2#1C3D73
3#255198
4#2E65BD
5#467CD2
6#6B96DB
7#90B0E4
8#B5CBED
9#DAE5F6
Tones
Muted variations
1#0C1627
2#0D1726
3#0F1724
4#101723
5#121821
6#131820
7#15181E
8#16191D
9#18191B
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F3F6 #F3F6FC | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E2EB #E2EBF8 | Light backgroundsTable row hoverSkeleton loading |
| 200 | CAD9 #CAD9F2 | Secondary backgroundsInput backgroundsDividers |
| 300 | A1BC #A1BCE8 | BordersInactive statesPlaceholder text |
| 400 | 6F99 #6F99DC | Disabled statesSecondary iconsMuted text |
| 500 | 467C #467CD2 | Primary brand colorCTAsActive elementsLinks |
| 600 | 2C60 #2C60B5 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 234D #234D90 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 1937 #193767 | Text on light backgroundsHeadingsStrong borders |
| 900 | 1023 #102342 | Primary textHigh emphasis contentDark headings |
| 950 | 0A16 #0A1629 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--black-50: #F3F6FC;
--black-100: #E2EBF8;
--black-200: #CAD9F2;
--black-300: #A1BCE8;
--black-400: #6F99DC;
--black-500: #467CD2;
--black-600: #2C60B5;
--black-700: #234D90;
--black-800: #193767;
--black-900: #102342;
--black-950: #0A1629;
}