Navy
#20064B
PurpleColor Codes
All color formats for development
HEX
#20064BRGB
rgb(32, 6, 75)HSL
hsl(263, 85%, 16%)OKLCH
oklch(0.226 0.114 291.5)CMYK
cmyk(57%, 92%, 0%, 71%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#1D0644
2#1A053C
3#170435
4#14042D
5#100326
6#0D021E
7#0A0217
8#07010F
9#030108
Tints
Lighter variations
1#320973
2#430D9B
3#5410C2
4#6513EA
5#7F39EF
6#9860F2
7#B288F5
8#CCB0F9
9#E5D7FC
Tones
Muted variations
1#220A48
2#220D45
3#231141
4#24143E
5#25173A
6#261B37
7#261E33
8#272230
9#28252C
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F6F1 #F6F1FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | EADE #EADEFC | Light backgroundsTable row hoverSkeleton loading |
| 200 | D7C2 #D7C2FA | Secondary backgroundsInput backgroundsDividers |
| 300 | B992 #B992F6 | BordersInactive statesPlaceholder text |
| 400 | 945A #945AF2 | Disabled statesSecondary iconsMuted text |
| 500 | 752B #752BEE | Primary brand colorCTAsActive elementsLinks |
| 600 | 5A11 #5A11D0 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 480D #480DA5 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 330A #330A76 | Text on light backgroundsHeadingsStrong borders |
| 900 | 2106 #21064B | Primary textHigh emphasis contentDark headings |
| 950 | 1404 #14042F | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--navy-50: #F6F1FE;
--navy-100: #EADEFC;
--navy-200: #D7C2FA;
--navy-300: #B992F6;
--navy-400: #945AF2;
--navy-500: #752BEE;
--navy-600: #5A11D0;
--navy-700: #480DA5;
--navy-800: #330A76;
--navy-900: #21064B;
--navy-950: #14042F;
}