Peacock Navy color code: #084C61
A decorative navy-teal with noticeable green content.
Peacock Navy · rgb(8, 76, 97)
Every format for Peacock Navy
- HEX
- #084C61
- RGB
- rgb(8, 76, 97)
- HSL
- hsl(194, 85%, 21%)
- HSV
- 194°, 92%, 38%
- CMYK
- 92%, 22%, 0%, 62%
- Lightness
- 21% · dark
Hue sits at 194°, which makes Peacock Navy a teal-leaning navy, with 85% saturation. In the Teal Navy family it reads as a dark option.
Text contrast on Peacock Navy
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 Peacock Navy
The quick brown fox jumps over the lazy dog.
9.47:1 — AAA for normal textBlack text on Peacock Navy
The quick brown fox jumps over the lazy dog.
2.22:1 — below AA, decorative use onlyPeacock Navy text on white
The quick brown fox jumps over the lazy dog.
9.47:1 — AAA for normal textAccessibility notes
- Pair Peacock Navy with white text for the strongest reading experience: that combination gives 9.47:1.
- Used as a text colour on white, it clears the 3:1 bar for large headings.
- Never rely on Peacock Navy 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 Peacock Navy, add a solid overlay first. Contrast measured against a flat colour does not hold over varying imagery.
Using Peacock Navy in CSS and HTML
CSS example
:root {
--peacock-navy: #084C61;
}
.panel {
background-color: var(--peacock-navy);
color: #FFFFFF;
border: 1px solid #084C61;
}HTML example
<div style="background-color: #084C61; color: #FFFFFF; padding: 1rem;">
Peacock Navy #084C61
</div>Common uses
- Page and section backgrounds in dark interfaces, where it holds white text cleanly.
- Teal 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 92%, 22%, 0%, 62%.
- 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(194, 85%, 21%). Keeping hue fixed is what makes a scale look intentional. - Give Peacock Navy 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 Peacock Navy. Click a swatch to copy it.
Similar navy shades
Continue exploring
FAQs about Peacock Navy
What is the Peacock Navy color code?
The Peacock Navy color code is #084C61 in HEX, rgb(8, 76, 97) in RGB and hsl(194, 85%, 21%) in HSL.
What is the RGB value of Peacock Navy?
Peacock Navy is rgb(8, 76, 97), meaning 8 units of red, 76 of green and 97 of blue on the 0 to 255 scale.
What is the CMYK value of Peacock Navy?
In CMYK, Peacock Navy converts to approximately 92%, 22%, 0%, 62%. Printed output will look slightly less saturated than the screen preview because CMYK covers a narrower gamut.
Does white text work on Peacock Navy?
White text on Peacock Navy gives a contrast ratio of 9.47:1, which is AAA for normal text.
Does black text work on Peacock Navy?
Black text on Peacock Navy gives a contrast ratio of 2.22:1, which is below AA, decorative use only.
Which colors go with Peacock Navy?
Its direct complement is #B8360F, and the warm accent #D2751E works well for calls to action. For a quieter scheme, pair it with the analogous blues listed above.
Is Peacock Navy a light or dark navy?
At 21% lightness, Peacock Navy is classed as a dark navy in this collection.