Black
#011032
BlueColor Codes
All color formats for development
HEX
#011032RGB
rgb(1, 16, 50)HSL
hsl(222, 96%, 10%)OKLCH
oklch(0.186 0.072 260.5)CMYK
cmyk(98%, 68%, 0%, 80%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#010E2D
2#010D28
3#010B23
4#01091E
5#010819
6#000614
7#00050F
8#00030A
9#000205
Tints
Lighter variations
1#021E5F
2#032C8C
3#043AB9
4#0548E6
5#1E60FA
6#4B80FB
7#78A0FC
8#A5BFFD
9#D2DFFE
Tones
Muted variations
1#031130
2#06122D
3#08132B
4#0B1428
5#0D1526
6#101623
7#121721
8#15181E
9#17191C
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0F4 #F0F4FF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DCE6 #DCE6FE | Light backgroundsTable row hoverSkeleton loading |
| 200 | BED1 #BED1FE | Secondary backgroundsInput backgroundsDividers |
| 300 | 8CAE #8CAEFD | BordersInactive statesPlaceholder text |
| 400 | 5083 #5083FB | Disabled statesSecondary iconsMuted text |
| 500 | 1E60 #1E60FA | Primary brand colorCTAsActive elementsLinks |
| 600 | 0445 #0445DC | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0437 #0437AF | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0327 #03277D | Text on light backgroundsHeadingsStrong borders |
| 900 | 0219 #021950 | Primary textHigh emphasis contentDark headings |
| 950 | 0110 #011032 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--black-50: #F0F4FF;
--black-100: #DCE6FE;
--black-200: #BED1FE;
--black-300: #8CAEFD;
--black-400: #5083FB;
--black-500: #1E60FA;
--black-600: #0445DC;
--black-700: #0437AF;
--black-800: #03277D;
--black-900: #021950;
--black-950: #011032;
}