Royal Blue
#5565F7
BlueColor Codes
All color formats for development
HEX
#5565F7RGB
rgb(85, 101, 247)HSL
hsl(234, 91%, 65%)OKLCH
oklch(0.58 0.216 272.9)CMYK
cmyk(66%, 59%, 0%, 3%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#3548F5
2#152BF4
3#0A20DE
4#091BBE
5#07179E
6#06127F
7#040E5F
8#03093F
9#010520
Tints
Lighter variations
1#6674F8
2#7784F9
3#8893F9
4#99A2FA
5#AAB2FB
6#BBC1FC
7#CCD1FD
8#DDE0FD
9#EEF0FE
Tones
Muted variations
1#5D6BEF
2#6572E7
3#6D78DF
4#757FD6
5#7D85CE
6#858CC6
7#8D92BE
8#9699B6
9#9E9FAE
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0F2 #F0F2FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DDE0 #DDE0FD | Light backgroundsTable row hoverSkeleton loading |
| 200 | C0C6 #C0C6FC | Secondary backgroundsInput backgroundsDividers |
| 300 | 8F9A #8F9AFA | BordersInactive statesPlaceholder text |
| 400 | 5565 #5565F7 | Disabled statesSecondary iconsMuted text |
| 500 | 2439 #2439F5 | Primary brand colorCTAsActive elementsLinks |
| 600 | 0A1F #0A1FD6 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0818 #0818AA | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0611 #06117A | Text on light backgroundsHeadingsStrong borders |
| 900 | 040B #040B4E | Primary textHigh emphasis contentDark headings |
| 950 | 0207 #020731 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--royal-blue-50: #F0F2FE;
--royal-blue-100: #DDE0FD;
--royal-blue-200: #C0C6FC;
--royal-blue-300: #8F9AFA;
--royal-blue-400: #5565F7;
--royal-blue-500: #2439F5;
--royal-blue-600: #0A1FD6;
--royal-blue-700: #0818AA;
--royal-blue-800: #06117A;
--royal-blue-900: #040B4E;
--royal-blue-950: #020731;
}