Blue
#1812CE
BlueColor Codes
All color formats for development
HEX
#1812CERGB
rgb(24, 18, 206)HSL
hsl(242, 84%, 44%)OKLCH
oklch(0.399 0.257 267.1)CMYK
cmyk(88%, 91%, 0%, 19%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#1610BA
2#130EA5
3#110D91
4#0F0B7C
5#0C0967
6#0A0753
7#07053E
8#050429
9#020215
Tints
Lighter variations
1#1B14E9
2#332DED
3#4D47EF
4#6661F1
5#807CF4
6#9996F6
7#B3B0F8
8#CCCAFA
9#E6E5FD
Tones
Muted variations
1#211BC5
2#2A25BC
3#332EB2
4#3B38A9
5#44419F
6#4D4B96
7#56548C
8#5F5D83
9#67677A
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1F1 #F1F1FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DFDE #DFDEFC | Light backgroundsTable row hoverSkeleton loading |
| 200 | C4C2 #C4C2FA | Secondary backgroundsInput backgroundsDividers |
| 300 | 9693 #9693F6 | BordersInactive statesPlaceholder text |
| 400 | 605B #605BF1 | Disabled statesSecondary iconsMuted text |
| 500 | 322C #322CED | Primary brand colorCTAsActive elementsLinks |
| 600 | 1812 #1812CE | Hover statesFocus ringsPrimary buttons hover |
| 700 | 130E #130EA4 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0E0A #0E0A75 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0907 #09074B | Primary textHigh emphasis contentDark headings |
| 950 | 0604 #06042F | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--blue-50: #F1F1FE;
--blue-100: #DFDEFC;
--blue-200: #C4C2FA;
--blue-300: #9693F6;
--blue-400: #605BF1;
--blue-500: #322CED;
--blue-600: #1812CE;
--blue-700: #130EA4;
--blue-800: #0E0A75;
--blue-900: #09074B;
--blue-950: #06042F;
}