Royal Blue
#4C27F1
BlueColor Codes
All color formats for development
HEX
#4C27F1RGB
rgb(76, 39, 241)HSL
hsl(251, 88%, 55%)OKLCH
oklch(0.485 0.27 277.6)CMYK
cmyk(68%, 84%, 0%, 5%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#380FED
2#320DD3
3#2B0CB9
4#250A9E
5#1F0884
6#190769
7#13054F
8#0C0335
9#06021A
Tints
Lighter variations
1#5E3DF3
2#7052F4
3#8268F5
4#947EF7
5#A693F8
6#B8A9F9
7#C9BEFB
8#DBD4FC
9#EDE9FE
Tones
Muted variations
1#5331E7
2#593BDD
3#5F46D3
4#6650C9
5#6C5ABF
6#7364B5
7#796EAB
8#7F78A0
9#868296
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F3F1 #F3F1FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E3DD #E3DDFD | Light backgroundsTable row hoverSkeleton loading |
| 200 | CBC1 #CBC1FB | Secondary backgroundsInput backgroundsDividers |
| 300 | A491 #A491F8 | BordersInactive statesPlaceholder text |
| 400 | 7457 #7457F4 | Disabled statesSecondary iconsMuted text |
| 500 | 4C27 #4C27F1 | Primary brand colorCTAsActive elementsLinks |
| 600 | 320D #320DD3 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 280B #280BA8 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 1C08 #1C0878 | Text on light backgroundsHeadingsStrong borders |
| 900 | 1205 #12054D | Primary textHigh emphasis contentDark headings |
| 950 | 0B03 #0B0330 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--royal-blue-50: #F3F1FE;
--royal-blue-100: #E3DDFD;
--royal-blue-200: #CBC1FB;
--royal-blue-300: #A491F8;
--royal-blue-400: #7457F4;
--royal-blue-500: #4C27F1;
--royal-blue-600: #320DD3;
--royal-blue-700: #280BA8;
--royal-blue-800: #1C0878;
--royal-blue-900: #12054D;
--royal-blue-950: #0B0330;
}