Catalina Blue color code: #062A78
A named deep blue that sits between navy and cobalt on the wheel.
Catalina Blue · rgb(6, 42, 120)
Every format for Catalina Blue
- HEX
- #062A78
- RGB
- rgb(6, 42, 120)
- HSL
- hsl(221, 90%, 25%)
- HSV
- 221°, 95%, 47%
- CMYK
- 95%, 65%, 0%, 53%
- Lightness
- 25% · dark
Hue sits at 221°, which makes Catalina Blue a true blue navy, with 90% saturation. In the Dark Navy family it reads as a dark option.
Text contrast on Catalina Blue
Contrast ratios are calculated using the WCAG 2.1 relative luminance formula. Normal body text needs 4.5:1 and large text needs 3:1 to pass AA.
White text on Catalina Blue
The quick brown fox jumps over the lazy dog.
13.04:1 — AAA for normal textBlack text on Catalina Blue
The quick brown fox jumps over the lazy dog.
1.61:1 — below AA, decorative use onlyCatalina Blue text on white
The quick brown fox jumps over the lazy dog.
13.04:1 — AAA for normal textAccessibility notes
- Pair Catalina Blue with white text for the strongest reading experience: that combination gives 13.04:1.
- Used as a text colour on white, it clears the 3:1 bar for large headings.
- Never rely on Catalina Blue alone to communicate state. Add an icon, label or underline so the meaning survives for colour-blind users and in greyscale printing.
- When placing text over a photograph tinted with Catalina Blue, add a solid overlay first. Contrast measured against a flat colour does not hold over varying imagery.
Using Catalina Blue in CSS and HTML
CSS example
:root {
--catalina-blue: #062A78;
}
.panel {
background-color: var(--catalina-blue);
color: #FFFFFF;
border: 1px solid #062A78;
}HTML example
<div style="background-color: #062A78; color: #FFFFFF; padding: 1rem;">
Catalina Blue #062A78
</div>Common uses
- Page and section backgrounds in dark interfaces, where it holds white text cleanly.
- Dark Navy palettes for brand systems that need a dependable cool anchor.
- Print work where a deep blue is preferred to black, using the CMYK build 95%, 65%, 0%, 53%.
- Data visualisation, as one step in a lightness-based navy scale.
Design recommendations
- Build lighter and darker variants by changing only the lightness in
hsl(221, 90%, 25%). Keeping hue fixed is what makes a scale look intentional. - Give Catalina Blue at least one warm counterweight. A cool palette with no warm accent tends to read as cold rather than calm.
- Saturation is high here, so use it in measured amounts. Large flat areas of a saturated navy can feel heavy on screen.
Complementary and matching colors
Each of these is derived from the hue, saturation and lightness of Catalina Blue. Click a swatch to copy it.
Similar navy shades
Continue exploring
FAQs about Catalina Blue
What is the Catalina Blue color code?
The Catalina Blue color code is #062A78 in HEX, rgb(6, 42, 120) in RGB and hsl(221, 90%, 25%) in HSL.
What is the RGB value of Catalina Blue?
Catalina Blue is rgb(6, 42, 120), meaning 6 units of red, 42 of green and 120 of blue on the 0 to 255 scale.
What is the CMYK value of Catalina Blue?
In CMYK, Catalina Blue converts to approximately 95%, 65%, 0%, 53%. Printed output will look slightly less saturated than the screen preview because CMYK covers a narrower gamut.
Does white text work on Catalina Blue?
White text on Catalina Blue gives a contrast ratio of 13.04:1, which is AAA for normal text.
Does black text work on Catalina Blue?
Black text on Catalina Blue gives a contrast ratio of 1.61:1, which is below AA, decorative use only.
Which colors go with Catalina Blue?
Its direct complement is #D0920B, and the warm accent #E0D324 works well for calls to action. For a quieter scheme, pair it with the analogous blues listed above.
Is Catalina Blue a light or dark navy?
At 25% lightness, Catalina Blue is classed as a dark navy in this collection.