Home /Compare /Cerulean vs Cobalt

Cerulean vs Cobalt: What's the Difference?

The main difference between Cerulean and Cobalt is hue — Cerulean is a cool cyan, while Cobalt is a cool blue. Cerulean (#007BA7) and Cobalt (#0047AB) are similar colors often confused. They differ in brightness, saturation, and undertone, making each better suited for different design contexts.

Cerulean#007BA7
Cobalt#0047AB
#007BA7Blended: #0061A9#0047AB
ShareSave to PinterestTweet

Cerulean vs Cobalt: Key Differences at a Glance

Aspect Cerulean Cobalt
BrightnessDark (L=33%) — rich, serious, substantialDark (L=34%) — rich, serious, substantial
SaturationVivid (S=100%) — bright, energetic, eye-catchingVivid (S=100%) — bright, energetic, eye-catching
Hue familyCyanBlue
TemperatureCoolCool
Hex code#007BA7#0047AB
RGB0, 123, 1670, 71, 171

Can you use Cerulean and Cobalt together?

Cobalt text on Cerulean
Cerulean text on Cobalt
Contrast Ratio:1.76:1Insufficient Contrast

How to Tell Cerulean and Cobalt Apart

  • Watch the undertone: the hue shifts 19° between them, which changes the perceived temperature.
  • Compare them on a white background to see true saturation, and on black to see true lightness.

Cerulean or Cobalt: Which to Use and Where

Four real design scenarios, with the recommended pick based on hue, saturation, and WCAG contrast.

Branding & logos
PickCerulean

Cerulean is more saturated (100% HSL vs 100%) so it reads as bolder and more memorable at logo scale, while Cobalt can feel washed out when printed small.

Web UI & body text backgrounds
PickCobalt

Cobalt hits a 8.44:1 WCAG contrast against white — safer for text-heavy interfaces — where Cerulean only reaches 4.78:1 and risks failing AA at small body sizes.

Fashion & apparel
PickCobalt

Cobalt is a cool-leaning tone that flatters spring/summer collections and warmer skin undertones, while Cerulean leans cooler and is better suited to autumn/winter layering.

Interior design & walls
PickCerulean

Cerulean is the more muted of the two (100% saturation) and sits more calmly on large wall surfaces, while Cobalt's higher chroma can overwhelm a room when used beyond accent pieces.

When to Use Cerulean vs Cobalt in Design

Use Cerulean for:
Cool, techy, digital branding
Water, ice, cleaning products
Fresh modern UI accents
Summer and tropical themes
Youthful playful design
Use Cobalt for:
Tech and corporate trust
Finance and banking brands
Links and primary buttons
Medical and professional UI
Calm dependable visuals

Cerulean and Cobalt Hex Codes, RGB & HSL

Cerulean#007BA7

Cerulean (#007BA7) is a dark, vivid cyan with a cool undertone — it feels rich, serious, substantial and bright, energetic, eye-catching.

HEX
RGB
HSL
HSV
CMYK
PANTONE
Shades
Tints
Cobalt#0047AB

Cobalt (#0047AB) is a dark, vivid blue with a cool undertone — it feels rich, serious, substantial and bright, energetic, eye-catching.

HEX
RGB
HSL
HSV
CMYK
PANTONE
Shades
Tints

Cerulean and Cobalt WCAG Contrast Ratios

Text legibility depends on the contrast ratio between foreground and background. WCAG 2.1 AA requires at least 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1. Use these numbers to choose accessible combinations for your design.

Sample text preview
Cerulean text on white
4.78:1AA
Sample text preview
Cerulean text on black
4.39:1AA Large
Sample text preview
Cobalt text on white
8.44:1AAA
Sample text preview
Cobalt text on black
2.49:1Fail
Sample text preview
Cerulean text on Cobalt
1.76:1Fail
Sample text preview
Cobalt text on Cerulean
1.76:1Fail

Explore Cerulean and Cobalt individually

Each color has a dedicated page with shades, tints, CSS name, pairings, and color psychology.

Cerulean color page#007BA7 · shades, tints, pairings

More Cerulean and Cobalt Comparisons

Cerulean vs Cobalt FAQ

What is the difference between cerulean and cobalt?+
The main difference between Cerulean and Cobalt is hue — Cerulean is a cool cyan, while Cobalt is a cool blue. Cerulean (#007BA7) and Cobalt (#0047AB) are similar colors often confused. They differ in brightness, saturation, and undertone, making each better suited for different design contexts.
Is cerulean darker than cobalt?+
No, they're nearly the same brightness. Cerulean sits at 33% lightness and Cobalt at 34% — the difference is only 1 percentage points.
Are cerulean and cobalt the same color?+
No. Cerulean is #007BA7 and Cobalt is #0047AB. They differ by 19° in hue, 1% in lightness, and 0% in saturation.
Which is more saturated, cerulean or cobalt?+
They have nearly identical saturation — Cerulean at 100% and Cobalt at 100% in HSL.
Is cerulean warm or cool?+
Cerulean (#007BA7) is a cool cyan. Its hue sits at 196° on the color wheel, which places it in the cool range.
Is cobalt warm or cool?+
Cobalt (#0047AB) is a cool blue. Its hue sits at 215° on the color wheel, which places it in the cool range.
Can you use cerulean and cobalt together?+
Yes. Cerulean (cyan) and Cobalt (blue) can work as a complementary or analogous pair. Use one as the dominant tone and the other as a 10–20% accent to keep the palette balanced.
What color family does cerulean belong to?+
Cerulean belongs to the cyan family. Its HSL is 196°, 100%, 33% — a cool tone within the broader cyan group.
What is the hex code for cerulean?+
The hex code for Cerulean is #007BA7. In RGB, that's rgb(0, 123, 167), and in HSL it's hsl(196, 100%, 33%).
What is the hex code for cobalt?+
The hex code for Cobalt is #0047AB. In RGB, that's rgb(0, 71, 171), and in HSL it's hsl(215, 100%, 34%).