Royal Blue
#6C22F7
PurpleColor Codes
All color formats for development
HEX
#6C22F7RGB
rgb(108, 34, 247)HSL
hsl(261, 93%, 55%)OKLCH
oklch(0.514 0.275 287.6)CMYK
cmyk(56%, 86%, 0%, 3%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#5B09F4
2#5108D9
3#4707BD
4#3D06A2
5#330587
6#28046C
7#1E0351
8#140236
9#0A011B
Tints
Lighter variations
1#7B38F8
2#8A4EF9
3#9864F9
4#A77AFA
5#B690FB
6#C4A6FC
7#D3BDFD
8#E2D3FD
9#F0E9FE
Tones
Muted variations
1#6F2CEC
2#7337E2
3#7642D7
4#794CCC
5#7C57C2
6#7F62B7
7#836CAC
8#8677A2
9#898297
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F5F0 #F5F0FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E8DD #E8DDFE | Light backgroundsTable row hoverSkeleton loading |
| 200 | D5BF #D5BFFD | Secondary backgroundsInput backgroundsDividers |
| 300 | B48E #B48EFB | BordersInactive statesPlaceholder text |
| 400 | 8D53 #8D53F9 | Disabled statesSecondary iconsMuted text |
| 500 | 6C22 #6C22F7 | Primary brand colorCTAsActive elementsLinks |
| 600 | 5108 #5108D9 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 4006 #4006AC | Active/pressed statesDark mode accentsSecondary text |
| 800 | 2E04 #2E047B | Text on light backgroundsHeadingsStrong borders |
| 900 | 1D03 #1D034F | Primary textHigh emphasis contentDark headings |
| 950 | 1202 #120231 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--royal-blue-50: #F5F0FE;
--royal-blue-100: #E8DDFE;
--royal-blue-200: #D5BFFD;
--royal-blue-300: #B48EFB;
--royal-blue-400: #8D53F9;
--royal-blue-500: #6C22F7;
--royal-blue-600: #5108D9;
--royal-blue-700: #4006AC;
--royal-blue-800: #2E047B;
--royal-blue-900: #1D034F;
--royal-blue-950: #120231;
}