#D4CAA5 + #E8DD95 + #F0AD7D + #F76D7D + #63A697 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D4CAA5

Goose Yellow · Tan · Sunflower

HEX

#D4CAA5

RGB

rgb(212, 202, 165)

HSL

hsl(47, 35%, 74%)

HSB

hsb(47, 22%, 83%)

CMYK

cmyk(0%, 5%, 22%, 17%)

Oklch

oklch(83.8% 0.051 94.7)

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

#E8DD95

Fresh Green · Khaki · Sunflower

HEX

#E8DD95

RGB

rgb(232, 221, 149)

HSL

hsl(52, 64%, 75%)

HSB

hsb(52, 36%, 91%)

CMYK

cmyk(0%, 5%, 36%, 9%)

Oklch

oklch(89.0% 0.092 100.6)

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

#F0AD7D

Apricot · LightSalmon · Warm Sun

HEX

#F0AD7D

RGB

rgb(240, 173, 125)

HSL

hsl(25, 79%, 72%)

HSB

hsb(25, 48%, 94%)

CMYK

cmyk(0%, 28%, 48%, 6%)

Oklch

oklch(80.0% 0.101 56.3)

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

#F76D7D

Peach Pink · LightCoral · Coral Red

HEX

#F76D7D

RGB

rgb(247, 109, 125)

HSL

hsl(353, 90%, 70%)

HSB

hsb(353, 56%, 97%)

CMYK

cmyk(0%, 56%, 49%, 3%)

Oklch

oklch(70.6% 0.169 15.4)

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

#63A697

Mineral Blue · CadetBlue · Lake Green

HEX

#63A697

RGB

rgb(99, 166, 151)

HSL

hsl(167, 27%, 52%)

HSB

hsb(167, 40%, 65%)

CMYK

cmyk(40%, 0%, 9%, 35%)

Oklch

oklch(67.6% 0.072 178.0)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D4CAA5

A5B0D4

Analogous

D4B3A5

D4CAA5

C7D4A5

Triadic

D4CAA5

A5D4CA

CAA5D4

Split-Comp.

D4CAA5

A5C7D4

B3A5D4

Tetradic

D4CAA5

A5D4B3

A5B0D4

D4A5C7

Contrast Matrix WCAG 2.1 Contrast

D4CAA5	E8DD95	F0AD7D	F76D7D	63A697
—	1.2 Fail	1.2 Fail	1.7 Fail	1.7 Fail
1.2 Fail	—	1.4 Fail	2.0 Fail	2.0 Fail
1.2 Fail	1.4 Fail	—	1.5 Fail	1.5 Fail
1.7 Fail	2.0 Fail	1.5 Fail	—	1.0 Fail
1.7 Fail	2.0 Fail	1.5 Fail	1.0 Fail	—

White BG

1.6Fail

1.4Fail

1.9Fail

2.8Fail

Black BG

12.8AAA

15.2AAA

11.0AAA

7.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D0D0AE

E3E3A6

D3D289

BBBA79

80819B

Deuteranopia

D0D1B0

E4E5AB

D7DC8B

C3CE78

7C779C

Tritanopia

D3B5B7

E7B4B7

ED9294

F07675

669D9E

Achromatopsia

C9C9C9

D8D8D8

BCBCBC

989898

909090

Shades & Tints Shades & Tints

#D4CAA5

Dark

Light

#E8DD95

Dark

Light

#F0AD7D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d4caa5;
  --color-2: #e8dd95;
  --color-3: #f0ad7d;
  --color-4: #f76d7d;
  --color-5: #63a697;
}

SCSS

$color-1: #d4caa5;
$color-2: #e8dd95;
$color-3: #f0ad7d;
$color-4: #f76d7d;
$color-5: #63a697;

TAILWIND

colors: {
  'brand-1': '#d4caa5',
  'brand-2': '#e8dd95',
  'brand-3': '#f0ad7d',
  'brand-4': '#f76d7d',
  'brand-5': '#63a697',
}

RGB Array

[212, 202, 165], [232, 221, 149], [240, 173, 125], [247, 109, 125], [99, 166, 151]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D4CAA5, #E8DD95, #F0AD7D, #F76D7D, #63A697 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: #d4caa5; --color-2: #e8dd95; --color-3: #f0ad7d; --color-4: #f76d7d; --color-5: #63a697. 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