← Back to Editor

#D7C29D · #D6B698 · #A86554 · #896F54 · #A3A48C

cool

A 5-color cool 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

#D7C29D

Goose Yellow · Tan · Warm Sun

HEX
#D7C29D
RGB
rgb(215, 194, 157)
HSL
hsl(38, 42%, 73%)
HSB
hsb(38, 27%, 84%)
CMYK
cmyk(0%, 10%, 27%, 16%)
Oklch
oklch(82.2% 0.055 81.7)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#D6B698

Apricot · Tan · Warm Sun

HEX
#D6B698
RGB
rgb(214, 182, 152)
HSL
hsl(29, 43%, 72%)
HSB
hsb(29, 29%, 84%)
CMYK
cmyk(0%, 15%, 29%, 16%)
Oklch
oklch(79.6% 0.055 65.1)

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

#A86554

Crimson · Sienna · Passion Red

HEX
#A86554
RGB
rgb(168, 101, 84)
HSL
hsl(12, 33%, 49%)
HSB
hsb(12, 50%, 66%)
CMYK
cmyk(0%, 40%, 50%, 34%)
Oklch
oklch(57.7% 0.091 35.0)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#896F54

Ochre · DimGray · Amber Brown

HEX
#896F54
RGB
rgb(137, 111, 84)
HSL
hsl(31, 24%, 43%)
HSB
hsb(31, 39%, 54%)
CMYK
cmyk(0%, 19%, 39%, 46%)
Oklch
oklch(56.0% 0.051 67.5)

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

#A3A48C

Autumn Sage · DarkGray · Sunflower

HEX
#A3A48C
RGB
rgb(163, 164, 140)
HSL
hsl(63, 12%, 60%)
HSB
hsb(63, 15%, 64%)
CMYK
cmyk(1%, 0%, 15%, 36%)
Oklch
oklch(71.1% 0.034 109.2)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D7C29D
9DB2D7

Analogous

D7A59D
D7C29D
CFD79D

Triadic

D7C29D
9DD7C2
C29DD7

Split-Comp.

D7C29D
9DCFD7
A59DD7

Tetradic

D7C29D
9DD7A5
9DB2D7
D79DCF

Contrast Matrix WCAG 2.1 Contrast

D7C29D
D6B698
A86554
896F54
A3A48C
—
1.1
Fail
2.6
Fail
2.7
Fail
1.5
Fail
1.1
Fail
—
2.4
Fail
2.5
Fail
1.3
Fail
2.6
Fail
2.4
Fail
—
1.0
Fail
1.8
Fail
2.7
Fail
2.5
Fail
1.0
Fail
—
1.8
Fail
1.5
Fail
1.3
Fail
1.8
Fail
1.8
Fail
—
White BG
1.7Fail
1.9Fail
4.5AA
4.7AA
2.5Fail
Black BG
12.1AAA
11.0AAA
4.7AA
4.5AA Large
8.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECEA6
C8C89F
8B8A58
7E7E5B
A3A392

Deuteranopia

CFD1A8
CACCA1
8F9459
7F815C
A3A393

Tritanopia

D6ADAF
D4A5A6
A55B5C
886061
A39697

Achromatopsia

C4C4C4
BCBCBC
777777
747474
A1A1A1

Shades & Tints Shades & Tints

#D7C29D

Dark
Light

#D6B698

Dark
Light

#A86554

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d7c29d;
  --color-2: #d6b698;
  --color-3: #a86554;
  --color-4: #896f54;
  --color-5: #a3a48c;
}

SCSS

$color-1: #d7c29d;
$color-2: #d6b698;
$color-3: #a86554;
$color-4: #896f54;
$color-5: #a3a48c;

TAILWIND

colors: {
  'brand-1': '#d7c29d',
  'brand-2': '#d6b698',
  'brand-3': '#a86554',
  'brand-4': '#896f54',
  'brand-5': '#a3a48c',
}

RGB Array

[215, 194, 157], [214, 182, 152], [168, 101, 84], [137, 111, 84], [163, 164, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #D7C29D, #D6B698, #A86554, #896F54, #A3A48C 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: #d7c29d; --color-2: #d6b698; --color-3: #a86554; --color-4: #896f54; --color-5: #a3a48c. 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 cool-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