Royal Blue
#1173D0
BlueColor Codes
All color formats for development
HEX
#1173D0RGB
rgb(17, 115, 208)HSL
hsl(209, 85%, 44%)OKLCH
oklch(0.555 0.165 253.3)CMYK
cmyk(92%, 45%, 0%, 18%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#0F68BB
2#0D5CA6
3#0C5191
4#0A457D
5#083A68
6#072E53
7#05233E
8#03172A
9#020C15
Tints
Lighter variations
1#1382EA
2#2C90EE
3#469EF0
4#60ACF2
5#7BBAF4
6#95C7F6
7#B0D5F9
8#CAE3FB
9#E5F1FD
Tones
Muted variations
1#1A73C6
2#2473BC
3#2D72B3
4#3772A9
5#4172A0
6#4A7196
7#54718D
8#5D7183
9#67717A
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1F8 #F1F8FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DEEE #DEEEFC | Light backgroundsTable row hoverSkeleton loading |
| 200 | C2DF #C2DFFA | Secondary backgroundsInput backgroundsDividers |
| 300 | 92C6 #92C6F6 | BordersInactive statesPlaceholder text |
| 400 | 5AA8 #5AA8F2 | Disabled statesSecondary iconsMuted text |
| 500 | 2B90 #2B90EE | Primary brand colorCTAsActive elementsLinks |
| 600 | 1173 #1173D0 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0D5C #0D5CA5 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0A42 #0A4276 | Text on light backgroundsHeadingsStrong borders |
| 900 | 062A #062A4B | Primary textHigh emphasis contentDark headings |
| 950 | 041A #041A2F | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--royal-blue-50: #F1F8FE;
--royal-blue-100: #DEEEFC;
--royal-blue-200: #C2DFFA;
--royal-blue-300: #92C6F6;
--royal-blue-400: #5AA8F2;
--royal-blue-500: #2B90EE;
--royal-blue-600: #1173D0;
--royal-blue-700: #0D5CA5;
--royal-blue-800: #0A4276;
--royal-blue-900: #062A4B;
--royal-blue-950: #041A2F;
}