← Back to Editor

#D3C8B4 · #B9C1AA · #A89B8F · #AF7457 · #AE5A16

warm

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D3C8B4

Goose Yellow · Silver · Peach Orange

HEX
#D3C8B4
RGB
rgb(211, 200, 180)
HSL
hsl(39, 26%, 77%)
HSB
hsb(39, 15%, 83%)
CMYK
cmyk(0%, 5%, 15%, 17%)
Oklch
oklch(83.6% 0.030 82.6)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#B9C1AA

Willow Green · Silver · Apple Green

HEX
#B9C1AA
RGB
rgb(185, 193, 170)
HSL
hsl(81, 16%, 71%)
HSB
hsb(81, 12%, 76%)
CMYK
cmyk(4%, 0%, 12%, 24%)
Oklch
oklch(79.8% 0.033 122.8)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#A89B8F

Apricot · DarkGray · Warm Sun

HEX
#A89B8F
RGB
rgb(168, 155, 143)
HSL
hsl(29, 13%, 61%)
HSB
hsb(29, 15%, 66%)
CMYK
cmyk(0%, 8%, 15%, 34%)
Oklch
oklch(69.7% 0.023 65.2)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#AF7457

Tangerine · Sienna · Warm Sun

HEX
#AF7457
RGB
rgb(175, 116, 87)
HSL
hsl(20, 35%, 51%)
HSB
hsb(20, 50%, 69%)
CMYK
cmyk(0%, 34%, 50%, 31%)
Oklch
oklch(61.4% 0.086 46.8)

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

#AE5A16

Tangerine · Sienna · Amber Brown

HEX
#AE5A16
RGB
rgb(174, 90, 22)
HSL
hsl(27, 78%, 38%)
HSB
hsb(27, 87%, 68%)
CMYK
cmyk(0%, 48%, 87%, 32%)
Oklch
oklch(55.8% 0.132 53.1)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D3C8B4
B5C0D4

Analogous

D4BAB5
D3C8B4
CFD4B5

Triadic

D3C8B4
B5D4C9
C9B5D4

Split-Comp.

D3C8B4
B5CFD4
BAB5D4

Tetradic

D3C8B4
B5D4BA
B5C0D4
D4B5CF

Contrast Matrix WCAG 2.1 Contrast

D3C8B4
B9C1AA
A89B8F
AF7457
AE5A16
—
1.1
Fail
1.6
Fail
2.3
Fail
3.0
Fail
1.1
Fail
—
1.5
Fail
2.1
Fail
2.6
Fail
1.6
Fail
1.5
Fail
—
1.4
Fail
1.8
Fail
2.3
Fail
2.1
Fail
1.4
Fail
—
1.3
Fail
3.0
Fail
2.6
Fail
1.8
Fail
1.3
Fail
—
White BG
1.7Fail
1.9Fail
2.7Fail
3.8AA Large
4.9AA
Black BG
12.7AAA
11.3AAA
7.8AAA
5.5AA
4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECEB9
BCBDB0
A2A292
95955E
8A8926

Deuteranopia

CFD0BA
BCBBB1
A3A493
999D60
8F952A

Tritanopia

D2BDBE
B9B4B5
A79495
AC6465
AA3336

Achromatopsia

C9C9C9
BCBCBC
9E9E9E
828282
6B6B6B

Shades & Tints Shades & Tints

#D3C8B4

Dark
Light

#B9C1AA

Dark
Light

#A89B8F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d3c8b4;
  --color-2: #b9c1aa;
  --color-3: #a89b8f;
  --color-4: #af7457;
  --color-5: #ae5a16;
}

SCSS

$color-1: #d3c8b4;
$color-2: #b9c1aa;
$color-3: #a89b8f;
$color-4: #af7457;
$color-5: #ae5a16;

TAILWIND

colors: {
  'brand-1': '#d3c8b4',
  'brand-2': '#b9c1aa',
  'brand-3': '#a89b8f',
  'brand-4': '#af7457',
  'brand-5': '#ae5a16',
}

RGB Array

[211, 200, 180], [185, 193, 170], [168, 155, 143], [175, 116, 87], [174, 90, 22]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #D3C8B4, #B9C1AA, #A89B8F, #AF7457, #AE5A16 is ideal for: corporate websites, product showcases, portfolios. 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: #d3c8b4; --color-2: #b9c1aa; --color-3: #a89b8f; --color-4: #af7457; --color-5: #ae5a16. 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. 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 warm-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