Cobalt
#234D90
BlueColor Codes
All color formats for development
HEX
#234D90RGB
rgb(35, 77, 144)HSL
hsl(217, 61%, 35%)OKLCH
oklch(0.428 0.12 259.4)CMYK
cmyk(76%, 47%, 0%, 44%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#1F4581
2#1C3D73
3#183665
4#152E56
5#112648
6#0E1F39
7#0A172B
8#070F1D
9#03080E
Tints
Lighter variations
1#295BAA
2#3069C5
3#447AD2
4#5F8DD8
5#7AA0DF
6#94B3E5
7#AFC6EC
8#CAD9F2
9#E4ECF9
Tones
Muted variations
1#284E8A
2#2E4F85
3#33507F
4#39527A
5#3E5374
6#43546F
7#49556A
8#4E5764
9#54585F
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F3F6 #F3F6FC | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E2EB #E2EBF8 | Light backgroundsTable row hoverSkeleton loading |
| 200 | CAD9 #CAD9F2 | Secondary backgroundsInput backgroundsDividers |
| 300 | A1BC #A1BCE8 | BordersInactive statesPlaceholder text |
| 400 | 6F99 #6F99DC | Disabled statesSecondary iconsMuted text |
| 500 | 467C #467CD2 | Primary brand colorCTAsActive elementsLinks |
| 600 | 2C60 #2C60B5 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 234D #234D90 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 1937 #193767 | Text on light backgroundsHeadingsStrong borders |
| 900 | 1023 #102342 | Primary textHigh emphasis contentDark headings |
| 950 | 0A16 #0A1629 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--cobalt-50: #F3F6FC;
--cobalt-100: #E2EBF8;
--cobalt-200: #CAD9F2;
--cobalt-300: #A1BCE8;
--cobalt-400: #6F99DC;
--cobalt-500: #467CD2;
--cobalt-600: #2C60B5;
--cobalt-700: #234D90;
--cobalt-800: #193767;
--cobalt-900: #102342;
--cobalt-950: #0A1629;
}