← Back to Editor

#DFDE9E · #D2C590 · #D2B095 · #C9977E · #AF5D83

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DFDE9E

Fresh Green · Khaki · Sunflower

HEX
#DFDE9E
RGB
rgb(223, 222, 158)
HSL
hsl(59, 50%, 75%)
HSB
hsb(59, 29%, 87%)
CMYK
cmyk(0%, 0%, 29%, 13%)
Oklch
oklch(88.6% 0.083 107.2)

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

#D2C590

Ginger · Tan · Sunflower

HEX
#D2C590
RGB
rgb(210, 197, 144)
HSL
hsl(48, 42%, 69%)
HSB
hsb(48, 31%, 82%)
CMYK
cmyk(0%, 6%, 31%, 18%)
Oklch
oklch(82.1% 0.071 96.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#D2B095

Apricot · Tan · Warm Sun

HEX
#D2B095
RGB
rgb(210, 176, 149)
HSL
hsl(27, 40%, 70%)
HSB
hsb(27, 29%, 82%)
CMYK
cmyk(0%, 16%, 29%, 18%)
Oklch
oklch(78.0% 0.054 60.3)

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

#C9977E

Apricot · DarkSalmon · Warm Sun

HEX
#C9977E
RGB
rgb(201, 151, 126)
HSL
hsl(20, 41%, 64%)
HSB
hsb(20, 37%, 79%)
CMYK
cmyk(0%, 25%, 37%, 21%)
Oklch
oklch(71.8% 0.070 47.7)

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

#AF5D83

Dark Violet · Gray · Rose Pink

HEX
#AF5D83
RGB
rgb(175, 93, 131)
HSL
hsl(332, 34%, 53%)
HSB
hsb(332, 47%, 69%)
CMYK
cmyk(0%, 47%, 25%, 31%)
Oklch
oklch(58.6% 0.115 352.1)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DFDE9E
9FA0DF

Analogous

DFBE9F
DFDE9E
C0DF9F

Triadic

DFDE9E
9FDFDE
DE9FDF

Split-Comp.

DFDE9E
9FC0DF
BE9FDF

Tetradic

DFDE9E
9FDFBE
9FA0DF
DF9FC0

Contrast Matrix WCAG 2.1 Contrast

DFDE9E
D2C590
D2B095
C9977E
AF5D83
—
1.2
Fail
1.5
Fail
1.8
Fail
3.2
AA Large
1.2
Fail
—
1.2
Fail
1.5
Fail
2.6
Fail
1.5
Fail
1.2
Fail
—
1.3
Fail
2.2
Fail
1.8
Fail
1.5
Fail
1.3
Fail
—
1.7
Fail
3.2
AA Large
2.6
Fail
2.2
Fail
1.7
Fail
—
White BG
1.4Fail
1.7Fail
2.0Fail
2.6Fail
4.5AA Large
Black BG
15.1AAA
12.1AAA
10.4AAA
8.2AAA
4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DFDFAD
CCCC9D
C3C39C
B3B384
8B8B7A

Deuteranopia

DFDFB1
CDCEA0
C5C89D
B6BA86
909678

Tritanopia

DFBABC
D1A7A9
D0A1A2
C7898A
AB7371

Achromatopsia

D7D7D7
C3C3C3
B7B7B7
A3A3A3
7A7A7A

Shades & Tints Shades & Tints

#DFDE9E

Dark
Light

#D2C590

Dark
Light

#D2B095

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dfde9e;
  --color-2: #d2c590;
  --color-3: #d2b095;
  --color-4: #c9977e;
  --color-5: #af5d83;
}

SCSS

$color-1: #dfde9e;
$color-2: #d2c590;
$color-3: #d2b095;
$color-4: #c9977e;
$color-5: #af5d83;

TAILWIND

colors: {
  'brand-1': '#dfde9e',
  'brand-2': '#d2c590',
  'brand-3': '#d2b095',
  'brand-4': '#c9977e',
  'brand-5': '#af5d83',
}

RGB Array

[223, 222, 158], [210, 197, 144], [210, 176, 149], [201, 151, 126], [175, 93, 131]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DFDE9E, #D2C590, #D2B095, #C9977E, #AF5D83 is ideal for: health products, baby brands, fresh-style blogs. 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: #dfde9e; --color-2: #d2c590; --color-3: #d2b095; --color-4: #c9977e; --color-5: #af5d83. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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