Cobalt
#1154D0
BlueColor Codes
All color formats for development
HEX
#1154D0RGB
rgb(17, 84, 208)HSL
hsl(219, 85%, 44%)OKLCH
oklch(0.49 0.202 261.6)CMYK
cmyk(92%, 60%, 0%, 18%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#0F4BBB
2#0D43A6
3#0C3B91
4#0A327D
5#082A68
6#072153
7#05193E
8#03112A
9#020815
Tints
Lighter variations
1#135EEA
2#2C70EE
3#4682F0
4#6093F2
5#7BA5F4
6#95B7F6
7#B0C9F9
8#CADBFB
9#E5EDFD
Tones
Muted variations
1#1A56C6
2#2459BC
3#2D5CB3
4#375FA9
5#4162A0
6#4A6596
7#54688D
8#5D6A83
9#676D7A
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1F5 #F1F5FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DEE9 #DEE9FC | Light backgroundsTable row hoverSkeleton loading |
| 200 | C2D5 #C2D5FA | Secondary backgroundsInput backgroundsDividers |
| 300 | 92B5 #92B5F6 | BordersInactive statesPlaceholder text |
| 400 | 5A8F #5A8FF2 | Disabled statesSecondary iconsMuted text |
| 500 | 2B6F #2B6FEE | Primary brand colorCTAsActive elementsLinks |
| 600 | 1154 #1154D0 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0D42 #0D42A5 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0A2F #0A2F76 | Text on light backgroundsHeadingsStrong borders |
| 900 | 061E #061E4B | Primary textHigh emphasis contentDark headings |
| 950 | 0413 #04132F | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--cobalt-50: #F1F5FE;
--cobalt-100: #DEE9FC;
--cobalt-200: #C2D5FA;
--cobalt-300: #92B5F6;
--cobalt-400: #5A8FF2;
--cobalt-500: #2B6FEE;
--cobalt-600: #1154D0;
--cobalt-700: #0D42A5;
--cobalt-800: #0A2F76;
--cobalt-900: #061E4B;
--cobalt-950: #04132F;
}