Navy
#0E3271
BlueColor Codes
All color formats for development
HEX
#0E3271RGB
rgb(14, 50, 113)HSL
hsl(218, 78%, 25%)OKLCH
oklch(0.334 0.117 260.8)CMYK
cmyk(88%, 56%, 0%, 56%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#0D2D66
2#0B285B
3#0A234F
4#081E44
5#071939
6#06142D
7#040F22
8#030A17
9#01050B
Tints
Lighter variations
1#124294
2#1651B6
3#1B60D8
4#3374E6
5#558BEA
6#77A3EE
7#99BAF2
8#BBD1F7
9#DDE8FB
Tones
Muted variations
1#13346D
2#183568
3#1D3663
4#22385E
5#273959
6#2C3A54
7#313C4F
8#363D4A
9#3B3E45
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1F6 #F1F6FD | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DFE9 #DFE9FB | Light backgroundsTable row hoverSkeleton loading |
| 200 | C4D7 #C4D7F8 | Secondary backgroundsInput backgroundsDividers |
| 300 | 97B8 #97B8F2 | BordersInactive statesPlaceholder text |
| 400 | 6093 #6093EB | Disabled statesSecondary iconsMuted text |
| 500 | 3374 #3374E6 | Primary brand colorCTAsActive elementsLinks |
| 600 | 1959 #1959C8 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 1447 #14479F | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0E32 #0E3271 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0920 #092049 | Primary textHigh emphasis contentDark headings |
| 950 | 0614 #06142D | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--navy-50: #F1F6FD;
--navy-100: #DFE9FB;
--navy-200: #C4D7F8;
--navy-300: #97B8F2;
--navy-400: #6093EB;
--navy-500: #3374E6;
--navy-600: #1959C8;
--navy-700: #14479F;
--navy-800: #0E3271;
--navy-900: #092049;
--navy-950: #06142D;
}