Royal Blue
#8222F7
PurpleColor Codes
All color formats for development
HEX
#8222F7RGB
rgb(130, 34, 247)HSL
hsl(267, 93%, 55%)OKLCH
oklch(0.537 0.275 295.1)CMYK
cmyk(47%, 86%, 0%, 3%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#7209F4
2#6608D9
3#5907BD
4#4C06A2
5#400587
6#33046C
7#260351
8#190236
9#0D011B
Tints
Lighter variations
1#8E38F8
2#9B4EF9
3#A764F9
4#B47AFA
5#C090FB
6#CDA6FC
7#D9BDFD
8#E6D3FD
9#F2E9FE
Tones
Muted variations
1#832CEC
2#8437E2
3#8542D7
4#864CCC
5#8757C2
6#8862B7
7#896CAC
8#8A77A2
9#8B8297
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F7F0 #F7F0FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | EBDD #EBDDFE | Light backgroundsTable row hoverSkeleton loading |
| 200 | DBBF #DBBFFD | Secondary backgroundsInput backgroundsDividers |
| 300 | BF8E #BF8EFB | BordersInactive statesPlaceholder text |
| 400 | 9D53 #9D53F9 | Disabled statesSecondary iconsMuted text |
| 500 | 8222 #8222F7 | Primary brand colorCTAsActive elementsLinks |
| 600 | 6608 #6608D9 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 5106 #5106AC | Active/pressed statesDark mode accentsSecondary text |
| 800 | 3A04 #3A047B | Text on light backgroundsHeadingsStrong borders |
| 900 | 2503 #25034F | Primary textHigh emphasis contentDark headings |
| 950 | 1702 #170231 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--royal-blue-50: #F7F0FE;
--royal-blue-100: #EBDDFE;
--royal-blue-200: #DBBFFD;
--royal-blue-300: #BF8EFB;
--royal-blue-400: #9D53F9;
--royal-blue-500: #8222F7;
--royal-blue-600: #6608D9;
--royal-blue-700: #5106AC;
--royal-blue-800: #3A047B;
--royal-blue-900: #25034F;
--royal-blue-950: #170231;
}