Royal Blue
#5C5EF0
BlueColor Codes
All color formats for development
HEX
#5C5EF0RGB
rgb(92, 94, 240)HSL
hsl(239, 83%, 65%)OKLCH
oklch(0.566 0.214 276.5)CMYK
cmyk(62%, 61%, 0%, 6%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#3D40ED
2#1F22EA
3#1417D4
4#1114B6
5#0E1098
6#0B0D79
7#080A5B
8#06073D
9#03031E
Tints
Lighter variations
1#6C6EF1
2#7C7EF3
3#8D8EF4
4#9D9EF6
5#ADAFF7
6#BEBFF9
7#CECFFA
8#DEDFFC
9#EFEFFD
Tones
Muted variations
1#6365E8
2#6A6CE1
3#7274DA
4#797BD2
5#8182CB
6#8889C3
7#9090BC
8#9797B5
9#9E9FAD
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1F1 #F1F1FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DEDF #DEDFFC | Light backgroundsTable row hoverSkeleton loading |
| 200 | C2C3 #C2C3F9 | Secondary backgroundsInput backgroundsDividers |
| 300 | 9495 #9495F5 | BordersInactive statesPlaceholder text |
| 400 | 5C5E #5C5EF0 | Disabled statesSecondary iconsMuted text |
| 500 | 2D30 #2D30EB | Primary brand colorCTAsActive elementsLinks |
| 600 | 1316 #1316CD | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0F12 #0F12A3 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0B0D #0B0D75 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0708 #07084B | Primary textHigh emphasis contentDark headings |
| 950 | 0405 #04052F | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--royal-blue-50: #F1F1FE;
--royal-blue-100: #DEDFFC;
--royal-blue-200: #C2C3F9;
--royal-blue-300: #9495F5;
--royal-blue-400: #5C5EF0;
--royal-blue-500: #2D30EB;
--royal-blue-600: #1316CD;
--royal-blue-700: #0F12A3;
--royal-blue-800: #0B0D75;
--royal-blue-900: #07084B;
--royal-blue-950: #04052F;
}