#007BA7Cerulean hex code: #007BA7 · RGB 0, 123, 167. Also called cerulean blue.
Cerulean is a clear sky-to-sea blue; the name comes from the Latin caeruleus, meaning sky blue or dark blue. Color references list #007BA7 for cerulean and a bluer #2A52BE for the 'cerulean blue' artists' pigment. Pantone chose its Cerulean as the color of the year 2000.
Cerulean feels open, optimistic and clean. It works for travel, water and outdoor brands, education and SaaS. The #007BA7 value is dark enough to serve as a link or button color on white.
White text on #007BA7 passes AA for normal text. Pair cerulean with sand and coral for a seaside palette, or with white and a warm yellow for something bright and friendly.
Popular color names rarely have one official value. "Reference" values are the ones commonly listed in general color references; "HueWiz pick" values are lighter, deeper or muted versions chosen for interface work. Click a code to copy it.
#007BA7rgb(0, 123, 167) · reference#2A52BErgb(42, 82, 190) · reference#5DADE2rgb(93, 173, 226) · HueWiz pick#9BC4E2rgb(155, 196, 226) · HueWiz pickThe same base color in a light and a dark theme. Surfaces and text are tinted with cerulean's hue; links are adjusted until they reach 4.5:1 against the surface. The accent comes from the first palette below.
Spring collection
Designed around cerulean.
A short paragraph shows how body text reads on this surface, with an inline link in the brand color.
#EEF9FF · text #08222F · link #0078A3Spring collection
Designed around cerulean.
A short paragraph shows how body text reads on this surface, with an inline link in the brand color.
#05161F · text #E6F0F6 · link #1D87B4Hand-picked combinations that work with cerulean. Hover a swatch to see its code; click to copy.
WCAG 2.x asks for 4.5:1 for normal text (AA), 3:1 for large text and 7:1 for AAA. Ratios are truncated, not rounded, so a pass shown here is a real pass. Check your exact pairs in the contrast checker.
| Pairing | Ratio | Normal text | Large text |
|---|---|---|---|
| White text on cerulean | 4.78:1 | AA | AAA |
| Black text on cerulean | 4.39:1 | Fail | AA |
| Cerulean text on white | 4.78:1 | AA | AAA |
| Cerulean text on near-black #111111 | 3.94:1 | Fail | AA |
An 11-step 50–950 ramp generated in OKLCH from #007BA7. Light steps suit backgrounds and borders, middle steps buttons, dark steps text. This is a generated ramp, not an official Tailwind palette.
@import "tailwindcss";
@theme {
--color-cerulean-50: #EEF9FF;
--color-cerulean-100: #D9F1FF;
--color-cerulean-200: #B1E3FF;
--color-cerulean-300: #91CCEB;
--color-cerulean-400: #6BB0D4;
--color-cerulean-500: #4295BD;
--color-cerulean-600: #007AA6;
--color-cerulean-700: #006285;
--color-cerulean-800: #004A66;
--color-cerulean-900: #003449;
--color-cerulean-950: #001F2D;
--color-cerulean: #007BA7;
}:root {
--cerulean: #007BA7;
--cerulean-rgb: 0 123 167;
--cerulean-light: #D9F1FF;
--cerulean-dark: #004A66;
}
.btn-cerulean {
background: #007BA7;
color: #FFFFFF;
}Need semantic roles (surface, text, primary, accent) and exports? Open cerulean in the Tailwind color generator.
#007BA7 is the value HueWiz uses for cerulean; it equals rgb(0, 123, 167). Other common versions include #2A52BE (cerulean blue pigment), #5DADE2 (light cerulean), #9BC4E2 (pale cerulean).
With an HSL hue of 196° and 100% saturation, cerulean reads as a cool cyan.
Use white or very light text. White on #007BA7 measures 4.78:1 and black measures 4.39:1; WCAG AA needs 4.5:1 for normal text.
Try seaside (#007BA7, #F2E3C6, #FFFFFF); bright & friendly (#007BA7, #FFD166, #F8FBFD); sky gradient (#E9F4FB, #9BC4E2, #5DADE2). Each palette above can be copied or opened in the HueWiz studio.
Cerulean isn't a CSS keyword. These built-in CSS colors are the nearest by perceptual (OKLab) distance; lower ΔE means closer.