← Back to Editor

#D1DFBB · #D4D2A3 · #D7B38A · #E39771 · #F7575F

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

#D1DFBB

Willow Green · LightGray · Apple Green

HEX
#D1DFBB
RGB
rgb(209, 223, 187)
HSL
hsl(83, 36%, 80%)
HSB
hsb(83, 16%, 87%)
CMYK
cmyk(6%, 0%, 16%, 13%)
Oklch
oklch(88.4% 0.050 124.7)

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

#D4D2A3

Fresh Green · Tan · Sunflower

HEX
#D4D2A3
RGB
rgb(212, 210, 163)
HSL
hsl(58, 36%, 74%)
HSB
hsb(58, 23%, 83%)
CMYK
cmyk(0%, 1%, 23%, 17%)
Oklch
oklch(85.4% 0.062 105.6)

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

#D7B38A

Ginger · Tan · Warm Sun

HEX
#D7B38A
RGB
rgb(215, 179, 138)
HSL
hsl(32, 49%, 69%)
HSB
hsb(32, 36%, 84%)
CMYK
cmyk(0%, 17%, 36%, 16%)
Oklch
oklch(78.9% 0.069 70.2)

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

#E39771

Apricot · DarkSalmon · Warm Sun

HEX
#E39771
RGB
rgb(227, 151, 113)
HSL
hsl(20, 67%, 67%)
HSB
hsb(20, 50%, 89%)
CMYK
cmyk(0%, 33%, 50%, 11%)
Oklch
oklch(74.4% 0.106 47.2)

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

#F7575F

Peach Pink · Tomato · Coral Red

HEX
#F7575F
RGB
rgb(247, 87, 95)
HSL
hsl(357, 91%, 65%)
HSB
hsb(357, 65%, 97%)
CMYK
cmyk(0%, 65%, 62%, 3%)
Oklch
oklch(67.3% 0.195 21.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1DFBB
C8BADE

Analogous

DEDABA
D1DFBB
BEDEBA

Triadic

D1DFBB
BAD0DE
DEBAD0

Split-Comp.

D1DFBB
BABEDE
DABADE

Tetradic

D1DFBB
BADEDA
C8BADE
DEBABE

Contrast Matrix WCAG 2.1 Contrast

D1DFBB
D4D2A3
D7B38A
E39771
F7575F
—
1.1
Fail
1.4
Fail
1.7
Fail
2.3
Fail
1.1
Fail
—
1.3
Fail
1.5
Fail
2.1
Fail
1.4
Fail
1.3
Fail
—
1.2
Fail
1.7
Fail
1.7
Fail
1.5
Fail
1.2
Fail
—
1.4
Fail
2.3
Fail
2.1
Fail
1.7
Fail
1.4
Fail
—
White BG
1.4Fail
1.6Fail
2.0Fail
2.4Fail
3.2AA Large
Black BG
15.0AAA
13.5AAA
10.7AAA
8.9AAA
6.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D7D7C4
D3D3AE
C7C794
C2C17A
B2B05D

Deuteranopia

D6D5C6
D3D3B1
CACC96
C7CC7C
BBC75D

Tritanopia

D2CBCC
D4B7B9
D59C9D
DF8183
EF5C5B

Achromatopsia

D7D7D7
CDCDCD
B9B9B9
A9A9A9
888888

Shades & Tints Shades & Tints

#D1DFBB

Dark
Light

#D4D2A3

Dark
Light

#D7B38A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1dfbb;
  --color-2: #d4d2a3;
  --color-3: #d7b38a;
  --color-4: #e39771;
  --color-5: #f7575f;
}

SCSS

$color-1: #d1dfbb;
$color-2: #d4d2a3;
$color-3: #d7b38a;
$color-4: #e39771;
$color-5: #f7575f;

TAILWIND

colors: {
  'brand-1': '#d1dfbb',
  'brand-2': '#d4d2a3',
  'brand-3': '#d7b38a',
  'brand-4': '#e39771',
  'brand-5': '#f7575f',
}

RGB Array

[209, 223, 187], [212, 210, 163], [215, 179, 138], [227, 151, 113], [247, 87, 95]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D1DFBB, #D4D2A3, #D7B38A, #E39771, #F7575F 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: #d1dfbb; --color-2: #d4d2a3; --color-3: #d7b38a; --color-4: #e39771; --color-5: #f7575f. 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