Royal Blue
#4B1FF9
BlueColor Codes
All color formats for development
HEX
#4B1FF9RGB
rgb(75, 31, 249)HSL
hsl(252, 95%, 55%)OKLCH
oklch(0.487 0.283 276.9)CMYK
cmyk(70%, 88%, 0%, 2%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#3606F6
2#3006DB
3#2A05BF
4#2404A4
5#1E0489
6#18036D
7#120252
8#0C0137
9#06011B
Tints
Lighter variations
1#5D36FA
2#6F4CFA
3#8162FB
4#9379FC
5#A58FFC
6#B7A5FD
7#C9BCFD
8#DBD2FE
9#EDE9FE
Tones
Muted variations
1#512AEE
2#5835E3
3#5E40D9
4#654BCE
5#6C56C3
6#7261B8
7#796CAD
8#7F76A2
9#868197
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F3F0 #F3F0FF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E3DC #E3DCFE | Light backgroundsTable row hoverSkeleton loading |
| 200 | CBBE #CBBEFD | Secondary backgroundsInput backgroundsDividers |
| 300 | A38D #A38DFC | BordersInactive statesPlaceholder text |
| 400 | 7351 #7351FB | Disabled statesSecondary iconsMuted text |
| 500 | 4B1F #4B1FF9 | Primary brand colorCTAsActive elementsLinks |
| 600 | 3006 #3006DB | Hover statesFocus ringsPrimary buttons hover |
| 700 | 2604 #2604AE | Active/pressed statesDark mode accentsSecondary text |
| 800 | 1B03 #1B037C | Text on light backgroundsHeadingsStrong borders |
| 900 | 1202 #120250 | Primary textHigh emphasis contentDark headings |
| 950 | 0B01 #0B0132 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--royal-blue-50: #F3F0FF;
--royal-blue-100: #E3DCFE;
--royal-blue-200: #CBBEFD;
--royal-blue-300: #A38DFC;
--royal-blue-400: #7351FB;
--royal-blue-500: #4B1FF9;
--royal-blue-600: #3006DB;
--royal-blue-700: #2604AE;
--royal-blue-800: #1B037C;
--royal-blue-900: #120250;
--royal-blue-950: #0B0132;
}