Navy
#0C2473
BlueColor Codes
All color formats for development
HEX
#0C2473RGB
rgb(12, 36, 115)HSL
hsl(226, 81%, 25%)OKLCH
oklch(0.305 0.138 265.3)CMYK
cmyk(90%, 69%, 0%, 55%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#0B2168
2#0A1D5C
3#081951
4#071645
5#06123A
6#050E2E
7#040B23
8#020717
9#01040C
Tints
Lighter variations
1#102F96
2#133AB9
3#1745DB
4#2F5BE9
5#5276ED
6#7591F0
7#97ADF4
8#BAC8F8
9#DCE4FB
Tones
Muted variations
1#11276E
2#162A69
3#1C2C64
4#212F5F
5#26325A
6#2B3554
7#30374F
8#353A4A
9#3B3D45
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1F4 #F1F4FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DFE5 #DFE5FC | Light backgroundsTable row hoverSkeleton loading |
| 200 | C3D0 #C3D0F9 | Secondary backgroundsInput backgroundsDividers |
| 300 | 95AB #95ABF4 | BordersInactive statesPlaceholder text |
| 400 | 5D7F #5D7FEE | Disabled statesSecondary iconsMuted text |
| 500 | 2F5B #2F5BE9 | Primary brand colorCTAsActive elementsLinks |
| 600 | 1540 #1540CB | Hover statesFocus ringsPrimary buttons hover |
| 700 | 1133 #1133A2 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0C24 #0C2473 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0817 #08174A | Primary textHigh emphasis contentDark headings |
| 950 | 050E #050E2E | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--navy-50: #F1F4FE;
--navy-100: #DFE5FC;
--navy-200: #C3D0F9;
--navy-300: #95ABF4;
--navy-400: #5D7FEE;
--navy-500: #2F5BE9;
--navy-600: #1540CB;
--navy-700: #1133A2;
--navy-800: #0C2473;
--navy-900: #08174A;
--navy-950: #050E2E;
}