Royal Blue
#6A55F7
BlueColor Codes
All color formats for development
HEX
#6A55F7RGB
rgb(106, 85, 247)HSL
hsl(248, 91%, 65%)OKLCH
oklch(0.568 0.23 282.1)CMYK
cmyk(57%, 66%, 0%, 3%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#4F35F5
2#3315F4
3#270ADE
4#2109BE
5#1C079E
6#16067F
7#11045F
8#0B033F
9#060120
Tints
Lighter variations
1#7966F8
2#8877F9
3#9788F9
4#A699FA
5#B5AAFB
6#C3BBFC
7#D2CCFD
8#E1DDFD
9#F0EEFE
Tones
Muted variations
1#705DEF
2#7665E7
3#7C6DDF
4#8275D6
5#887DCE
6#8E85C6
7#948DBE
8#9A96B6
9#A09EAE
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F2F0 #F2F0FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E1DD #E1DDFD | Light backgroundsTable row hoverSkeleton loading |
| 200 | C8C0 #C8C0FC | Secondary backgroundsInput backgroundsDividers |
| 300 | 9D8F #9D8FFA | BordersInactive statesPlaceholder text |
| 400 | 6A55 #6A55F7 | Disabled statesSecondary iconsMuted text |
| 500 | 4024 #4024F5 | Primary brand colorCTAsActive elementsLinks |
| 600 | 250A #250AD6 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 1E08 #1E08AA | Active/pressed statesDark mode accentsSecondary text |
| 800 | 1506 #15067A | Text on light backgroundsHeadingsStrong borders |
| 900 | 0E04 #0E044E | Primary textHigh emphasis contentDark headings |
| 950 | 0802 #080231 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--royal-blue-50: #F2F0FE;
--royal-blue-100: #E1DDFD;
--royal-blue-200: #C8C0FC;
--royal-blue-300: #9D8FFA;
--royal-blue-400: #6A55F7;
--royal-blue-500: #4024F5;
--royal-blue-600: #250AD6;
--royal-blue-700: #1E08AA;
--royal-blue-800: #15067A;
--royal-blue-900: #0E044E;
--royal-blue-950: #080231;
}