Color guide · Light & dark neutrals
Charcoal Color
Our charcoal anchor is a dark blue-gray at #36454F. It is a useful alternative to pure black in light layouts and a dark material reference in illustration. It is a custom library anchor, not a CSS keyword.
Charcoal color codes
#36454Frgb(54, 69, 79)hsl(204, 18.8%, 26.1%)#36454FRGB values use the 0–255 scale. HSL values are rounded to one decimal place for display. CSS Color: named colors ↗
The name & the reference
What makes charcoal interesting?
Charcoal in everyday language can describe a material or a family of dark colors. This guide chooses a cool digital anchor; actual charcoal marks depend on paper, pressure and texture. For interfaces, the important decision is how clearly this dark foreground separates from the chosen surface.
Read the reference: CSS Color: named colors ↗
Things with charcoal tones
These illustrated references explore a color family. Objects vary; none is a claim of an exact #36454F match.
Drawing marks
A charcoal-inspired drawing uses rough marks and paper gaps rather than a uniform fill.
Dark upholstery
A blue-gray fabric reference can look distinct from both navy and warm black.
Dark ceramics
A lighter rim and reflected surface help the dark form remain legible.
Ideas for using charcoal
Interfaces
Try charcoal as body text on ivory or a pale color. Measure it on each actual panel.
Games
Use it for outlines, leaving pure black for a limited deepest-shadow role.
Posters
A charcoal base can support pale typography and one bright warm or pink accent.
Watch out: Charcoal on navy or indigo may merge. Dark-on-dark pairings need clear boundaries.
Tints, shades & companion hues
These tints and shades are simple sRGB channel mixes with white or black. They are useful starting points, not perceptually equal steps or guaranteed accessible pairs. Select a swatch to copy its hex code.
Hue companions
Calculated in HSL with the same saturation and lightness. Complementary and analogous colors suggest hue relationships; they do not promise contrast.
Palettes featuring charcoal
See the palette at work
Palette preview studio
Try a website, a game scene, a poster or a room. Pick a role, then select a swatch to repaint it. These are schematic design previews, not rendered materials or a game engine.
Text is automatically chosen as black or white for opaque preview surfaces. This does not certify your exported palette for every use.
Make something worth exploring.
A clear reading surface, one useful accent and room for the details.
Explore the collection →COLOR
IN MOTION
Make room for a new perspective.
Explore. Experiment. Create.Try it in context
Live design & contrast preview
Change the surface and text independently. The text result uses opaque sRGB colors; it does not evaluate your entire page.
9.90:1 · AAA normal text
AA normal text needs 4.5:1; AA large text needs 3:1. Large text means at least 18 pt, or 14 pt bold. Ratios are assessed before rounding. This is a text check, not a complete accessibility audit. W3C: understanding text contrast ↗
Your next good idea
Try a readable heading, a short paragraph and a clear action on this surface.
Example action →Static design sample · use the controls to change itCompare charcoal with another color →
Questions about charcoal
Is charcoal a standardized CSS named color?
No. Use #36454F for this selected library anchor.
Will this look the same in print?
No exact print match is promised. Paper, ink, color profiles and lighting affect the result. Use a physical proof when a precise material match matters.
Can I use these codes in a website or game?
Yes. Copy the exact code, give it a clear role in your palette and test text contrast. Add labels or shapes when color communicates important information.
Keep exploring
A color name is a starting point
Digital codes describe sRGB colors. Natural objects, paint, ink and screens can look different under different lighting or calibration. Visual references illustrate color families rather than exact measured matches. Placeholder illustrations are clearly labeled. Design ideas are suggestions, not universal claims about emotion or culture.
Pick colors from an image · Convert a color · Check a complete text pair · Suggest a color guide