Charcoal vs Graphite vs Slate: เปรียบเทียบสีเทาเข้ม

Dark grays are among the most important — and most confused — colors in digital design. In UI design, they form the backbone of typography systems, dark mode interfaces, and premium brand palettes. The problem is that dark gray comes in many varieties, and choosing carelessly among them produces designs that feel subtly wrong: too cold, too brown, too blue, or too dull.

Three names dominate the dark gray conversation in design: charcoal, graphite, and slate. All three are dark. All three are gray. But they differ meaningfully in hue, saturation, and use case. Charcoal has a blue-teal tint. Graphite is the most neutrally gray of the three. Slate has a clear blue-gray character. Understanding these distinctions makes choosing the right dark gray a precise decision rather than a guess.

Charcoal Defined (#36454F) — Blue-Tinged Dark Gray

Charcoal (#36454F) is named after the material — the black, porous residue of wood or other organic material burned in low-oxygen conditions. Real charcoal ranges from pure black through very dark gray, often with a slight blue or cool cast. The color named after it falls in this territory: a very dark, cool-toned gray with a perceptible blue-teal component.

The defining feature of charcoal (#36454F) is its blue-shifted hue. At HSL 204°, charcoal sits firmly in the blue-cyan territory of the hue wheel — this is not a neutral gray, but a blue-gray. The saturation at 19% is low enough that the blue-tint is subtle rather than obvious, but it is distinctly present and perceptible, particularly when placed next to truly neutral grays.

The RGB breakdown confirms the blue dominance: the blue channel (79) is highest, followed by green (69), then red (54). The 25-point gap between red (54) and blue (79) is the structural source of charcoal's cool, slightly ocean-like quality. In CMYK, the zero yellow value and 32% cyan with only 13% magenta confirms the blue-teal bias.

The name "charcoal" has become one of the most popular dark gray descriptors in fashion, interior design, and product naming — often referring loosely to any very dark gray, but the canonical color consistently lands in the blue-tinted dark gray territory.

What Charcoal Communicates

Charcoal's blue undertone gives it a quality of depth and sophistication that pure neutral grays lack. It reads as: - Modern and sophisticated: The blue-tint prevents charcoal from feeling dull or flat. It has a quality of intelligence and refinement. - Not as heavy as black: Charcoal is dark enough to serve as black alternatives in many design contexts, but its blue component keeps it from feeling as absolute and closed as true black. - Calm and serious: The cool tone and dark value together create a quiet, serious color — appropriate for professional contexts without the corporate coldness of saturated blue. - Neutral-adjacent: Despite its blue tint, charcoal reads as gray in context rather than as blue. It functions as a neutral while adding visual interest.

Charcoal in Design

Charcoal is one of the most popular dark grays in contemporary UI design, interior design, and fashion for these reasons:

Typography: Charcoal is widely used as an alternative to black for body text on white or light backgrounds. The contrast is high enough for legibility, but the color is less harsh and heavy than pure black (#000000). Many editorial websites and design systems specify a near-charcoal dark gray for body copy.

Dark mode surfaces: In dark mode UI systems, charcoal frequently appears as the background color for primary surfaces — dark enough to read as dark, cool-tinted enough to feel intentional rather than budget.

Fashion: Charcoal is a menswear staple — charcoal suits are one of the most versatile and prestigious categories in professional dress. The color's relationship to charcoal material gives it an implicit quality of natural craft.

Interior design: Charcoal walls have become a major interior design trend in libraries, home offices, and accent walls — the deep blue-gray creates a sense of enclosure and intellectual seriousness.

Charcoal Variants

Graphite Defined (#383838) — Neutral Dark Gray

Graphite (#383838) is named after the mineral graphite — crystalline carbon in a layered structure, most familiar as the "lead" in pencils and as an industrial material. Pure graphite is a metallic gray with high reflectivity when polished. The color named after it is, appropriately, the most neutrally gray of the three dark grays under discussion.

Graphite (#383838) is a perfectly neutral dark gray — identical values across all three RGB channels (56, 56, 56), an HSL saturation of exactly 0%, and OKLCH chroma of 0. This mathematical neutrality is graphite's defining characteristic: no hue bias whatsoever. It is a pure gray, positioned on the achromatic axis between black and white with no deviation toward any color direction.

In CMYK, graphite is 78% black with zero CMY — pure key plate printing, no color ink. This confirms its identity as a color defined entirely by lightness without hue.

The OKLCH chroma value of 0 (with no meaningful hue) is the most precise confirmation: graphite as defined by #383838 has no perceptible color. It is darker than mid-gray (which would be approximately #808080) but lighter than near-black (approximately #1A1A1A).

Note: "graphite" is used as a color name across many different contexts and products with varying actual hex values. Apple's iPhone has sold "graphite" finishes that are closer to #4A4A4A or #3D3D3D, typically a neutral dark gray in the same family. The precise #383838 represents the canonical neutral graphite value.

What Graphite Communicates

Graphite's neutrality is its most valuable design property: - Technical and precise: The association with the graphite mineral — used in pencils, electrodes, and precision manufacturing — gives the color a quality of technical exactness and engineering credibility. - Premium but not flashy: Unlike the blue-tinted charcoal, which has a slightly stylized character, graphite reads as a pure, serious, no-frills dark gray. It suggests quality through the absence of ornamentation. - Maximum versatility: With no hue bias, graphite works alongside virtually any other color without creating hue conflicts. It is the most universally applicable of the three dark grays. - Technology and manufacturing associations: Apple's consistent use of "graphite" and "space gray" as product color names has cemented the color's association with precision consumer electronics.

Graphite in Design

Design systems and component libraries: Graphite-range neutrals are the backbone of most design system gray scales. The neutral position makes them work as text color, border color, and surface color with equal effectiveness.

UI component borders and dividers: The lack of hue bias makes graphite-range grays ideal for UI chrome — dividers, borders, dropdown outlines — where the color's job is to create structure without adding visual noise.

Photography and product contexts: Graphite backgrounds for product photography create a premium-neutral context that does not influence the product's perceived color. A charcoal background would add blue cast to product photographs; graphite does not.

Dark text on light backgrounds: The neutral mid-dark gray of graphite works as a sophisticated alternative to black for headlines and body text, creating contrast without the heavy weight of pure black.

Slate Defined (#708090) — Blue-Gray

Slate (#708090) is a CSS named color — one of the 148 standard CSS colors — named after slate rock, a fine-grained metamorphic rock in blue-gray to dark gray tones, widely used for roofing, flooring, and architectural surfaces. Slate is both lighter and more distinctly blue than charcoal or graphite, placing it in a different visual territory: it is a mid-to-dark blue-gray rather than a very dark gray.

Slate's defining characteristics are its medium lightness and its distinctly blue-gray character. At HSL 50% lightness, slate is genuinely medium — neither dark nor light, occupying the zone between dark grays and light grays. This distinguishes it immediately from charcoal and graphite, both of which are substantially darker.

The hue at 210° is in the pure blue territory — notably different from charcoal's 204° (which is blue-cyan) but still firmly in the blue family. The 13% saturation keeps the blue from being obvious, but it is more perceptible than charcoal's 19% at a much higher lightness level. Slate reads visibly as blue-gray rather than neutral gray.

In RGB, slate shows a clear blue channel dominance: red (112), green (128), blue (144) — the steady progression upward from red to blue channels creates the cool, blue-gray impression. The spread of 32 points between red and blue is larger in absolute terms than charcoal's spread, though charcoal is darker and therefore the color differences are less perceptible.

What Slate Communicates

Slate occupies a unique position in the dark gray family — it is not as dark as charcoal or graphite, and it has a stronger blue character than either: - Natural and architectural: The literal material reference — slate roofs, slate flooring, slate chalkboards — gives the color a quality of natural architectural material, sturdy and permanent. - Cool sophistication: The blue tint at medium lightness creates an impression that is cooler and more sophisticated than warm or neutral grays. - Legible and functional: At 50% lightness, slate is well-positioned for UI secondary text colors, placeholder text, and other low-emphasis text — dark enough to be readable, not so dark as to compete with primary content. - Versatile bridge color: Slate bridges the gap between blue and gray, making it useful as a connecting color in palettes that include both blue brand colors and gray neutral tones.

Slate in Design

Secondary and tertiary text colors: Slate's lightness and blue-gray character make it particularly effective for secondary text in UI — timestamps, captions, placeholder text, help text — where reduced visual emphasis is desired without complete color saturation loss.

UI borders and dividers in light-mode: Slate is a common choice for borders and structural dividers in light-mode UI because it is visible without being heavy, and its blue quality harmonizes with blue-dominant UI color systems.

Cool-toned brand palettes: For brands in finance, technology, healthcare, or any sector using blue as a primary brand color, slate provides a natural gray that harmonizes with blue without the neutrality of pure gray.

Photography backgrounds: Slate's medium lightness allows it to appear in photographs as a surface without the darkness of charcoal or graphite. Architectural photography, product shots for tech goods, and fashion editorial on concrete-like surfaces frequently land in the slate color range.

Slate Variants

Note: CSS's "slate blue" (#6A5ACD) is a significantly different color — it is violet-blue rather than gray-blue. The name is misleading; CSS "slate blue" is not a shade of gray at all.

Hex Code Comparison Table

Interpreting the Data

Lightness is the biggest visible difference: Slate at 50% lightness is dramatically lighter than charcoal (26%) and graphite (22%). Side by side, slate reads as a mid-gray while charcoal and graphite appear close to very dark.

Graphite is the only truly neutral gray: Graphite's 0% HSL saturation and zero OKLCH chroma confirm it is the only achromatic color of the three. Charcoal and slate both have perceptible — if subtle — blue casts.

Charcoal is blue-cyan, slate is blue: Both have blue bias, but the hue angle differs. Charcoal at 204° has a slight cyan component (between blue at 240° and cyan at 180°), while slate at 210° is closer to pure blue. This gives charcoal a slightly greenish-blue quality compared to slate's cleaner blue-gray.

Best Dark Grays for Web Design and UI

Choosing the right dark gray depends on the specific function it needs to serve in a design system.

For Primary Text Color (replacing black)

Charcoal is the most popular choice among designers for a near-black text color that avoids the heaviness of pure black. The blue-tinted dark at #36454F or nearby values like #2D3748 creates text that is readable and authoritative without the stark weight of #000000.

Graphite is the alternative for design systems that want to avoid hue bias in text — it ensures that text color does not interact chromatically with any page color or image. For product photography contexts or highly varied content, neutral graphite-range text avoids unexpected color interactions.

For Secondary and Tertiary Text

Slate (#708090) is particularly well-suited for secondary text — metadata, timestamps, captions, placeholder text — because its medium lightness (50%) creates a natural visual hierarchy step below darker primary text. It is the right distance from white to be visible, and the right distance from black to signal secondary status.

For UI Borders and Structural Elements

Graphite-range neutrals are most versatile for borders because their neutrality avoids hue conflicts. Slate works well for borders in blue-primary design systems, harmonizing with the brand color.

Charcoal at its dark value is less common for borders — it is typically too dark for light-mode border use, more appropriate as a background or text color.

For Dark Mode Backgrounds

Charcoal is the leading choice for dark mode primary backgrounds. Its blue tint gives dark mode designs a refined, intentional quality — many popular dark design systems use blue-tinted dark grays precisely because they read as carefully designed rather than simply "dark."

The Tailwind CSS slate scale (which includes #334155 at 700, #1E293B at 800, and #0F172A at 900) is a widely used dark mode background family that follows this principle: blue-tinted dark grays for dark mode surfaces.

Graphite-range neutrals work for dark mode backgrounds that intentionally avoid blue associations — particularly in contexts where a warmer brand identity needs a neutral dark rather than a blue dark.

Comparison: Dark Mode Background Options

For Print and Brand Identity

All three dark grays translate to print with reasonable fidelity. Graphite, with its neutral character, is the most predictable across different printing conditions because it requires only the black channel — variations in CMY ink balance will not affect a neutral gray. Charcoal and slate with their CMY components (particularly cyan) are slightly more sensitive to print process calibration.

Generating Shade Scales

For design systems, these dark grays serve best as the dark end of a shade scale rather than as standalone colors. Using the shade generator, you can generate a complete 50-950 scale based on any of these grays:

• A charcoal-based scale provides a blue-tinted gray system from near-white to near-black
• A graphite-based scale provides a perfectly neutral gray system
• A slate-based scale provides a medium-anchored blue-gray system

The key advantage of generating from these canonical base colors is color family coherence — all tints and shades will share the same underlying hue, producing a harmonious scale.

Converting Dark Grays Between Color Models

Use the color converter to generate precise values in any color model, and the shade generator to build a complete dark-to-light scale for any of these grays.

Key Takeaways

• Charcoal (#36454F) is a dark blue-gray at HSL 204°, 19% saturation, 26% lightness — a cool, sophisticated dark gray with a perceptible blue-teal component; popular for typography, dark mode surfaces, and fashion
• Graphite (#383838) is the only truly neutral dark gray of the three — HSL 0% saturation, 22% lightness, perfectly achromatic; the most versatile for design systems requiring no hue bias
• Slate (#708090) is a medium blue-gray at HSL 210°, 13% saturation, 50% lightness — lighter than the other two and more distinctly blue; well-suited for secondary text, borders, and blue-primary design systems
• The most visible difference: slate is medium lightness (50%) while charcoal and graphite are both dark (22-26%)
• Charcoal has the subtle blue-teal hue; graphite is achromatic; slate has the cleaner pure-blue bias
• For primary dark text: charcoal or graphite. For secondary text: slate. For dark mode backgrounds: charcoal-range dark blue-grays. For neutral design systems: graphite.
• Generate complete shade scales from any of these grays using the shade generator and convert between formats with the converter