CSS Utilities
--color-peacock-blue: #005F69;
.bg-peacock-blue { background-color: #005F69; }
.text-peacock-blue { color: #005F69; }Machine-readable data
Machine-Readable Color Data (JSON)
Perfect for CSS, design systems, automation, and AI ingestion.
hexCanonical HEX valuergbRed, green, blue channelshslHue, saturation, lightnesscmykApproximate print conversionwcagAA and AAA contrast optionsharmoniesMathematical harmony setsvariantsGenerated tone variantsnearestColorsKnowledge graph neighborsStructured sections
Color systems
{
"hex": "#005F69",
"rgb": [
0,
95,
105
],
"hsl": [
186,
100,
21
],
"cmyk": [
100,
10,
0,
59
],
"luminance": 0.092,
"contrast": {
"black": 2.84,
"white": 7.39
}
}WCAG
{
"AA": [
"#FFFFFF",
"#F5F5F5"
],
"AAA": [
"#FFFFFF"
]
}Harmonies
{
"complementary": "#6B0B00",
"analogous": [
"#006B40",
"#002B6B"
],
"triadic": [
"#6B0060",
"#606B00"
],
"tetradic": [
"#40006B",
"#6B0B00",
"#2B6B00"
],
"splitComplementary": [
"#6B002B",
"#6B4000"
],
"monochromatic": [
"#00B3C7",
"#005F69",
"#000E0F"
]
}Variants
{
"light": "#00B3C7",
"dark": "#000E0F",
"saturated": "#00606B",
"desaturated": "#0C575F",
"pastel": "#12C5D9",
"neon": "#008594"
}Pairings
{
"best": [
"#FFFFFF",
"#6B0B00",
"#006B40",
"#002B6B"
],
"avoid": [
"#0C575F",
"#00B3C7"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#FFFFFF"
],
"lowContrast": [
"#00B3C7",
"#0C575F"
]
}Knowledge graph
{
"nearestColors": [
"petrol-blue",
"peacock-green",
"pine-green",
"bottle-green",
"ink-blue"
],
"generatedPalettes": [
"peacock-blue"
],
"generatedComparisons": [
"peacock-blue-vs-peacock-green",
"peacock-blue-vs-petrol-blue"
],
"relatedFamilies": [
"/colors/by-family/cyan",
"/colors/by-temperature/cool",
"/colors/by-tone/dark"
],
"relatedTools": [
"/harmonies/peacock-blue",
"/wcag/peacock-blue",
"/css/colors/peacock-blue",
"/hex/005f69"
],
"semanticRelations": {
"broader": [
"/colors/by-family/cyan",
"/colors/by-temperature/cool",
"/colors/by-tone/dark"
],
"narrower": [
"/palettes/peacock-blue"
],
"related": [
"/colors/petrol-blue",
"/colors/peacock-green",
"/colors/pine-green",
"/colors/bottle-green",
"/colors/ink-blue",
"/compare/peacock-blue-vs-peacock-green",
"/compare/peacock-blue-vs-petrol-blue",
"/harmonies/peacock-blue",
"/wcag/peacock-blue",
"/css/colors/peacock-blue",
"/hex/005f69"
]
}
}Full JSON dataset
{
"slug": "peacock-blue",
"name": "Peacock Blue",
"hex": "#005F69",
"uses": [
"interfaces",
"brand systems",
"technical design"
],
"psychology": {
"associations": [
"trust",
"clarity",
"calm"
],
"contexts": [
"technology",
"finance",
"healthcare",
"navigation"
],
"avoidIn": [
"high-warmth food palettes"
]
},
"aliases": [],
"sourceType": "curated",
"confidence": "medium",
"reviewStatus": "manual",
"sourceUrl": "https://www.colorsencyclopedia.com/assets/colors.json",
"origin": {
"type": "common",
"notes": "Curated common color reference used in design and editorial color systems."
},
"family": "cyan",
"temperature": "cool",
"tone": [
"dark"
],
"editorialNotes": "Curated internal color record with computed technical properties.",
"tags": [
"cyan",
"cool",
"dark",
"interfaces",
"brand-systems",
"technical-design",
"trust",
"clarity",
"calm"
],
"popularity": 84,
"rgb": [
0,
95,
105
],
"hsl": [
186,
100,
21
],
"cmyk": [
100,
10,
0,
59
],
"luminance": 0.092,
"contrast": {
"black": 2.84,
"white": 7.39
},
"harmonies": {
"complementary": "#6B0B00",
"analogous": [
"#006B40",
"#002B6B"
],
"triadic": [
"#6B0060",
"#606B00"
],
"tetradic": [
"#40006B",
"#6B0B00",
"#2B6B00"
],
"splitComplementary": [
"#6B002B",
"#6B4000"
],
"monochromatic": [
"#00B3C7",
"#005F69",
"#000E0F"
]
},
"variants": {
"light": "#00B3C7",
"dark": "#000E0F",
"saturated": "#00606B",
"desaturated": "#0C575F",
"pastel": "#12C5D9",
"neon": "#008594"
},
"wcag": {
"AA": [
"#FFFFFF",
"#F5F5F5"
],
"AAA": [
"#FFFFFF"
]
},
"css": {
"variable": "--color-peacock-blue: #005F69;",
"utility": ".bg-peacock-blue { background-color: #005F69; }",
"textUtility": ".text-peacock-blue { color: #005F69; }"
},
"nearestColors": [
"petrol-blue",
"peacock-green",
"pine-green",
"bottle-green",
"ink-blue"
],
"generatedPalettes": [
"peacock-blue"
],
"generatedComparisons": [
"peacock-blue-vs-peacock-green",
"peacock-blue-vs-petrol-blue"
],
"relatedFamilies": [
"/colors/by-family/cyan",
"/colors/by-temperature/cool",
"/colors/by-tone/dark"
],
"relatedTools": [
"/harmonies/peacock-blue",
"/wcag/peacock-blue",
"/css/colors/peacock-blue",
"/hex/005f69"
],
"semanticRelations": {
"broader": [
"/colors/by-family/cyan",
"/colors/by-temperature/cool",
"/colors/by-tone/dark"
],
"narrower": [
"/palettes/peacock-blue"
],
"related": [
"/colors/petrol-blue",
"/colors/peacock-green",
"/colors/pine-green",
"/colors/bottle-green",
"/colors/ink-blue",
"/compare/peacock-blue-vs-peacock-green",
"/compare/peacock-blue-vs-petrol-blue",
"/harmonies/peacock-blue",
"/wcag/peacock-blue",
"/css/colors/peacock-blue",
"/hex/005f69"
]
},
"pairings": {
"best": [
"#FFFFFF",
"#6B0B00",
"#006B40",
"#002B6B"
],
"avoid": [
"#0C575F",
"#00B3C7"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#FFFFFF"
],
"lowContrast": [
"#00B3C7",
"#0C575F"
]
}
}
Color meaning and use
About Peacock Blue Color
Peacock Blue sits in the cyan family with cool temperature and dark visual character. Peacock Blue is a commonly used color name in design references, palettes, and editorial color systems.
Its common associations include trust, clarity, and calm, which makes it relevant for technology and finance. In design work, Peacock Blue is most useful for interfaces, brand systems, and technical design, especially when paired with white text for stronger contrast.
WCAG Accessibility
Contrast checks for Peacock Blue against black and white text.