Navy
#130EA4
BlueColor Codes
All color formats for development
HEX
#130EA4RGB
rgb(19, 14, 164)HSL
hsl(242, 84%, 35%)OKLCH
oklch(0.339 0.215 267.6)CMYK
cmyk(88%, 91%, 0%, 36%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#110D94
2#0F0B83
3#0D0A73
4#0C0963
5#0A0752
6#080642
7#060431
8#040321
9#020110
Tints
Lighter variations
1#1711C3
2#1A14E1
3#302AEC
4#4E48EF
5#6B67F2
6#8985F4
7#A6A4F7
8#C4C2FA
9#E1E1FC
Tones
Muted variations
1#1A169D
2#211D95
3#28258E
4#2F2C86
5#36347F
6#3D3B77
7#444370
8#4B4A68
9#525261
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1F1 #F1F1FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DFDE #DFDEFC | Light backgroundsTable row hoverSkeleton loading |
| 200 | C4C2 #C4C2FA | Secondary backgroundsInput backgroundsDividers |
| 300 | 9693 #9693F6 | BordersInactive statesPlaceholder text |
| 400 | 605B #605BF1 | Disabled statesSecondary iconsMuted text |
| 500 | 322C #322CED | Primary brand colorCTAsActive elementsLinks |
| 600 | 1812 #1812CE | Hover statesFocus ringsPrimary buttons hover |
| 700 | 130E #130EA4 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0E0A #0E0A75 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0907 #09074B | Primary textHigh emphasis contentDark headings |
| 950 | 0604 #06042F | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--navy-50: #F1F1FE;
--navy-100: #DFDEFC;
--navy-200: #C4C2FA;
--navy-300: #9693F6;
--navy-400: #605BF1;
--navy-500: #322CED;
--navy-600: #1812CE;
--navy-700: #130EA4;
--navy-800: #0E0A75;
--navy-900: #09074B;
--navy-950: #06042F;
}