Royal Blue
#203AF8
BlueColor Codes
All color formats for development
HEX
#203AF8RGB
rgb(32, 58, 248)HSL
hsl(233, 94%, 55%)OKLCH
oklch(0.491 0.274 266.6)CMYK
cmyk(87%, 77%, 0%, 3%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#0823F5
2#071FDA
3#061BBE
4#0518A3
5#041488
6#03106D
7#030C52
8#020836
9#01041B
Tints
Lighter variations
1#374DF9
2#4D61F9
3#6375FA
4#7989FB
5#909CFC
6#A6B0FC
7#BCC4FD
8#D2D8FE
9#E9EBFE
Tones
Muted variations
1#2B42ED
2#364AE3
3#4152D8
4#4C5BCD
5#5663C2
6#616BB7
7#6C73AD
8#777CA2
9#818497
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0F2 #F0F2FF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DCE0 #DCE0FE | Light backgroundsTable row hoverSkeleton loading |
| 200 | BFC6 #BFC6FD | Secondary backgroundsInput backgroundsDividers |
| 300 | 8D9A #8D9AFB | BordersInactive statesPlaceholder text |
| 400 | 5265 #5265FA | Disabled statesSecondary iconsMuted text |
| 500 | 203A #203AF8 | Primary brand colorCTAsActive elementsLinks |
| 600 | 071F #071FDA | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0519 #0519AD | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0412 #04127C | Text on light backgroundsHeadingsStrong borders |
| 900 | 020B #020B4F | Primary textHigh emphasis contentDark headings |
| 950 | 0207 #020731 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--royal-blue-50: #F0F2FF;
--royal-blue-100: #DCE0FE;
--royal-blue-200: #BFC6FD;
--royal-blue-300: #8D9AFB;
--royal-blue-400: #5265FA;
--royal-blue-500: #203AF8;
--royal-blue-600: #071FDA;
--royal-blue-700: #0519AD;
--royal-blue-800: #04127C;
--royal-blue-900: #020B4F;
--royal-blue-950: #020731;
}