← Back to Editor

#222738 · #D17D54 · #BD8E60 · #AD9A72 · #A7A88D

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#222738

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#222738
RGB
rgb(34, 39, 56)
HSL
hsl(226, 24%, 18%)
HSB
hsb(226, 39%, 22%)
CMYK
cmyk(39%, 30%, 0%, 78%)
Oklch
oklch(27.6% 0.032 271.5)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#D17D54

Tangerine · Coral · Warm Sun

HEX
#D17D54
RGB
rgb(209, 125, 84)
HSL
hsl(20, 58%, 57%)
HSB
hsb(20, 60%, 82%)
CMYK
cmyk(0%, 40%, 60%, 18%)
Oklch
oklch(67.2% 0.119 46.1)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#BD8E60

Ginger · DarkSalmon · Warm Sun

HEX
#BD8E60
RGB
rgb(189, 142, 96)
HSL
hsl(30, 41%, 56%)
HSB
hsb(30, 49%, 74%)
CMYK
cmyk(0%, 25%, 49%, 26%)
Oklch
oklch(68.1% 0.084 65.0)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#AD9A72

Ginger · Tan · Sunflower

HEX
#AD9A72
RGB
rgb(173, 154, 114)
HSL
hsl(41, 26%, 56%)
HSB
hsb(41, 34%, 68%)
CMYK
cmyk(0%, 11%, 34%, 32%)
Oklch
oklch(69.3% 0.059 85.4)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#A7A88D

Fresh Green · DarkGray · Sunflower

HEX
#A7A88D
RGB
rgb(167, 168, 141)
HSL
hsl(62, 13%, 61%)
HSB
hsb(62, 16%, 66%)
CMYK
cmyk(1%, 0%, 16%, 34%)
Oklch
oklch(72.3% 0.038 109.0)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

222738
393423

Analogous

233339
222738
292339

Triadic

222738
392328
283923

Split-Comp.

222738
392923
333923

Tetradic

222738
392333
393423
233929

Contrast Matrix WCAG 2.1 Contrast

222738
D17D54
BD8E60
AD9A72
A7A88D
—
4.8
AA
5.1
AA
5.4
AA
6.1
AA
4.8
AA
—
1.1
Fail
1.1
Fail
1.3
Fail
5.1
AA
1.1
Fail
—
1.1
Fail
1.2
Fail
5.4
AA
1.1
Fail
1.1
Fail
—
1.1
Fail
6.1
AA
1.3
Fail
1.2
Fail
1.1
Fail
—
White BG
14.8AAA
3.1AA Large
2.9Fail
2.7Fail
2.4Fail
Black BG
1.4Fail
6.8AA
7.2AAA
7.6AAA
8.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

242434
ADAC5E
A9A86B
A5A57C
A7A794

Deuteranopia

242433
B2B860
ABAF6E
A6A77E
A7A795

Tritanopia

223130
CD6667
BB7476
AC8385
A7999A

Achromatopsia

272727
919191
979797
9B9B9B
A5A5A5

Shades & Tints Shades & Tints

#222738

Dark
Light

#D17D54

Dark
Light

#BD8E60

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #222738;
  --color-2: #d17d54;
  --color-3: #bd8e60;
  --color-4: #ad9a72;
  --color-5: #a7a88d;
}

SCSS

$color-1: #222738;
$color-2: #d17d54;
$color-3: #bd8e60;
$color-4: #ad9a72;
$color-5: #a7a88d;

TAILWIND

colors: {
  'brand-1': '#222738',
  'brand-2': '#d17d54',
  'brand-3': '#bd8e60',
  'brand-4': '#ad9a72',
  'brand-5': '#a7a88d',
}

RGB Array

[34, 39, 56], [209, 125, 84], [189, 142, 96], [173, 154, 114], [167, 168, 141]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #222738, #D17D54, #BD8E60, #AD9A72, #A7A88D is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #222738; --color-2: #d17d54; --color-3: #bd8e60; --color-4: #ad9a72; --color-5: #a7a88d. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This general-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color