Blue
#1114D0
BlueColor Codes
All color formats for development
HEX
#1114D0RGB
rgb(17, 20, 208)HSL
hsl(239, 85%, 44%)OKLCH
oklch(0.401 0.259 266)CMYK
cmyk(92%, 90%, 0%, 18%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#0F12BB
2#0D10A6
3#0C0E91
4#0A0C7D
5#080A68
6#070853
7#05063E
8#03042A
9#020215
Tints
Lighter variations
1#1317EA
2#2C2FEE
3#4649F0
4#6063F2
5#7B7DF4
6#9597F6
7#B0B1F9
8#CACBFB
9#E5E5FD
Tones
Muted variations
1#1A1DC6
2#2426BC
3#2D30B3
4#3739A9
5#4142A0
6#4A4B96
7#54558D
8#5D5E83
9#67677A
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 {
--blue-50: #F1F1FE;
--blue-100: #DEDEFC;
--blue-200: #C2C3FA;
--blue-300: #9294F6;
--blue-400: #5A5CF2;
--blue-500: #2B2EEE;
--blue-600: #1114D0;
--blue-700: #0D10A5;
--blue-800: #0A0B76;
--blue-900: #06074B;
--blue-950: #04052F;
}