Using Cerulean in design
HEX
#007BA7
RGB
0, 123, 167
HSL
196°, 100%, 33%
HSV
196°, 100%, 65%
A saturated mid blue that still feels outdoorsy — think distant hills on a hazy day rather than LED glow. #007BA7 holds enough depth for headlines yet stays friendly. Many people hear "cerulean" and think art-supply aisles and travel posters.
Best for
Consulting deliverables, strategy documents, and data-driven layouts.
Accessibility
Cerulean text on white passes AA at 4.78:1, which makes it usable for headings and short labels.
How does cerulean compare to nearby colors?
What is the difference between cerulean and teal?
The visible difference between Cerulean (#007BA7) and Teal (#008080) is subtle, but it still nudges the family from navy ink toward evergreen and resinous. Cerulean makes the composition feel less compact, which is useful when the darker alternative starts to dominate too early. Start with cerulean when the palette wants more navy ink; switch to teal when the better fit is evergreen and resinous.
What color is cerulean?
The pigment history ties to cobalt-based blues. Today the name labels paints, inks, and fashion color trends. It appears in outdoor gear, bottled-water branding, and illustration palettes.
What is the hex code for cerulean?
| Format | Value |
|---|---|
| HEX | #007BA7 |
| RGB | rgb(0, 123, 167) |
| HSL | hsl(196°, 100%, 33%) |
| HSV / HSB | hsv(196°, 100%, 65%) |
| CMYK (approx.) | cmyk(100%, 26%, 0%, 35%) |
Convert Cerulean to other color formats
Open the color converter with Cerulean (#007BA7) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.
Convert Cerulean in the color converter →What does cerulean mean in design?
Cerulean is often associated with open skies, travel, and creative tools. Versus cornflower or steel blue, it tends to read as cleaner and more atmospheric than muted-industrial or softly violet.
How do I use cerulean in code?
| CSS (hex) | color: #007BA7; |
| CSS (rgb) | color: rgb(0, 123, 167); |
| CSS (hsl) | color: hsl(196, 100%, 33%); |
| RGB % | rgb(0%, 48%, 65%) |
| Tailwind | text-[#007BA7] |
| SwiftUI | Color(red: 0.000, green: 0.482, blue: 0.655) |
| UIKit | UIColor(red: 0.000, green: 0.482, blue: 0.655, alpha: 1.0) |
| Android | Color.rgb(0, 123, 167) |
| Compose | Color(0xFF007BA7) |
| Web Safe | #006699 |
Is cerulean accessible?
| Combination | Ratio | AA | AA lg | AAA | AAA lg | UI |
|---|---|---|---|---|---|---|
| AaWhite text on this color | 4.78:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| AaBlack text on this color | 4.39:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
| AaThis color as text on white | 4.78:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| AaThis color as text on black | 4.39:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
WCAG 2.1: AA normal ≥ 4.5:1, AA large text ≥ 3:1, AAA normal ≥ 7:1, AAA large ≥ 4.5:1, UI components ≥ 3:1.
How does cerulean look with color blindness?
Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.
What colors go with cerulean
White sharpens cerulean without cooling it off, which is useful when you need a clean interface or slide layout around the color.
With a cooler color like cerulean, gold adds richness and turns the system toward premium packaging, hospitality, or ceremonial branding.
With a vivid cerulean, cream is gentler than white, so the palette keeps warmth and avoids looking overlit.
What colors clash with cerulean
With cerulean, Neon Green pulls the palette toward LED signage and away from the navy ink quality that makes the source color usable.
Magenta remaps cerulean too aggressively, dragging it away from enterprise, finance, and tailored corporate systems and into a brighter, more performative palette.
Orange lands abruptly next to cerulean and can make the palette feel more promo-coded or team-coded than intended.
Pastel Pink can make cerulean feel softer and sweeter than intended, which weakens palettes that rely on gravity or structure.
How should I use cerulean in design?
- •Use cerulean for headlines, sidebar accents, and key data points where you need strong presence without going full dark-mode.
- •Cerulean leans cool, so warm accents like gold, coral, or rust add the most energy. For a calm, professional palette, stay with other cool tones and use value contrast instead.
- •Vivid colors like cerulean work best as punctuation in a layout: CTAs, key metrics, or a single hero element. Surrounding neutrals keep it from fatiguing the viewer.
What are good cerulean palettes?
Carbon elegance
Consulting deliverables, strategy documents, and data-driven layouts.
Design with cerulean in Moda
Create a presentation or document using cerulean as your accent color. Moda's AI applies your color palette automatically.
Create a design with cerulean →What are the shades and tints of cerulean?
Shades (darker)
Tints (lighter)
Tones (desaturated)
Hue variations
What are the color harmonies for cerulean?
Harmonies are calculated from the base swatch. When a harmony matches a named color page, it links there; otherwise it appears here as a computed reference swatch.
Similar colors
Ocean Blue
Ocean Blue lives in the same neighborhood as cerulean, but the finish shift is enough to make one feel better for app UI, charts, and digital-native branding and the other for enterprise, finance, and tailored corporate systems.
Cobalt
Cobalt keeps roughly the same visual weight as cerulean but changes the undertone story, which is often enough to move a palette from warmer and tactile to cooler and more technical, or the reverse.
Teal
Teal stays very close to cerulean in hue, but it lands darker, which makes it better for headlines, anchors, and darker sections than for lighter surfaces and more open applications.
Denim
Denim is almost the same hue as cerulean; the real difference is value, with denim feeling more open and surface-friendly.
Sapphire
Sapphire occupies a similar depth to cerulean, though it pushes the family toward a more cool reading and a different material feel.
Frequently asked questions
What is the hex code for cerulean?
The hex code for cerulean is #007BA7. In RGB, that's 0 red, 123 green, and 167 blue. The approximate CMYK equivalent is 100% cyan, 26% magenta, 0% yellow, and 35% key (black).
Is cerulean a warm or cool color?
Cerulean reads as cool. It settles naturally beside blues, greens, silver, and charcoal, and feels more animated when paired with warm accents like gold, coral, or rust.
Is cerulean better as an accent or a full-palette color?
Cerulean is usually best when it leads in short bursts rather than covering everything. It can headline a palette, but most layouts work better when the color handles accents, highlights, or one main hero role instead of every surface.
How should I use cerulean in a design?
Cerulean is vivid enough to work best in controlled doses such as CTAs, highlighted metrics, chart accents, or a single hero element. Surround it with quieter neutrals so it does not exhaust the layout.
Can I use cerulean for text or backgrounds?
Cerulean can work as text on white at 4.78:1 contrast, but it is usually safest in headings, labels, and accent moments rather than long body copy.
More blue colors
Keep exploring color resources
All color pages
Browse the full library of color references, pairings, and palettes.
Blue colors
Compare cerulean with other blue tones.
Green colors
Explore nearby color families to build stronger palettes and contrasts.
Neutral colors
Explore nearby color families to build stronger palettes and contrasts.
Purple colors
Explore nearby color families to build stronger palettes and contrasts.
Last updated April 6, 2026
Color values are computed from the listed hex code using standard conversion formulas. RGB, HSL, and HSV are exact screen-ready conversions. CMYK is an approximate on-screen reference, not a press-ready print specification. Pairings, palettes, and use-case guidance are heuristic recommendations derived from color relationships, contrast behavior, and common presentation, document, and UI patterns.