Colors EncyclopediaUse this color
Create with Charcoal
Open a professional color tool with #36454F already applied. Each configuration stays canonical to the tool and can be adjusted or shared.
Generate palette & CSS variablesCreate 50–950 tokens and export CSS, SCSS, JSON, or Tailwind.Open configured tool →Open in Gradient StudioStart with Charcoal and its complementary color.Open configured tool →Mix this colorBlend it with a complementary color and copy color-mix() CSS.Open configured tool →Check contrastOpen the strongest black or white background pairing.Open configured tool →Accessible combinationsReview AA and AAA text options, alternatives, warnings, and UI guidance.Open configured tool →Create glass surfaceUse this color as the tint for a translucent UI panel.Open configured tool →
CSS Utilities
--color-charcoal: #36454F;
.bg-charcoal { background-color: #36454F; }
.text-charcoal { color: #36454F; }Color history, meaning and use · Editorially reviewed
About Charcoal Color
Charcoal is first a carbon-rich material produced by heating organic matter with limited air; the color name transfers the appearance of that dark, powdery material into a broad family of near-black grays. Real charcoal is not chromatically uniform: feedstock, surface, dust, binder, paper, and illumination can shift an observed mark from soft gray to dense black.
At #36454F, this digital charcoal leans slightly cool and blue, giving text and surfaces more character than neutral black. It can anchor dashboards, editorial layouts, and subdued dark themes, but it is not the CSS keyword gray and has no universal material equivalent. Use the explicit value and test contrast at final opacity instead of relying on the descriptive label.
This HEX is a screen color, not a chemical composition, artists’ charcoal grade, printing-ink recipe, paint standard, or measured sample of carbonized material.
WCAG Accessibility
Contrast checks for Charcoal against black and white text.
Black text2.12:1AA Fail
White text9.9:1AA Pass
Downloadable color reference infographic
Charcoal Color Reference Infographic
Save a high-resolution infographic of Charcoal, including its color values, coordinated palette, and black and white text contrast.
Color Harmonies
Variants
Pairings
Machine-readable data
Machine-Readable Color Data (JSON)
Perfect for CSS, design systems, automation, and AI ingestion.
Luminance0.0561
Black text2.12:1AA Fail
White text9.9:1AA Pass
hexCanonical HEX valuergbRed, green, blue channelshslHue, saturation, lightnesscmykApproximate print conversionwcagAA and AAA contrast optionsharmoniesMathematical harmony setsvariantsGenerated tone variantsnearestColorsKnowledge graph neighborsStructured sections
Color systems
{
"hex": "#36454F",
"rgb": [
54,
69,
79
],
"hsl": [
204,
19,
26
],
"cmyk": [
32,
13,
0,
69
],
"luminance": 0.0561,
"contrast": {
"black": 2.12,
"white": 9.9
}
}WCAG
{
"AA": [
"#FFFFFF",
"#F5F5F5"
],
"AAA": [
"#FFFFFF",
"#F5F5F5"
]
}Harmonies
{
"complementary": "#4F4036",
"analogous": [
"#364F4C",
"#36384F"
],
"triadic": [
"#4F3645",
"#454F36"
],
"tetradic": [
"#4C364F",
"#4F4036",
"#384F36"
],
"splitComplementary": [
"#4F3638",
"#4F4C36"
],
"monochromatic": [
"#5B7486",
"#36454F",
"#111518"
]
}Variants
{
"light": "#5B7486",
"dark": "#111518",
"saturated": "#27485D",
"desaturated": "#424242",
"pastel": "#7D8387",
"neon": "#0068AD"
}Pairings
{
"best": [
"#FFFFFF",
"#4F4036",
"#364F4C",
"#36384F"
],
"avoid": [
"#424242",
"#5B7486"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#FFFFFF"
],
"lowContrast": [
"#5B7486",
"#424242"
]
}Knowledge graph
{
"nearestColors": [
"dark-slate-gray",
"dark-slate-grey",
"spruce",
"slate-navy",
"pine-needle"
],
"generatedPalettes": [
"charcoal"
],
"generatedComparisons": [
"charcoal-vs-dark-slate-gray",
"charcoal-vs-dark-slate-grey",
"slate-navy-vs-charcoal"
],
"relatedFamilies": [
"/colors/by-family/gray",
"/colors/by-temperature/cool",
"/colors/by-tone/dark",
"/colors/by-tone/neutral"
],
"relatedTools": [
"/harmonies/charcoal",
"/wcag/charcoal",
"/css/colors/charcoal",
"/hex/36454f",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/gray",
"/colors/by-temperature/cool",
"/colors/by-tone/dark",
"/colors/by-tone/neutral"
],
"narrower": [
"/palettes/charcoal"
],
"related": [
"/colors/dark-slate-gray",
"/colors/dark-slate-grey",
"/colors/spruce",
"/colors/slate-navy",
"/colors/pine-needle",
"/compare/charcoal-vs-dark-slate-gray",
"/compare/charcoal-vs-dark-slate-grey",
"/compare/slate-navy-vs-charcoal",
"/harmonies/charcoal",
"/wcag/charcoal",
"/css/colors/charcoal",
"/hex/36454f",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
}
}Full JSON dataset
{
"slug": "charcoal",
"name": "Charcoal",
"hex": "#36454F",
"family": "gray",
"temperature": "cool",
"tone": [
"dark",
"neutral"
],
"uses": [
"text",
"UI surfaces",
"minimal branding"
],
"psychology": {
"associations": [
"seriousness",
"clarity",
"restraint"
],
"contexts": [
"interfaces",
"editorial layouts",
"premium packaging"
],
"avoidIn": [
"high-playfulness children brands"
]
},
"aliases": [
"charcoal gray"
],
"sourceType": "curated",
"confidence": "high",
"sourceUrl": "https://www.colorsencyclopedia.com/assets/colors.json",
"reviewStatus": "manual",
"editorialNotes": "Curated internal color record with computed technical properties.",
"origin": {
"type": "common",
"notes": "Curated common color reference."
},
"tags": [
"gray",
"cool",
"dark",
"neutral",
"text",
"ui-surfaces",
"minimal-branding",
"seriousness",
"clarity",
"restraint"
],
"popularity": 88,
"rgb": [
54,
69,
79
],
"hsl": [
204,
19,
26
],
"cmyk": [
32,
13,
0,
69
],
"luminance": 0.0561,
"contrast": {
"black": 2.12,
"white": 9.9
},
"harmonies": {
"complementary": "#4F4036",
"analogous": [
"#364F4C",
"#36384F"
],
"triadic": [
"#4F3645",
"#454F36"
],
"tetradic": [
"#4C364F",
"#4F4036",
"#384F36"
],
"splitComplementary": [
"#4F3638",
"#4F4C36"
],
"monochromatic": [
"#5B7486",
"#36454F",
"#111518"
]
},
"variants": {
"light": "#5B7486",
"dark": "#111518",
"saturated": "#27485D",
"desaturated": "#424242",
"pastel": "#7D8387",
"neon": "#0068AD"
},
"wcag": {
"AA": [
"#FFFFFF",
"#F5F5F5"
],
"AAA": [
"#FFFFFF",
"#F5F5F5"
]
},
"css": {
"variable": "--color-charcoal: #36454F;",
"utility": ".bg-charcoal { background-color: #36454F; }",
"textUtility": ".text-charcoal { color: #36454F; }"
},
"nearestColors": [
"dark-slate-gray",
"dark-slate-grey",
"spruce",
"slate-navy",
"pine-needle"
],
"generatedPalettes": [
"charcoal"
],
"generatedComparisons": [
"charcoal-vs-dark-slate-gray",
"charcoal-vs-dark-slate-grey",
"slate-navy-vs-charcoal"
],
"relatedFamilies": [
"/colors/by-family/gray",
"/colors/by-temperature/cool",
"/colors/by-tone/dark",
"/colors/by-tone/neutral"
],
"relatedTools": [
"/harmonies/charcoal",
"/wcag/charcoal",
"/css/colors/charcoal",
"/hex/36454f",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/gray",
"/colors/by-temperature/cool",
"/colors/by-tone/dark",
"/colors/by-tone/neutral"
],
"narrower": [
"/palettes/charcoal"
],
"related": [
"/colors/dark-slate-gray",
"/colors/dark-slate-grey",
"/colors/spruce",
"/colors/slate-navy",
"/colors/pine-needle",
"/compare/charcoal-vs-dark-slate-gray",
"/compare/charcoal-vs-dark-slate-grey",
"/compare/slate-navy-vs-charcoal",
"/harmonies/charcoal",
"/wcag/charcoal",
"/css/colors/charcoal",
"/hex/36454f",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
},
"pairings": {
"best": [
"#FFFFFF",
"#4F4036",
"#364F4C",
"#36384F"
],
"avoid": [
"#424242",
"#5B7486"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#FFFFFF"
],
"lowContrast": [
"#5B7486",
"#424242"
]
}
}