Royal Blue
#116DD0
BlueColor Codes
All color formats for development
HEX
#116DD0RGB
rgb(17, 109, 208)HSL
hsl(211, 85%, 44%)OKLCH
oklch(0.542 0.172 255.4)CMYK
cmyk(92%, 48%, 0%, 18%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#0F62BB
2#0D57A6
3#0C4C91
4#0A417D
5#083768
6#072C53
7#05213E
8#03162A
9#020B15
Tints
Lighter variations
1#137BEA
2#2C8AEE
3#4698F0
4#60A7F2
5#7BB6F4
6#95C4F6
7#B0D3F9
8#CAE2FB
9#E5F0FD
Tones
Muted variations
1#1A6DC6
2#246EBC
3#2D6EB3
4#376EA9
5#416FA0
6#4A6F96
7#546F8D
8#5D7083
9#67707A
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1F7 #F1F7FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DEED #DEEDFC | Light backgroundsTable row hoverSkeleton loading |
| 200 | C2DD #C2DDFA | Secondary backgroundsInput backgroundsDividers |
| 300 | 92C3 #92C3F6 | BordersInactive statesPlaceholder text |
| 400 | 5AA3 #5AA3F2 | Disabled statesSecondary iconsMuted text |
| 500 | 2B89 #2B89EE | Primary brand colorCTAsActive elementsLinks |
| 600 | 116D #116DD0 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0D57 #0D57A5 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0A3E #0A3E76 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0628 #06284B | Primary textHigh emphasis contentDark headings |
| 950 | 0419 #04192F | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--royal-blue-50: #F1F7FE;
--royal-blue-100: #DEEDFC;
--royal-blue-200: #C2DDFA;
--royal-blue-300: #92C3F6;
--royal-blue-400: #5AA3F2;
--royal-blue-500: #2B89EE;
--royal-blue-600: #116DD0;
--royal-blue-700: #0D57A5;
--royal-blue-800: #0A3E76;
--royal-blue-900: #06284B;
--royal-blue-950: #04192F;
}