What are the hex codes in the Charcoal Ember palette?

The Charcoal Ember color palette consists of Ink #14213D, Orange #FCA311, Ice #E5E5E5, White #FFFFFF.

How should I use the Charcoal Ember palette on a website?

Use White #FFFFFF as the background, Ink #14213D for text, Orange #FCA311 for buttons and links, and Ice #E5E5E5 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Ink on White at 15.97:1.

Which colors in Charcoal Ember have enough contrast for text?

The highest-contrast pair is #14213D on #FFFFFF with a ratio of 15.97:1, which passes WCAG AA for normal text.

#14213DInk

#FCA311Orange

#E5E5E5Ice

#FFFFFFWhite

Charcoal Ember color palette

Modern Tech Minimal Orange White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Ink	`#14213D`	`rgb(20, 33, 61)`	`hsl(221, 51%, 16%)`	`oklch(25.2% 0.056 264)`
Orange	`#FCA311`	`rgb(252, 163, 17)`	`hsl(37, 98%, 53%)`	`oklch(78.6% 0.167 70)`
Ice	`#E5E5E5`	`rgb(229, 229, 229)`	`hsl(0, 0%, 90%)`	`oklch(92.2% 0.000 0)`
White	`#FFFFFF`	`rgb(255, 255, 255)`	`hsl(0, 0%, 100%)`	`oklch(100.0% 0.000 0)`

Why it works and how to use it

Charcoal Ember is a complementary color palette tagged modern, tech, minimal. Near-complementary hues (about 176° apart) make this a high-contrast, attention-grabbing combination. Saturation is moderate, which keeps it flexible for both interfaces and print. Warm and cool hues are mixed, which adds depth.

Two of the four colors are near-neutral, which leaves room for Orange to lead. Lightness runs from 16% to 100%. Well suited to a SaaS landing page or dashboard.

Background: White (#FFFFFF) is the lightest color, so it belongs on large surfaces.
Text: Ink (#14213D) on #FFFFFF gives 15.97:1, passing WCAG AAA.
Primary: Orange (#FCA311) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Ice (#E5E5E5) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Ink on White at 15.97:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Charcoal Ember

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#14213D

#FCA311

#E5E5E5

#FFFFFF

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#14213D` on `#FFFFFF`	Aa	15.97:1	AAA
`#14213D` on `#E5E5E5`	Aa	12.68:1	AAA
`#14213D` on `#FCA311`	Aa	7.9:1	AAA
`#FCA311` on `#FFFFFF`	Aa	2.02:1	Fail
`#FCA311` on `#E5E5E5`	Aa	1.61:1	Fail
`#E5E5E5` on `#FFFFFF`	Aa	1.26:1	Fail

Similar palettes 26 more in this mood