Navy
#260052
PurpleColor Codes
All color formats for development
HEX
#260052RGB
rgb(38, 0, 82)HSL
hsl(268, 100%, 16%)OKLCH
oklch(0.234 0.129 295.2)CMYK
cmyk(54%, 100%, 0%, 68%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#220049
2#1E0041
3#1B0039
4#170031
5#130029
6#0F0021
7#0B0018
8#080010
9#040008
Tints
Lighter variations
1#3A007C
2#4E00A7
3#6200D2
4#7600FD
5#8D29FF
6#A454FF
7#BA7EFF
8#D1A9FF
9#E8D4FF
Tones
Muted variations
1#26044E
2#270849
3#270C45
4#271041
5#27143D
6#281839
7#281D35
8#282131
9#29252D
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F7F0 #F7F0FF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | ECDB #ECDBFF | Light backgroundsTable row hoverSkeleton loading |
| 200 | DCBD #DCBDFF | Secondary backgroundsInput backgroundsDividers |
| 300 | C08A #C08AFF | BordersInactive statesPlaceholder text |
| 400 | A04D #A04DFF | Disabled statesSecondary iconsMuted text |
| 500 | 851A #851AFF | Primary brand colorCTAsActive elementsLinks |
| 600 | 6900 #6900E0 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 5300 #5300B3 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 3C00 #3C0080 | Text on light backgroundsHeadingsStrong borders |
| 900 | 2600 #260052 | Primary textHigh emphasis contentDark headings |
| 950 | 1800 #180033 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--navy-50: #F7F0FF;
--navy-100: #ECDBFF;
--navy-200: #DCBDFF;
--navy-300: #C08AFF;
--navy-400: #A04DFF;
--navy-500: #851AFF;
--navy-600: #6900E0;
--navy-700: #5300B3;
--navy-800: #3C0080;
--navy-900: #260052;
--navy-950: #180033;
}