Navy
#0000B3
BlueColor Codes
All color formats for development
HEX
#0000B3RGB
rgb(0, 0, 179)HSL
hsl(240, 100%, 35%)OKLCH
oklch(0.347 0.24 264.1)CMYK
cmyk(100%, 100%, 0%, 30%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#0000A1
2#00008F
3#00007D
4#00006B
5#000059
6#000047
7#000036
8#000024
9#000012
Tints
Lighter variations
1#0000D4
2#0000F5
3#1717FF
4#3838FF
5#5959FF
6#7A7AFF
7#9C9CFF
8#BDBDFF
9#DEDEFF
Tones
Muted variations
1#0909AA
2#1212A1
3#1B1B98
4#24248F
5#2D2D86
6#36367D
7#3E3E74
8#47476B
9#505062
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0F0 #F0F0FF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DBDB #DBDBFF | Light backgroundsTable row hoverSkeleton loading |
| 200 | BDBD #BDBDFF | Secondary backgroundsInput backgroundsDividers |
| 300 | 8A8A #8A8AFF | BordersInactive statesPlaceholder text |
| 400 | 4D4D #4D4DFF | Disabled statesSecondary iconsMuted text |
| 500 | 1A1A #1A1AFF | Primary brand colorCTAsActive elementsLinks |
| 600 | 0000 #0000E0 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0000 #0000B3 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0000 #000080 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0000 #000052 | Primary textHigh emphasis contentDark headings |
| 950 | 0000 #000033 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--navy-50: #F0F0FF;
--navy-100: #DBDBFF;
--navy-200: #BDBDFF;
--navy-300: #8A8AFF;
--navy-400: #4D4DFF;
--navy-500: #1A1AFF;
--navy-600: #0000E0;
--navy-700: #0000B3;
--navy-800: #000080;
--navy-900: #000052;
--navy-950: #000033;
}