What are the hex codes in the Cherry Punch & Ink palette?

The Cherry Punch & Ink color palette consists of Almond #E3E1E0, Silver #CEC2BD, Punch #DF5146, Ink #101A23.

How should I use the Cherry Punch & Ink palette on a website?

Use Almond #E3E1E0 as the background, Ink #101A23 for text, Punch #DF5146 for buttons and links, and Silver #CEC2BD for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Almond on Ink at 13.49:1.

Which colors in Cherry Punch & Ink have enough contrast for text?

The highest-contrast pair is #E3E1E0 on #101A23 with a ratio of 13.49:1, which passes WCAG AA for normal text.

#E3E1E0Almond

#CEC2BDSilver

#DF5146Punch

#101A23Ink

Cherry Punch & Ink color palette

Modern Minimal Gray Red Black

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Almond	`#E3E1E0`	`rgb(227, 225, 224)`	`hsl(20, 5%, 88%)`	`oklch(91.1% 0.003 49)`
Silver	`#CEC2BD`	`rgb(206, 194, 189)`	`hsl(18, 15%, 77%)`	`oklch(82.2% 0.015 44)`
Punch	`#DF5146`	`rgb(223, 81, 70)`	`hsl(4, 71%, 57%)`	`oklch(62.5% 0.179 28)`
Ink	`#101A23`	`rgb(16, 26, 35)`	`hsl(208, 37%, 10%)`	`oklch(21.3% 0.023 246)`

Why it works and how to use it

Cherry Punch & Ink is a complementary color palette tagged modern, minimal, gray. Near-complementary hues (about 156° 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 Punch to lead. Lightness runs from 10% to 88%. Well suited to websites, presentations and branding.

Background: Almond (#E3E1E0) is the lightest color, so it belongs on large surfaces.
Text: Ink (#101A23) on #E3E1E0 gives 13.49:1, passing WCAG AAA.
Primary: Punch (#DF5146) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Silver (#CEC2BD) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Cherry Punch & Ink

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

#E3E1E0

#CEC2BD

#DF5146

#101A23

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
`#E3E1E0` on `#101A23`	Aa	13.49:1	AAA
`#CEC2BD` on `#101A23`	Aa	10.11:1	AAA
`#DF5146` on `#101A23`	Aa	4.52:1	AA
`#E3E1E0` on `#DF5146`	Aa	2.98:1	Fail
`#CEC2BD` on `#DF5146`	Aa	2.24:1	Fail
`#E3E1E0` on `#CEC2BD`	Aa	1.33:1	Fail

Similar palettes 24 more in this mood