#253233 Charcoal

Q: What color is #253233?

Charcoal is #253233, or #253233 in uppercase notation. In RGB it is rgb(37,50,51), in HSL about hsl(184 16% 17%), and in OKLCH oklch(0.306 0.018 202.1).

Q: What does Charcoal symbolize?

It usually stands for energy, warmth and confidence, with a ceremonial edge. Local culture can shift that reading, so check the context.

Q: Where is Charcoal used?

You will see it in Campaign landing pages, Editorial cover systems, Product packaging labels, Dashboard status accents, Retail wayfinding signs. It also appears across architecture, technology, automotive, publishing.

Q: Which colors go well with Charcoal?

Muted neutrals, deeper steps of the same hue and one metallic accent work well. editorial layouts that need one warm focal point; packaging that should feel appetizing without shouting; interfaces where an accent has to stay legible

Q: How does Charcoal affect mood?

It raises perceived energy and draws the eye quickly. Large fields feel intense, so accent use is safer.

Q: Which industries use Charcoal?

It is common in architecture, technology, automotive, publishing, particularly where brands want to feel neutral, precise, structured, quiet, professional.

Q: What is the history of Charcoal?

The pigment story is concrete: Grey is the color of interval and infrastructure, holding other hues apart without competing. Warm greys feel tactile; cool greys feel engineered.

Q: How should I use Charcoal in design?

Give it one focal element, keep body copy neutral and confirm contrast at 13.27 against white and 1.42 against black.

Q: Is Charcoal accessible?

Contrast is 13.27 against white (AAA) and 1.42 against black (FAIL). Use it for large text when the level reaches AA.

Color conversion

CMYK profile: Coated FOGRA39 · Formats follow CSS Color 4 naming and WCAG 2.2 contrast rules.

About this color

CharcoalGreydigital color

Quiet structure, clear precision

Charcoal is #253233, a Grey tone with a clear cultural lineage. Read on its own it belongs to the Grey family; read through its digital color roots, it carries a second layer of meaning.

Design tip

Test Charcoal (#253233) on a neutral surface first; a Grey accent then looks intentional rather than decorative.

Best use

Give Charcoal the single element that must be noticed first, and let the rest of the Grey palette support it.

neutralprecisestructuredquietprofessional

Psychology

How it is perceived

neutralprecisestructuredquietprofessional

Psychological effect

Charcoal raises the perceived energy of a Grey composition and pulls the eye toward action.

Emotional impact

It feels immediate and warm, so it can lift a restrained layout without making it loud.

Symbolism

What it stands for

stabilityneutrality and sophistication

Cultural significance

In digital color settings the shade carries local references, so verify its symbolism before a campaign.

Positive associations

Positive associations lean toward stability, neutrality and sophistication, which is why it appears in invitations and seasonal work.

Use with care

Too much surface area can read as indifference or gloom when left unrelieved, so keep it to accents and small fields.

Where it appears

Common design applications

Campaign landing pages: Give Charcoal the single element that must be noticed first, and let the rest of the Grey palette support it.
Editorial cover systems: Give Charcoal the single element that must be noticed first, and let the rest of the Grey palette support it.
Product packaging labels: Give Charcoal the single element that must be noticed first, and let the rest of the Grey palette support it.
Dashboard status accents: Give Charcoal the single element that must be noticed first, and let the rest of the Grey palette support it.
Retail wayfinding signs: Give Charcoal the single element that must be noticed first, and let the rest of the Grey palette support it.

Design guidance

How to make it work

Keep saturated fills below about twenty percent of the layout.
Use it for the primary call to action and nothing else.
Check the pairing at small sizes on a neutral background.

Avoid

Do not place it beside clashing neon greens or electric blues.
Never use it for long body text on white.
Avoid gradients that shift its hue into another family.

Brand fit

architecture, technology, automotive, publishing

Brands built on The Sage, The Ruler use it to signal character before they say a word.

Trend signal

Quiet structure, clear precision

Grey is the color of interval and infrastructure, holding other hues apart without competing. Warm greys feel tactile; cool greys feel engineered.

Pairing

Colors that complete it

#382C2Beditorial layouts that need one warm focal point #010809interfaces where an accent has to stay legible #342C35packaging that should feel appetizing without shouting

History

Pigments and provenance

Before synthetic dyes, Charcoal was matched with mineral and plant pigments, and the Grey family depended on sources such as ochre, madder and indigo. Screens now reproduce it more consistently than any single pigment ever could.

Variations

Shades darken and tints lighten while the hue angle stays fixed.

Pro tip: Shades darken and tints lighten while the hue angle stays fixed.

Shades

Darker steps built from the same hue.

0% #253233 10% #212D2E 20% #1E2829 30% #1A2324 40% #161E1F 50% #13191A 60% #0F1414 70% #0B0F0F 80% #070A0A 90% #040505 100% #000000

Tints

Lighter steps for surfaces and backgrounds.

0% #253233 10% #3B4747 20% #515B5C 30% #667070 40% #7C8485 50% #929999 60% #A8ADAD 70% #BEC2C2 80% #D3D6D6 90% #E9EBEB 100% #FFFFFF

Use cases

Shades → hover, shadows, depth
Tints → highlights, surfaces
Balance → consistent color systems

Design tip

Keep one dominant tone, one supporter and one accent.

Color combinations

Rotate the hue wheel while holding lightness steady.

How to use it

Three moves keep the color readable and deliberate.

Why it works

The perceptual reasoning behind the palette.

Complementary

Opposite the hue wheel; it sharpens the focal color by contrast.

#253233 #382C2B

Best use: Calls to action and single-feature highlights

Split-complementary

Two neighbors of the opposite hue; softer than a direct complement.

#253233 #372C30 #372D27

Best use: Balanced marketing layouts with two accents

Triadic

Three hues spaced evenly; lively but needs one dominant voice.

#253233 #342C35 #342F25

Best use: Event identities and playful editorial spreads

Analogous

Neighbors on the wheel; quiet, cohesive and easy to scan.

#26322E #253233 #273137

Best use: Backgrounds, charts and calm product pages

Monochromatic

One hue across lightness steps; disciplined and premium.

#1B2425 #253233 #626B6C

Best use: Design systems, packaging and typographic hierarchy

Tetradic

Two complementary pairs; rich, but requires strict proportion.

#253233 #2A2F38 #382C2B #342F25

Best use: Complex dashboards and multi-service brands

Export palette

CSS

:root {
  --color-1: #161E1F;
  --color-2: #1E2829;
  --color-3: #253233;
  --color-4: #515B5C;
  --color-5: #7C8485;
}

Tailwind

colors: {
  color1: '#161E1F',
  color2: '#1E2829',
  color3: '#253233',
  color4: '#515B5C',
  color5: '#7C8485',
}

JSON

["#161E1F","#1E2829","#253233","#515B5C","#7C8485"]

Principles

Balance

Keep one dominant tone, one supporter and one accent.

Contrast

Test body text against both white and black before shipping.

Harmony

Rotate the hue wheel while holding lightness steady.

Color contrast checker

Test body text against both white and black before shipping.

Text color

Background

13.27 :1

AAA

Quote

Give Charcoal the single element that must be noticed first, and let the rest of the Grey palette support it.

WCAG contrast

Preview

Aa / Bb

#253233 · Charcoal

WCAG contrast standards

WCAG 2.2 sets minimum contrast for text and interface parts. #253233 measures 13.27:1 against white (AAA) and 1.42:1 against black (FAIL). Use the table below to choose the right threshold for the text size.

Level	Normal text	Large text (18pt+ / 14pt bold)	Icons & UI parts
AAA	7 : 1	4.5 : 1	—
AA	4.5 : 1	3 : 1	3 : 1
Fails	< 4.5 : 1	< 3 : 1	< 3 : 1

Large text means 18pt regular or 14pt bold. UI parts need 3:1 against adjacent colors. AA is the common compliance baseline; AAA is enhanced.

Technical formats

Notation across color spaces

HEX

#253233

CSS Color 4

RGB

37,50,51

sRGB / D65

HSL

184,16,17

HSL

OKLCH

oklch(0.306 0.018 202.1)

perceptual

LAB

20,-5,-2

CIE Lab

LCH

20,6,205

CIE LCH

XYZ

3,3,4

CIE XYZ

LUV

20,-6,-2

CIE LUV

HWB

184,15,80

CSS HWB

CMYK

27,2,0,80

Practical formats

Ready-to-use values

CSS

color: #253233;

custom properties

Tailwind

bg-[#253233] text-[#FFF]

arbitrary value

Android

#FF253233

ARGB

Flutter

Color(0xFF253233)

dart:ui

Photoshop

R 37 G 50 B 51 · C 27 M 2 Y 0 K 80

RGB / CMYK

CMYK 27,2,0,80

FOGRA39

Color analysis

Measured color properties

Lightness

0.029

relative luminance · cool

Contrast

13.27 : 1

vs white · AAA · cool

Contrast

1.42 : 1

vs black · FAIL · cool

Hue

184°

saturation 16% · cool

LCH

20,6,205

lightness 17% · cool

Delta E

8.3

玄色 #3A3A40 · cool

Similar colors

Nearest colors from the full Irodori library, ranked by ΔE.

Charcoal #333333ΔE 5.9 Charcoal #363636ΔE 6.4 Хар #26262AΔE 7.6 Charcoal #252525ΔE 7.6 玄色 #3A3A40ΔE 8.3 Hitam #22201EΔE 10.1

Blindness simulator

How it reads with color vision deficiency

How it reads with color vision deficiency · ΔE 8.3