Royal Blue
#2B2EEE
BlueColor Codes
All color formats for development
HEX
#2B2EEERGB
rgb(43, 46, 238)HSL
hsl(239, 85%, 55%)OKLCH
oklch(0.469 0.27 269.1)CMYK
cmyk(82%, 81%, 0%, 7%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#1317EA
2#1114D0
3#0F12B6
4#0D0F9C
5#0B0D82
6#080A68
7#06084E
8#040534
9#02031A
Tints
Lighter variations
1#4043F0
2#5558F1
3#6A6DF3
4#8082F5
5#9596F6
6#AAABF8
7#BFC0FA
8#D5D5FC
9#EAEAFD
Tones
Muted variations
1#3437E4
2#3E41DA
3#484AD1
4#5254C7
5#5B5DBD
6#6567B3
7#6F70AA
8#7979A0
9#828396
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1F1 #F1F1FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DEDE #DEDEFC | Light backgroundsTable row hoverSkeleton loading |
| 200 | C2C3 #C2C3FA | Secondary backgroundsInput backgroundsDividers |
| 300 | 9294 #9294F6 | BordersInactive statesPlaceholder text |
| 400 | 5A5C #5A5CF2 | Disabled statesSecondary iconsMuted text |
| 500 | 2B2E #2B2EEE | Primary brand colorCTAsActive elementsLinks |
| 600 | 1114 #1114D0 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0D10 #0D10A5 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0A0B #0A0B76 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0607 #06074B | Primary textHigh emphasis contentDark headings |
| 950 | 0405 #04052F | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--royal-blue-50: #F1F1FE;
--royal-blue-100: #DEDEFC;
--royal-blue-200: #C2C3FA;
--royal-blue-300: #9294F6;
--royal-blue-400: #5A5CF2;
--royal-blue-500: #2B2EEE;
--royal-blue-600: #1114D0;
--royal-blue-700: #0D10A5;
--royal-blue-800: #0A0B76;
--royal-blue-900: #06074B;
--royal-blue-950: #04052F;
}