#FF684C + #E5A279 + #D8C3A0 + #CFD9C1 + #D3E0C4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FF684C

Peach Pink · Tomato · Coral Red

HEX

#FF684C

RGB

rgb(255, 104, 76)

HSL

hsl(9, 100%, 65%)

HSB

hsb(9, 70%, 100%)

CMYK

cmyk(0%, 59%, 70%, 0%)

Oklch

oklch(70.3% 0.190 32.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#E5A279

Apricot · DarkSalmon · Warm Sun

HEX

#E5A279

RGB

rgb(229, 162, 121)

HSL

hsl(23, 68%, 69%)

HSB

hsb(23, 47%, 90%)

CMYK

cmyk(0%, 29%, 47%, 10%)

Oklch

oklch(76.7% 0.097 52.2)

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

#D8C3A0

Goose Yellow · Tan · Warm Sun

HEX

#D8C3A0

RGB

rgb(216, 195, 160)

HSL

hsl(37, 42%, 74%)

HSB

hsb(37, 26%, 85%)

CMYK

cmyk(0%, 10%, 26%, 15%)

Oklch

oklch(82.6% 0.053 80.5)

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

#CFD9C1

Willow Green · LightGray · Apple Green

HEX

#CFD9C1

RGB

rgb(207, 217, 193)

HSL

hsl(85, 24%, 80%)

HSB

hsb(85, 11%, 85%)

CMYK

cmyk(5%, 0%, 11%, 15%)

Oklch

oklch(87.1% 0.034 125.6)

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

#D3E0C4

Willow Green · LightGray · Mint Green

HEX

#D3E0C4

RGB

rgb(211, 224, 196)

HSL

hsl(88, 31%, 82%)

HSB

hsb(88, 12%, 88%)

CMYK

cmyk(6%, 0%, 12%, 12%)

Oklch

oklch(88.9% 0.040 127.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF684C

4DE4FF

Analogous

FF4D8B

FF684C

FFC14D

Triadic

FF684C

4DFF67

674DFF

Split-Comp.

FF684C

4DFFC1

4D8BFF

Tetradic

FF684C

8BFF4D

4DE4FF

C14DFF

Contrast Matrix WCAG 2.1 Contrast

FF684C	E5A279	D8C3A0	CFD9C1	D3E0C4
—	1.3 Fail	1.7 Fail	2.0 Fail	2.1 Fail
1.3 Fail	—	1.3 Fail	1.5 Fail	1.6 Fail
1.7 Fail	1.3 Fail	—	1.2 Fail	1.2 Fail
2.0 Fail	1.5 Fail	1.2 Fail	—	1.1 Fail
2.1 Fail	1.6 Fail	1.2 Fail	1.1 Fail	—

White BG

2.9Fail

2.1Fail

1.7Fail

1.5Fail

1.4Fail

Black BG

7.3AAA

9.8AAA

12.2AAA

14.3AAA

15.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BEBC53

C8C783

CFCFA8

D3D3C7

D9D9CB

Deuteranopia

C6D254

CCD185

D0D2AB

D3D2C8

D8D7CC

Tritanopia

F75859

E28B8C

D7AFB1

CFCBCC

D4D0D1

Achromatopsia

929292

B1B1B1

C5C5C5

D3D3D3

D9D9D9

Shades & Tints Shades & Tints

#FF684C

Dark

Light

#E5A279

Dark

Light

#D8C3A0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff684c;
  --color-2: #e5a279;
  --color-3: #d8c3a0;
  --color-4: #cfd9c1;
  --color-5: #d3e0c4;
}

SCSS

$color-1: #ff684c;
$color-2: #e5a279;
$color-3: #d8c3a0;
$color-4: #cfd9c1;
$color-5: #d3e0c4;

TAILWIND

colors: {
  'brand-1': '#ff684c',
  'brand-2': '#e5a279',
  'brand-3': '#d8c3a0',
  'brand-4': '#cfd9c1',
  'brand-5': '#d3e0c4',
}

RGB Array

[255, 104, 76], [229, 162, 121], [216, 195, 160], [207, 217, 193], [211, 224, 196]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF684C, #E5A279, #D8C3A0, #CFD9C1, #D3E0C4 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: #ff684c; --color-2: #e5a279; --color-3: #d8c3a0; --color-4: #cfd9c1; --color-5: #d3e0c4. 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