Navy
#16034F
PurpleColor Codes
All color formats for development
HEX
#16034FRGB
rgb(22, 3, 79)HSL
hsl(255, 93%, 16%)OKLCH
oklch(0.215 0.123 281)CMYK
cmyk(72%, 96%, 0%, 69%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#140347
2#11023F
3#0F0237
4#0D022F
5#0B0127
6#09011F
7#070118
8#040110
9#020008
Tints
Lighter variations
1#210478
2#2D06A1
3#3807CB
4#4409F4
5#6230F8
6#815AF9
7#A183FB
8#C0ACFC
9#E0D6FE
Tones
Muted variations
1#18074B
2#1A0A47
3#1C0E43
4#1D1240
5#1F163C
6#211A38
7#231D34
8#252130
9#27252D
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 | CEBF #CEBFFD | Secondary backgroundsInput backgroundsDividers |
| 300 | A98E #A98EFB | BordersInactive statesPlaceholder text |
| 400 | 7C53 #7C53F9 | Disabled statesSecondary iconsMuted text |
| 500 | 5722 #5722F7 | Primary brand colorCTAsActive elementsLinks |
| 600 | 3C08 #3C08D9 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 3006 #3006AC | Active/pressed statesDark mode accentsSecondary text |
| 800 | 2204 #22047B | Text on light backgroundsHeadingsStrong borders |
| 900 | 1603 #16034F | 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: #CEBFFD;
--navy-300: #A98EFB;
--navy-400: #7C53F9;
--navy-500: #5722F7;
--navy-600: #3C08D9;
--navy-700: #3006AC;
--navy-800: #22047B;
--navy-900: #16034F;
--navy-950: #0E0231;
}