Navy
#22057A
PurpleColor Codes
All color formats for development
HEX
#22057ARGB
rgb(34, 5, 122)HSL
hsl(255, 92%, 25%)OKLCH
oklch(0.286 0.169 278.4)CMYK
cmyk(72%, 96%, 0%, 52%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#1F056E
2#1C0462
3#180456
4#150349
5#11033D
6#0E0231
7#0A0225
8#070118
9#03010C
Tints
Lighter variations
1#2D079F
2#3708C4
3#410AE9
4#5723F6
5#7347F7
6#8F6CF9
7#AB91FA
8#C7B6FC
9#E3DAFD
Tones
Muted variations
1#250B75
2#28116F
3#2B1769
4#2E1D63
5#31225D
6#342857
7#372E51
8#3A344B
9#3D3A46
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F4F0 #F4F0FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E5DD #E5DDFE | Light backgroundsTable row hoverSkeleton loading |
| 200 | CFBF #CFBFFC | Secondary backgroundsInput backgroundsDividers |
| 300 | A98E #A98EFA | BordersInactive statesPlaceholder text |
| 400 | 7D54 #7D54F8 | Disabled statesSecondary iconsMuted text |
| 500 | 5723 #5723F6 | Primary brand colorCTAsActive elementsLinks |
| 600 | 3D09 #3D09D7 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 3007 #3007AB | Active/pressed statesDark mode accentsSecondary text |
| 800 | 2205 #22057A | Text on light backgroundsHeadingsStrong borders |
| 900 | 1603 #16034E | Primary textHigh emphasis contentDark headings |
| 950 | 0E02 #0E0231 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--navy-50: #F4F0FE;
--navy-100: #E5DDFE;
--navy-200: #CFBFFC;
--navy-300: #A98EFA;
--navy-400: #7D54F8;
--navy-500: #5723F6;
--navy-600: #3D09D7;
--navy-700: #3007AB;
--navy-800: #22057A;
--navy-900: #16034E;
--navy-950: #0E0231;
}