Charcoal Hex Code: #36454F — Copy + RGB, Shades & Dark Palettes
Quick reference for charcoal hex, RGB, HSL, and colour codes—plus ten shades from airy tints to near-black, four dark palette pairings, and dark-mode UI notes in one place.
Charcoal
Dark slate
Near black
Charcoal Hex Code: #36454F
Cool blue-gray for typography, dark UI chrome, and professional layouts — copy values for CSS or tokens.
Charcoal RGB Code
The charcoal rgb value is RGB(54, 69, 79)—red 54, green 69, blue 79. Use the copy button below for handoff to Figma, Android resources, or dark UI tokens.
Charcoal RGB — click to copy
RGB(54,69,79)rgb(54, 69, 79) · hsl(206, 19%, 26%)
Charcoal Color Code for Different Formats
Whether you need the charcoal rgb code, hex, HSL, or CMYK, every format for #36454F is listed below—each with its own copy button.
What is the Charcoal HTML Color Code?
The charcoal html color code is #36454F. It is a valid CSS and HTML color value for typography, navigation chrome, dark cards, and elevated surfaces in dark mode. Document hex and RGB together in your design system so web and mobile teams stay aligned.
Charcoal shades (lightest → darkest)
Ten stops from airy tints to near-black charcoal. Copy any hex for surfaces, borders, or dark-mode tokens.
| Swatch | Shade | Hex |
|---|---|---|
| Ghost white | #F8F9FA | |
| Light gray | #E2E8F0 | |
| Silver gray | #CBD5E1 | |
| Cool gray | #94A3B8 | |
| Slate | #64748B | |
| Charcoal | #36454F | |
| Dark slate | #2D3748 | |
| Gunmetal | #1F2937 | |
| Near black | #111827 | |
| Deep charcoal | #0A0E12 |
Charcoal Dark Palette Pairings
Four charcoal combinations with copy-ready hex codes—modern SaaS indigo, professional blue, soft luxury gold, and dark-mode mint accents.
Charcoal + White + Indigo (modern SaaS)
Charcoal navigation (#36454F) on ghost white content wells (#F8F9FA) with indigo CTAs (#818CF8). A clean dark-UI pattern for dashboards and B2B marketing sites.
Charcoal + Silver + Blue (professional)
Silver gray borders (#CBD5E1) and cool blue links (#3B82F6) on charcoal chrome (#36454F) signal finance and legal brands without pure black harshness.
Charcoal + Cream + Gold (soft luxury)
Cream reading panels (#FFFBEB) with charcoal type (#36454F) and muted gold rules (#C9A227)—editorial annual reports and heritage portfolios.
Charcoal + Mint + Slate (dark mode UI)
Gunmetal shells (#1F2937), charcoal cards (#36454F), mint success (#6EE7B7), and slate secondary text (#64748B)—matches common dark-mode token stacks.
#36454F is the charcoal hex code most UI and brand teams need first. If you searched for charcoal hex code, charcoal color code, or charcoal grey hex, you want a cool blue-gray darker than slate but softer than pure black—paste-ready for CSS, Figma, or dark-mode tokens. This page lists the canonical value, ten related shades, and four dark palette pairings for professional design.
Charcoal hex code (the usual answers)
There is no CSS named keyword charcoal—teams standardize on hex #36454F. At RGB(54, 69, 79) and HSL(206, 19%, 26%) it carries a subtle cool undertone that reads more refined than #333333 on screens. For OLED-friendly app shells, pair charcoal cards with a deeper base like #121212 from our dark mode color palette guide.
Charcoal: #36454F·Gunmetal: #1F2937·Near black: #111827
Charcoal colour code (UK) and RGB
British English searches for charcoal colour code use the same hex digits—only spelling changes. List hex, RGB, and HSL in accessibility docs so developers anywhere implement identical contrast ratios.
- #36454F → RGB rgb(54, 69, 79)
- #64748B → RGB rgb(100, 116, 139) for secondary text
Charcoal in dark mode UI
Dark mode is where charcoal earns its keep. Use #121212 or #1F2937 as the canvas, #36454F for elevated cards and sidebars, and light gray (#F5F5F5) for primary text. Discord-style apps layer similar values—compare our Discord dark mode colors guide for chat-specific tokens (#313338, #2B2D31).
One saturated accent per screen keeps hierarchy clear: indigo (#818CF8) for links, mint (#6EE7B7) for success, or brand coral on marketing modules only. Never paint entire dashboards charcoal without lighter content wells—eye strain climbs when every surface sits below 30% lightness.
Before shipping dark themes, run text, icons, and focus rings through the contrast checker. Charcoal-on-charcoal borders fail most often at 1px dividers, not at headline sizes.
Charcoal vs black vs slate
Pure black (#000000) maximizes OLED punch but crushes shadow depth—everything flattens. Charcoal (#36454F) leaves room for elevation steps. Slate (#64748B) is for captions and placeholders on white, not primary navigation.
When stakeholders say “use black text,” show charcoal on cream instead of #000 on #FFF—slightly softer, often better for long reading sessions. Extend charcoal ramps programmatically in the palette generator rather than hand-picking random grays.
Charcoal in branding and print
Law firms, consultancies, and premium editorial brands reach for charcoal because it signals seriousness without funeral-black harshness. Pair with cream stationery (#FFFBEB) and restrained gold (#C9A227) for annual reports; reserve near-black (#111827) for logomarks only at small sizes.
CMYK approximations for coated stock often land near C:32 M:13 Y:0 K:69, but dot gain shifts cool grays warm on uncoated paper. Request physical proofs when business cards must match dashboard chrome.
Also searched for
- What is the charcoal hex code?
- A widely used charcoal hex code is #36454F, approximately RGB(54, 69, 79) and HSL(206, 19%, 26%). It is cooler and lighter than pure black (#000000)—ideal for typography and dark UI chrome.
- What is the charcoal RGB code?
- For #36454F, the charcoal RGB code is RGB(54,69,79)—the same as rgb(54, 69, 79) in CSS. Near-black UI shells often use #111827 or #1F2937 instead for OLED-friendly depth.
- What colors pair with charcoal?
- White (#FFFFFF), ghost white (#F8F9FA), indigo (#818CF8), mint (#6EE7B7), cream (#FFFBEB), and gold (#C9A227) pair reliably with charcoal. Always verify contrast for text and interactive states.
- Is charcoal the same as black?
- No. Charcoal (#36454F) is a cool blue-gray at ~26% lightness. Pure black (#000000) has no hue. Charcoal reads softer on screens and prints more consistently on coated stock.
Related colors
- Dark Mode Color Palette — full dark UI token stacks with WCAG notes
- Discord Dark Mode Colors — chat-app gray ramps and accent hex codes
- Navy Blue Hex Code — cool structural blue beside charcoal typography
Where to go next
- Generate charcoal ramps and dark-mode accents
- Blend charcoal with brand colors in the Color Mixing Simulator
Build your palette
Use our free tools to create and test your color palette.