Cobalt
#2A2CB7
BlueColor Codes
All color formats for development
HEX
#2A2CB7RGB
rgb(42, 44, 183)HSL
hsl(239, 63%, 44%)OKLCH
oklch(0.405 0.209 271.5)CMYK
cmyk(77%, 76%, 0%, 28%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#2527A5
2#212392
3#1D1F80
4#191A6E
5#15165B
6#111249
7#0C0D37
8#080925
9#040412
Tints
Lighter variations
1#2F31CE
2#4547D5
3#5C5EDA
4#7375DF
5#8B8CE5
6#A2A3EA
7#B9BAEF
8#D0D1F4
9#E8E8FA
Tones
Muted variations
1#3133B0
2#383AA9
3#3F40A2
4#46479B
5#4D4E94
6#54558C
7#5B5C85
8#62637E
9#696977
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F3F3 #F3F3FC | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E2E2 #E2E2F8 | Light backgroundsTable row hoverSkeleton loading |
| 200 | C9CA #C9CAF3 | Secondary backgroundsInput backgroundsDividers |
| 300 | 9FA1 #9FA1E9 | BordersInactive statesPlaceholder text |
| 400 | 6E6F #6E6FDE | Disabled statesSecondary iconsMuted text |
| 500 | 4446 #4446D5 | Primary brand colorCTAsActive elementsLinks |
| 600 | 2A2C #2A2CB7 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 2123 #212391 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 1819 #181968 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0F10 #0F1043 | Primary textHigh emphasis contentDark headings |
| 950 | 090A #090A2A | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--cobalt-50: #F3F3FC;
--cobalt-100: #E2E2F8;
--cobalt-200: #C9CAF3;
--cobalt-300: #9FA1E9;
--cobalt-400: #6E6FDE;
--cobalt-500: #4446D5;
--cobalt-600: #2A2CB7;
--cobalt-700: #212391;
--cobalt-800: #181968;
--cobalt-900: #0F1043;
--cobalt-950: #090A2A;
}