CSS Utilities
--color-ash-gray: #B2BEB5;
.bg-ash-gray { background-color: #B2BEB5; }
.text-ash-gray { color: #B2BEB5; }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": "#B2BEB5",
"rgb": [
178,
190,
181
],
"hsl": [
135,
8,
72
],
"cmyk": [
6,
0,
5,
25
],
"luminance": 0.4963,
"contrast": {
"black": 10.93,
"white": 1.92
}
}WCAG
{
"AA": [
"#000000",
"#1A1A1A",
"#36454F"
],
"AAA": [
"#000000",
"#1A1A1A"
]
}Harmonies
{
"complementary": "#BDB2BA",
"analogous": [
"#B5BDB2",
"#B2BDBA"
],
"triadic": [
"#B5B2BD",
"#BDB5B2"
],
"tetradic": [
"#B2B5BD",
"#BDB2BA",
"#BDBAB2"
],
"splitComplementary": [
"#BAB2BD",
"#BDB2B5"
],
"monochromatic": [
"#E3E8E4",
"#B2BEB5",
"#809385"
]
}Variants
{
"light": "#E3E8E4",
"dark": "#809385",
"saturated": "#A2CDAD",
"desaturated": "#B8B8B8",
"pastel": "#F7F7F7",
"neon": "#99FFB3"
}Pairings
{
"best": [
"#000000",
"#BDB2BA",
"#B5BDB2",
"#B2BDBA"
],
"avoid": [
"#B8B8B8",
"#E3E8E4"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#000000"
],
"lowContrast": [
"#E3E8E4",
"#B8B8B8"
]
}Knowledge graph
{
"nearestColors": [
"pumice",
"opal",
"galvanized-steel",
"silver",
"silver-metallic"
],
"generatedPalettes": [
"ash-gray"
],
"generatedComparisons": [
"ash-gray-vs-opal",
"ash-gray-vs-pumice",
"silver-vs-ash-gray"
],
"relatedFamilies": [
"/colors/by-family/green",
"/colors/by-temperature/cool",
"/colors/by-tone/muted"
],
"relatedTools": [
"/harmonies/ash-gray",
"/wcag/ash-gray",
"/css/colors/ash-gray",
"/hex/b2beb5"
],
"semanticRelations": {
"broader": [
"/colors/by-family/green",
"/colors/by-temperature/cool",
"/colors/by-tone/muted"
],
"narrower": [
"/palettes/ash-gray"
],
"related": [
"/colors/pumice",
"/colors/opal",
"/colors/galvanized-steel",
"/colors/silver",
"/colors/silver-metallic",
"/compare/ash-gray-vs-opal",
"/compare/ash-gray-vs-pumice",
"/compare/silver-vs-ash-gray",
"/harmonies/ash-gray",
"/wcag/ash-gray",
"/css/colors/ash-gray",
"/hex/b2beb5"
]
}
}Full JSON dataset
{
"slug": "ash-gray",
"name": "Ash Gray",
"hex": "#B2BEB5",
"uses": [
"backgrounds",
"typography",
"product surfaces"
],
"psychology": {
"associations": [
"restraint",
"clarity",
"balance"
],
"contexts": [
"interfaces",
"architecture",
"editorial design",
"packaging"
],
"avoidIn": [
"high-energy accent-only 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": "green",
"temperature": "cool",
"tone": [
"muted"
],
"editorialNotes": "Curated internal color record with computed technical properties.",
"tags": [
"green",
"cool",
"muted",
"backgrounds",
"typography",
"product-surfaces",
"restraint",
"clarity",
"balance"
],
"popularity": 84,
"rgb": [
178,
190,
181
],
"hsl": [
135,
8,
72
],
"cmyk": [
6,
0,
5,
25
],
"luminance": 0.4963,
"contrast": {
"black": 10.93,
"white": 1.92
},
"harmonies": {
"complementary": "#BDB2BA",
"analogous": [
"#B5BDB2",
"#B2BDBA"
],
"triadic": [
"#B5B2BD",
"#BDB5B2"
],
"tetradic": [
"#B2B5BD",
"#BDB2BA",
"#BDBAB2"
],
"splitComplementary": [
"#BAB2BD",
"#BDB2B5"
],
"monochromatic": [
"#E3E8E4",
"#B2BEB5",
"#809385"
]
},
"variants": {
"light": "#E3E8E4",
"dark": "#809385",
"saturated": "#A2CDAD",
"desaturated": "#B8B8B8",
"pastel": "#F7F7F7",
"neon": "#99FFB3"
},
"wcag": {
"AA": [
"#000000",
"#1A1A1A",
"#36454F"
],
"AAA": [
"#000000",
"#1A1A1A"
]
},
"css": {
"variable": "--color-ash-gray: #B2BEB5;",
"utility": ".bg-ash-gray { background-color: #B2BEB5; }",
"textUtility": ".text-ash-gray { color: #B2BEB5; }"
},
"nearestColors": [
"pumice",
"opal",
"galvanized-steel",
"silver",
"silver-metallic"
],
"generatedPalettes": [
"ash-gray"
],
"generatedComparisons": [
"ash-gray-vs-opal",
"ash-gray-vs-pumice",
"silver-vs-ash-gray"
],
"relatedFamilies": [
"/colors/by-family/green",
"/colors/by-temperature/cool",
"/colors/by-tone/muted"
],
"relatedTools": [
"/harmonies/ash-gray",
"/wcag/ash-gray",
"/css/colors/ash-gray",
"/hex/b2beb5"
],
"semanticRelations": {
"broader": [
"/colors/by-family/green",
"/colors/by-temperature/cool",
"/colors/by-tone/muted"
],
"narrower": [
"/palettes/ash-gray"
],
"related": [
"/colors/pumice",
"/colors/opal",
"/colors/galvanized-steel",
"/colors/silver",
"/colors/silver-metallic",
"/compare/ash-gray-vs-opal",
"/compare/ash-gray-vs-pumice",
"/compare/silver-vs-ash-gray",
"/harmonies/ash-gray",
"/wcag/ash-gray",
"/css/colors/ash-gray",
"/hex/b2beb5"
]
},
"pairings": {
"best": [
"#000000",
"#BDB2BA",
"#B5BDB2",
"#B2BDBA"
],
"avoid": [
"#B8B8B8",
"#E3E8E4"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#000000"
],
"lowContrast": [
"#E3E8E4",
"#B8B8B8"
]
}
}
Color meaning and use
About Ash Gray Color
Ash Gray sits in the green family with cool temperature and muted visual character. Ash Gray is a commonly used color name in design references, palettes, and editorial color systems.
Its common associations include restraint, clarity, and balance, which makes it relevant for interfaces and architecture. In design work, Ash Gray is most useful for backgrounds, typography, and product surfaces, especially when paired with black text for stronger contrast.
WCAG Accessibility
Contrast checks for Ash Gray against black and white text.