Cobalt
#2F18C9
BlueColor Codes
All color formats for development
HEX
#2F18C9RGB
rgb(47, 24, 201)HSL
hsl(248, 79%, 44%)OKLCH
oklch(0.407 0.243 272.9)CMYK
cmyk(77%, 88%, 0%, 21%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#2A15B5
2#2613A1
3#21108D
4#1C0E79
5#180C64
6#130950
7#0E073C
8#090528
9#050214
Tints
Lighter variations
1#351BE2
2#4B33E7
3#614CEA
4#7866ED
5#8E7FF0
6#A599F3
7#BBB2F6
8#D2CCF9
9#E8E5FC
Tones
Muted variations
1#3620C0
2#3C29B7
3#4332AE
4#493BA5
5#50449D
6#564D94
7#5D568B
8#635E82
9#6A6779
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F3F1 #F3F1FD | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E3DF #E3DFFB | Light backgroundsTable row hoverSkeleton loading |
| 200 | CBC4 #CBC4F8 | Secondary backgroundsInput backgroundsDividers |
| 300 | A296 #A296F3 | BordersInactive statesPlaceholder text |
| 400 | 725F #725FEC | Disabled statesSecondary iconsMuted text |
| 500 | 4A32 #4A32E7 | Primary brand colorCTAsActive elementsLinks |
| 600 | 2F18 #2F18C9 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 2613 #2613A0 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 1B0D #1B0D72 | Text on light backgroundsHeadingsStrong borders |
| 900 | 1109 #110949 | Primary textHigh emphasis contentDark headings |
| 950 | 0B05 #0B052E | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--cobalt-50: #F3F1FD;
--cobalt-100: #E3DFFB;
--cobalt-200: #CBC4F8;
--cobalt-300: #A296F3;
--cobalt-400: #725FEC;
--cobalt-500: #4A32E7;
--cobalt-600: #2F18C9;
--cobalt-700: #2613A0;
--cobalt-800: #1B0D72;
--cobalt-900: #110949;
--cobalt-950: #0B052E;
}