Royal Blue
#473ADF
BlueColor Codes
All color formats for development
HEX
#473ADFRGB
rgb(71, 58, 223)HSL
hsl(245, 72%, 55%)OKLCH
oklch(0.483 0.237 276.3)CMYK
cmyk(68%, 74%, 0%, 13%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#3223D9
2#2D1FC1
3#271BA9
4#221891
5#1C1479
6#161060
7#110C48
8#0B0830
9#060418
Tints
Lighter variations
1#5A4DE2
2#6C61E5
3#7E75E9
4#9189EC
5#A39CEF
6#B6B0F2
7#C8C4F5
8#DAD8F9
9#EDEBFC
Tones
Muted variations
1#4E42D7
2#554ACE
3#5C52C6
4#635BBE
5#6A63B6
6#716BAD
7#7873A5
8#7E7C9D
9#858495
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F3F2 #F3F2FD | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E2E0 #E2E0FA | Light backgroundsTable row hoverSkeleton loading |
| 200 | CAC6 #CAC6F6 | Secondary backgroundsInput backgroundsDividers |
| 300 | A19A #A19AEF | BordersInactive statesPlaceholder text |
| 400 | 7065 #7065E6 | Disabled statesSecondary iconsMuted text |
| 500 | 473A #473ADF | Primary brand colorCTAsActive elementsLinks |
| 600 | 2D1F #2D1FC1 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 2419 #24199A | Active/pressed statesDark mode accentsSecondary text |
| 800 | 1912 #19126E | Text on light backgroundsHeadingsStrong borders |
| 900 | 100B #100B46 | Primary textHigh emphasis contentDark headings |
| 950 | 0A07 #0A072C | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--royal-blue-50: #F3F2FD;
--royal-blue-100: #E2E0FA;
--royal-blue-200: #CAC6F6;
--royal-blue-300: #A19AEF;
--royal-blue-400: #7065E6;
--royal-blue-500: #473ADF;
--royal-blue-600: #2D1FC1;
--royal-blue-700: #24199A;
--royal-blue-800: #19126E;
--royal-blue-900: #100B46;
--royal-blue-950: #0A072C;
}