Cobalt
#4043A0
BlueColor Codes
All color formats for development
HEX
#4043A0RGB
rgb(64, 67, 160)HSL
hsl(238, 43%, 44%)OKLCH
oklch(0.435 0.148 277)CMYK
cmyk(60%, 58%, 0%, 37%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#3A3C90
2#333680
3#2D2F70
4#262860
5#202250
6#1A1B40
7#131430
8#0D0D20
9#060710
Tints
Lighter variations
1#484CB5
2#5C5FBE
3#7073C6
4#8487CE
5#999BD6
6#ADAFDE
7#C2C3E7
8#D6D7EF
9#EBEBF7
Tones
Muted variations
1#45489C
2#4A4C97
3#4E5192
4#53558D
5#585A88
6#5D5E83
7#62637F
8#67677A
9#6B6C75
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F4F4 #F4F4FB | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E5E6 #E5E6F5 | Light backgroundsTable row hoverSkeleton loading |
| 200 | D0D1 #D0D1EC | Secondary backgroundsInput backgroundsDividers |
| 300 | ABAD #ABADDE | BordersInactive statesPlaceholder text |
| 400 | 7F82 #7F82CC | Disabled statesSecondary iconsMuted text |
| 500 | 5B5E #5B5EBE | Primary brand colorCTAsActive elementsLinks |
| 600 | 4043 #4043A0 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 3335 #333580 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 2426 #24265B | Text on light backgroundsHeadingsStrong borders |
| 900 | 1718 #17183A | Primary textHigh emphasis contentDark headings |
| 950 | 0F0F #0F0F24 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--cobalt-50: #F4F4FB;
--cobalt-100: #E5E6F5;
--cobalt-200: #D0D1EC;
--cobalt-300: #ABADDE;
--cobalt-400: #7F82CC;
--cobalt-500: #5B5EBE;
--cobalt-600: #4043A0;
--cobalt-700: #333580;
--cobalt-800: #24265B;
--cobalt-900: #17183A;
--cobalt-950: #0F0F24;
}