Navy
#0303B0
BlueColor Codes
All color formats for development
HEX
#0303B0RGB
rgb(3, 3, 176)HSL
hsl(240, 97%, 35%)OKLCH
oklch(0.345 0.235 264.5)CMYK
cmyk(98%, 98%, 0%, 31%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#02029E
2#02028D
3#02027B
4#020269
5#010158
6#010146
7#010135
8#010123
9#000012
Tints
Lighter variations
1#0303D0
2#0404F1
3#1A1AFC
4#3B3BFC
5#5C5CFD
6#7C7CFD
7#9D9DFE
8#BEBEFE
9#DEDEFF
Tones
Muted variations
1#0B0BA7
2#14149F
3#1D1D96
4#25258D
5#2E2E85
6#37377C
7#3F3F73
8#48486B
9#515162
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0F0 #F0F0FF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DCDC #DCDCFE | Light backgroundsTable row hoverSkeleton loading |
| 200 | BEBE #BEBEFE | Secondary backgroundsInput backgroundsDividers |
| 300 | 8B8B #8B8BFD | BordersInactive statesPlaceholder text |
| 400 | 4F4F #4F4FFC | Disabled statesSecondary iconsMuted text |
| 500 | 1D1D #1D1DFC | Primary brand colorCTAsActive elementsLinks |
| 600 | 0303 #0303DD | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0303 #0303B0 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0202 #02027E | Text on light backgroundsHeadingsStrong borders |
| 900 | 0101 #010150 | Primary textHigh emphasis contentDark headings |
| 950 | 0101 #010132 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--navy-50: #F0F0FF;
--navy-100: #DCDCFE;
--navy-200: #BEBEFE;
--navy-300: #8B8BFD;
--navy-400: #4F4FFC;
--navy-500: #1D1DFC;
--navy-600: #0303DD;
--navy-700: #0303B0;
--navy-800: #02027E;
--navy-900: #010150;
--navy-950: #010132;
}