Royal Blue
#4C26F2
BlueColor Codes
All color formats for development
HEX
#4C26F2RGB
rgb(76, 38, 242)HSL
hsl(251, 89%, 55%)OKLCH
oklch(0.485 0.272 277.6)CMYK
cmyk(69%, 84%, 0%, 5%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#370EEF
2#310CD4
3#2B0BBA
4#25099F
5#1F0885
6#18066A
7#120550
8#0C0335
9#06021B
Tints
Lighter variations
1#5E3CF4
2#6F51F5
3#8167F6
4#937DF7
5#A593F9
6#B7A8FA
7#C9BEFB
8#DBD4FC
9#EDE9FE
Tones
Muted variations
1#5230E8
2#593BDE
3#5F45D4
4#654FCA
5#6C59BF
6#7263B5
7#796EAB
8#7F78A1
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 | CBC0 #CBC0FB | Secondary backgroundsInput backgroundsDividers |
| 300 | A390 #A390F9 | BordersInactive statesPlaceholder text |
| 400 | 7356 #7356F5 | Disabled statesSecondary iconsMuted text |
| 500 | 4C26 #4C26F2 | Primary brand colorCTAsActive elementsLinks |
| 600 | 310C #310CD4 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 270A #270AA9 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 1C07 #1C0778 | Text on light backgroundsHeadingsStrong borders |
| 900 | 1204 #12044D | 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: #CBC0FB;
--royal-blue-300: #A390F9;
--royal-blue-400: #7356F5;
--royal-blue-500: #4C26F2;
--royal-blue-600: #310CD4;
--royal-blue-700: #270AA9;
--royal-blue-800: #1C0778;
--royal-blue-900: #12044D;
--royal-blue-950: #0B0330;
}