Black
#051B2E
BlueColor Codes
All color formats for development
HEX
#051B2ERGB
rgb(5, 27, 46)HSL
hsl(208, 80%, 10%)OKLCH
oklch(0.216 0.047 247.3)CMYK
cmyk(89%, 41%, 0%, 82%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#051829
2#041525
3#041320
4#03101C
5#030D17
6#020B12
7#02080E
8#010509
9#010305
Tints
Lighter variations
1#0A3357
2#0E4B81
3#1363AA
4#177CD3
5#3092E8
6#5AA8ED
7#83BEF1
8#ACD4F6
9#D6E9FA
Tones
Muted variations
1#071B2C
2#091B2A
3#0B1A28
4#0D1A26
5#0F1A24
6#111A22
7#131A20
8#151A1E
9#171A1C
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1F8 #F1F8FD | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DFEE #DFEEFB | Light backgroundsTable row hoverSkeleton loading |
| 200 | C3E0 #C3E0F8 | Secondary backgroundsInput backgroundsDividers |
| 300 | 95C7 #95C7F3 | BordersInactive statesPlaceholder text |
| 400 | 5EAB #5EABED | Disabled statesSecondary iconsMuted text |
| 500 | 3092 #3092E8 | Primary brand colorCTAsActive elementsLinks |
| 600 | 1676 #1676CA | Hover statesFocus ringsPrimary buttons hover |
| 700 | 125E #125EA1 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0D43 #0D4373 | Text on light backgroundsHeadingsStrong borders |
| 900 | 082B #082B49 | Primary textHigh emphasis contentDark headings |
| 950 | 051B #051B2E | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--black-50: #F1F8FD;
--black-100: #DFEEFB;
--black-200: #C3E0F8;
--black-300: #95C7F3;
--black-400: #5EABED;
--black-500: #3092E8;
--black-600: #1676CA;
--black-700: #125EA1;
--black-800: #0D4373;
--black-900: #082B49;
--black-950: #051B2E;
}