Royal Blue
#761EFA
PurpleColor Codes
All color formats for development
HEX
#761EFARGB
rgb(118, 30, 250)HSL
hsl(264, 96%, 55%)OKLCH
oklch(0.525 0.279 290.7)CMYK
cmyk(53%, 88%, 0%, 2%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#6605F7
2#5B04DC
3#4F04C0
4#4403A5
5#390389
6#2D026E
7#220252
8#170137
9#0B011B
Tints
Lighter variations
1#8435FB
2#924BFB
3#9F62FC
4#AD78FC
5#BB8FFD
6#C8A5FD
7#D6BCFE
8#E4D2FE
9#F1E9FF
Tones
Muted variations
1#7829EF
2#7B34E4
3#7D3FD9
4#7F4ACE
5#8155C3
6#8360B8
7#866BAD
8#8876A2
9#8A8197
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F6F0 #F6F0FF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | EADC #EADCFE | Light backgroundsTable row hoverSkeleton loading |
| 200 | D7BE #D7BEFE | Secondary backgroundsInput backgroundsDividers |
| 300 | B98C #B98CFD | BordersInactive statesPlaceholder text |
| 400 | 9550 #9550FB | Disabled statesSecondary iconsMuted text |
| 500 | 761E #761EFA | Primary brand colorCTAsActive elementsLinks |
| 600 | 5B04 #5B04DC | Hover statesFocus ringsPrimary buttons hover |
| 700 | 4804 #4804AF | Active/pressed statesDark mode accentsSecondary text |
| 800 | 3403 #34037D | Text on light backgroundsHeadingsStrong borders |
| 900 | 2102 #210250 | Primary textHigh emphasis contentDark headings |
| 950 | 1501 #150132 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--royal-blue-50: #F6F0FF;
--royal-blue-100: #EADCFE;
--royal-blue-200: #D7BEFE;
--royal-blue-300: #B98CFD;
--royal-blue-400: #9550FB;
--royal-blue-500: #761EFA;
--royal-blue-600: #5B04DC;
--royal-blue-700: #4804AF;
--royal-blue-800: #34037D;
--royal-blue-900: #210250;
--royal-blue-950: #150132;
}