← Back to Editor

#DFD9C4 · #A5A08C · #C45E3F · #C47F6A · #8FBDAB

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 Library

Color Details Color Details

#DFD9C4

Goose Yellow · LightGray · Lemon Cream

HEX
#DFD9C4
RGB
rgb(223, 217, 196)
HSL
hsl(47, 30%, 82%)
HSB
hsb(47, 12%, 87%)
CMYK
cmyk(0%, 3%, 12%, 13%)
Oklch
oklch(88.4% 0.029 93.8)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#A5A08C

Ginger · DarkGray · Sunflower

HEX
#A5A08C
RGB
rgb(165, 160, 140)
HSL
hsl(48, 12%, 60%)
HSB
hsb(48, 15%, 65%)
CMYK
cmyk(0%, 3%, 15%, 35%)
Oklch
oklch(70.4% 0.029 95.5)

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

#C45E3F

Crimson · Chocolate · Passion Red

HEX
#C45E3F
RGB
rgb(196, 94, 63)
HSL
hsl(14, 53%, 51%)
HSB
hsb(14, 68%, 77%)
CMYK
cmyk(0%, 52%, 68%, 23%)
Oklch
oklch(60.0% 0.138 37.6)

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

#C47F6A

Crimson · DarkSalmon · Passion Red

HEX
#C47F6A
RGB
rgb(196, 127, 106)
HSL
hsl(14, 43%, 59%)
HSB
hsb(14, 46%, 77%)
CMYK
cmyk(0%, 35%, 46%, 23%)
Oklch
oklch(66.3% 0.092 37.7)

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

#8FBDAB

Jade · DarkSeaGreen · Apple Green

HEX
#8FBDAB
RGB
rgb(143, 189, 171)
HSL
hsl(157, 26%, 65%)
HSB
hsb(157, 24%, 74%)
CMYK
cmyk(24%, 0%, 10%, 26%)
Oklch
oklch(76.0% 0.055 168.8)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DFD9C4
C3C9DF

Analogous

DFCBC3
DFD9C4
D7DFC3

Triadic

DFD9C4
C3DFD9
D9C3DF

Split-Comp.

DFD9C4
C3D7DF
CBC3DF

Tetradic

DFD9C4
C3DFCB
C3C9DF
DFC3D7

Contrast Matrix WCAG 2.1 Contrast

DFD9C4
A5A08C
C45E3F
C47F6A
8FBDAB
—
1.9
Fail
3.0
Fail
2.3
Fail
1.5
Fail
1.9
Fail
—
1.6
Fail
1.2
Fail
1.3
Fail
3.0
Fail
1.6
Fail
—
1.3
Fail
2.0
Fail
2.3
Fail
1.2
Fail
1.3
Fail
—
1.5
Fail
1.5
Fail
1.3
Fail
2.0
Fail
1.5
Fail
—
White BG
1.4Fail
2.6Fail
4.2AA Large
3.2AA Large
2.1Fail
Black BG
14.9AAA
8.0AAA
5.0AA
6.6AA
10.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDCC9
A3A391
989747
A6A66F
A3A3AF

Deuteranopia

DDDDCA
A3A492
9EA548
AAAF70
A09DB0

Tritanopia

DFCDCE
A59596
BF4C4E
C17374
91B3B4

Achromatopsia

D8D8D8
9F9F9F
797979
919191
ADADAD

Shades & Tints Shades & Tints

#DFD9C4

Dark
Light

#A5A08C

Dark
Light

#C45E3F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dfd9c4;
  --color-2: #a5a08c;
  --color-3: #c45e3f;
  --color-4: #c47f6a;
  --color-5: #8fbdab;
}

SCSS

$color-1: #dfd9c4;
$color-2: #a5a08c;
$color-3: #c45e3f;
$color-4: #c47f6a;
$color-5: #8fbdab;

TAILWIND

colors: {
  'brand-1': '#dfd9c4',
  'brand-2': '#a5a08c',
  'brand-3': '#c45e3f',
  'brand-4': '#c47f6a',
  'brand-5': '#8fbdab',
}

RGB Array

[223, 217, 196], [165, 160, 140], [196, 94, 63], [196, 127, 106], [143, 189, 171]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DFD9C4, #A5A08C, #C45E3F, #C47F6A, #8FBDAB 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: #dfd9c4; --color-2: #a5a08c; --color-3: #c45e3f; --color-4: #c47f6a; --color-5: #8fbdab. 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 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