#DF6F7F + #F1C485 + #E1D98B + #E0E3A7 + #B5DFB4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DF6F7F

Peach Pink · LightCoral · Coral Red

HEX

#DF6F7F

RGB

rgb(223, 111, 127)

HSL

hsl(351, 64%, 65%)

HSB

hsb(351, 50%, 87%)

CMYK

cmyk(0%, 50%, 43%, 13%)

Oklch

oklch(67.6% 0.140 12.6)

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

#F1C485

Goose Yellow · BurlyWood · Warm Sun

HEX

#F1C485

RGB

rgb(241, 196, 133)

HSL

hsl(35, 79%, 73%)

HSB

hsb(35, 45%, 95%)

CMYK

cmyk(0%, 19%, 45%, 5%)

Oklch

oklch(84.6% 0.095 75.2)

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

#E1D98B

Fresh Green · Khaki · Sunflower

HEX

#E1D98B

RGB

rgb(225, 217, 139)

HSL

hsl(54, 59%, 71%)

HSB

hsb(54, 38%, 88%)

CMYK

cmyk(0%, 4%, 38%, 12%)

Oklch

oklch(87.4% 0.099 103.2)

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

#E0E3A7

Fresh Green · Wheat · Lemon Cream

HEX

#E0E3A7

RGB

rgb(224, 227, 167)

HSL

hsl(63, 52%, 77%)

HSB

hsb(63, 26%, 89%)

CMYK

cmyk(1%, 0%, 26%, 11%)

Oklch

oklch(89.9% 0.078 110.3)

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

#B5DFB4

Celadon · Silver · Apple Green

HEX

#B5DFB4

RGB

rgb(181, 223, 180)

HSL

hsl(119, 40%, 79%)

HSB

hsb(119, 19%, 87%)

CMYK

cmyk(19%, 0%, 19%, 13%)

Oklch

oklch(86.2% 0.073 144.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DF6F7F

6DDFCE

Analogous

DF6DB7

DF6F7F

DF956D

Triadic

DF6F7F

7EDF6D

6D7EDF

Split-Comp.

DF6F7F

6DDF95

6DB7DF

Tetradic

DF6F7F

B7DF6D

6DDFCE

956DDF

Contrast Matrix WCAG 2.1 Contrast

DF6F7F	F1C485	E1D98B	E0E3A7	B5DFB4
—	1.9 Fail	2.2 Fail	2.3 Fail	2.1 Fail
1.9 Fail	—	1.1 Fail	1.2 Fail	1.1 Fail
2.2 Fail	1.1 Fail	—	1.1 Fail	1.0 Fail
2.3 Fail	1.2 Fail	1.1 Fail	—	1.1 Fail
2.1 Fail	1.1 Fail	1.0 Fail	1.1 Fail	—

White BG

3.1AA Large

1.6Fail

1.4Fail

1.3Fail

1.5Fail

Black BG

6.7AA

13.0AAA

14.5AAA

15.7AAA

14.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFAD7B

DEDD94

DEDD9E

E1E1B6

C7C8BE

Deuteranopia

B5BD7A

E0E498

DEDFA2

E1E1B9

C5C2C1

Tritanopia

D97877

EFA0A3

E1ADB0

E0C1C4

B7C7C8

Achromatopsia

929292

CACACA

D3D3D3

DBDBDB

CECECE

Shades & Tints Shades & Tints

#DF6F7F

Dark

Light

#F1C485

Dark

Light

#E1D98B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #df6f7f;
  --color-2: #f1c485;
  --color-3: #e1d98b;
  --color-4: #e0e3a7;
  --color-5: #b5dfb4;
}

SCSS

$color-1: #df6f7f;
$color-2: #f1c485;
$color-3: #e1d98b;
$color-4: #e0e3a7;
$color-5: #b5dfb4;

TAILWIND

colors: {
  'brand-1': '#df6f7f',
  'brand-2': '#f1c485',
  'brand-3': '#e1d98b',
  'brand-4': '#e0e3a7',
  'brand-5': '#b5dfb4',
}

RGB Array

[223, 111, 127], [241, 196, 133], [225, 217, 139], [224, 227, 167], [181, 223, 180]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DF6F7F, #F1C485, #E1D98B, #E0E3A7, #B5DFB4 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: #df6f7f; --color-2: #f1c485; --color-3: #e1d98b; --color-4: #e0e3a7; --color-5: #b5dfb4. 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