Cobalt

#1455CC

Blue

Color Codes

All color formats for development

HEX

#1455CC

RGB

rgb(20, 85, 204)

HSL

hsl(219, 82%, 44%)

OKLCH

oklch(0.489 0.195 261.5)

CMYK

cmyk(90%, 58%, 0%, 20%)

Accessibility

WCAG contrast compliance

On White Background

6.56:1

AA ✓AAA ✗

On Black Background

3.20:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#F1F5

100

#DFE9

200

#C3D6

300

#94B6

400

#5D90

500

#2E70

600

#1455

700

#1043

800

#0B30

900

#071F

950

#0513

Shades

Darker variations

1#124CB8

2#1044A3

3#0E3B8F

4#0C337B

5#0A2A66

6#082252

7#06193D

8#041129

9#020814

Tints

Lighter variations

1#175FE6

2#2F71EA

3#4982ED

4#6394F0

5#7DA6F2

6#97B8F5

7#B1CAF7

8#CBDBFA

9#E5EDFC

Tones

Muted variations

1#1D57C3

2#275ABA

3#305DB1

4#3960A7

5#42629E

6#4B6595

7#55688C

8#5E6B83

9#676D79

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	F1F5 `#F1F5FE`	BackgroundsSubtle highlightsCard backgrounds
100	DFE9 `#DFE9FC`	Light backgroundsTable row hoverSkeleton loading
200	C3D6 `#C3D6F9`	Secondary backgroundsInput backgroundsDividers
300	94B6 `#94B6F4`	BordersInactive statesPlaceholder text
400	5D90 `#5D90EF`	Disabled statesSecondary iconsMuted text
500	2E70 `#2E70EA`	Primary brand colorCTAsActive elementsLinks
600	1455 `#1455CC`	Hover statesFocus ringsPrimary buttons hover
700	1043 `#1043A2`	Active/pressed statesDark mode accentsSecondary text
800	0B30 `#0B3074`	Text on light backgroundsHeadingsStrong borders
900	071F `#071F4A`	Primary textHigh emphasis contentDark headings
950	0513 `#05132E`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --cobalt-50: #F1F5FE;
  --cobalt-100: #DFE9FC;
  --cobalt-200: #C3D6F9;
  --cobalt-300: #94B6F4;
  --cobalt-400: #5D90EF;
  --cobalt-500: #2E70EA;
  --cobalt-600: #1455CC;
  --cobalt-700: #1043A2;
  --cobalt-800: #0B3074;
  --cobalt-900: #071F4A;
  --cobalt-950: #05132E;
}

Generate More Shades Create Palette Convert Color