Royal Blue
#1B65C5
BlueColor Codes
All color formats for development
HEX
#1B65C5RGB
rgb(27, 101, 197)HSL
hsl(214, 76%, 44%)OKLCH
oklch(0.518 0.166 257.3)CMYK
cmyk(86%, 49%, 0%, 23%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#185BB2
2#16519E
3#13478A
4#103C76
5#0D3263
6#0B284F
7#081E3B
8#051427
9#030A14
Tints
Lighter variations
1#1E72DF
2#3681E4
3#4F91E7
4#68A1EA
5#81B0EE
6#9AC0F1
7#B4D0F5
8#CDE0F8
9#E6EFFC
Tones
Muted variations
1#2366BD
2#2C67B4
3#3568AC
4#3D69A3
5#466B9B
6#4E6C92
7#576D8A
8#5F6E81
9#686F79
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F2F7 #F2F7FD | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E0EB #E0EBFB | Light backgroundsTable row hoverSkeleton loading |
| 200 | C5DA #C5DAF7 | Secondary backgroundsInput backgroundsDividers |
| 300 | 98BE #98BEF1 | BordersInactive statesPlaceholder text |
| 400 | 629D #629DEA | Disabled statesSecondary iconsMuted text |
| 500 | 3581 #3581E3 | Primary brand colorCTAsActive elementsLinks |
| 600 | 1B65 #1B65C5 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 1550 #15509D | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0F39 #0F3970 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0A25 #0A2548 | Primary textHigh emphasis contentDark headings |
| 950 | 0617 #06172D | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--royal-blue-50: #F2F7FD;
--royal-blue-100: #E0EBFB;
--royal-blue-200: #C5DAF7;
--royal-blue-300: #98BEF1;
--royal-blue-400: #629DEA;
--royal-blue-500: #3581E3;
--royal-blue-600: #1B65C5;
--royal-blue-700: #15509D;
--royal-blue-800: #0F3970;
--royal-blue-900: #0A2548;
--royal-blue-950: #06172D;
}