#F2DFCB + #D9C777 + #F7AB5E + #A6B590 + #9E9982 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F2DFCB

Goose Yellow · Bisque · Peach Orange

HEX

#F2DFCB

RGB

rgb(242, 223, 203)

HSL

hsl(31, 60%, 87%)

HSB

hsb(31, 16%, 95%)

CMYK

cmyk(0%, 8%, 16%, 5%)

Oklch

oklch(91.4% 0.034 68.8)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#D9C777

Ginger · BurlyWood · Sunflower

HEX

#D9C777

RGB

rgb(217, 199, 119)

HSL

hsl(49, 56%, 66%)

HSB

hsb(49, 45%, 85%)

CMYK

cmyk(0%, 8%, 45%, 15%)

Oklch

oklch(82.7% 0.103 97.0)

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

#F7AB5E

Ginger · SandyBrown · Warm Sun

HEX

#F7AB5E

RGB

rgb(247, 171, 94)

HSL

hsl(30, 91%, 67%)

HSB

hsb(30, 62%, 97%)

CMYK

cmyk(0%, 31%, 62%, 3%)

Oklch

oklch(80.0% 0.129 64.4)

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

#A6B590

Willow Green · DarkSeaGreen · Apple Green

HEX

#A6B590

RGB

rgb(166, 181, 144)

HSL

hsl(84, 20%, 64%)

HSB

hsb(84, 20%, 71%)

CMYK

cmyk(8%, 0%, 20%, 29%)

Oklch

oklch(75.2% 0.054 125.6)

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

#9E9982

Ginger · Gray · Sunflower

HEX

#9E9982

RGB

rgb(158, 153, 130)

HSL

hsl(49, 13%, 56%)

HSB

hsb(49, 18%, 62%)

CMYK

cmyk(0%, 3%, 18%, 38%)

Oklch

oklch(68.1% 0.033 97.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2DFCB

CADDF2

Analogous

F2CBCA

F2DFCB

F1F2CA

Triadic

F2DFCB

CAF2DF

DFCAF2

Split-Comp.

F2DFCB

CAF1F2

CBCAF2

Tetradic

F2DFCB

CAF2CB

CADDF2

F2CAF1

Contrast Matrix WCAG 2.1 Contrast

F2DFCB	D9C777	F7AB5E	A6B590	9E9982
—	1.3 Fail	1.5 Fail	1.7 Fail	2.2 Fail
1.3 Fail	—	1.1 Fail	1.3 Fail	1.7 Fail
1.5 Fail	1.1 Fail	—	1.1 Fail	1.5 Fail
1.7 Fail	1.3 Fail	1.1 Fail	—	1.3 Fail
2.2 Fail	1.7 Fail	1.5 Fail	1.3 Fail	—

White BG

1.3Fail

1.7Fail

1.9Fail

2.2Fail

2.9Fail

Black BG

16.2AAA

12.4AAA

10.9AAA

9.6AAA

7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EAEAD0

D1D18A

D6D571

ACAD99

9C9C88

Deuteranopia

EBECD1

D2D48F

DBE075

ACAB9B

9C9D89

Tritanopia

F1D4D5

D89A9D

F37F83

A7A0A2

9E8C8D

Achromatopsia

E2E2E2

C3C3C3

B9B9B9

ACACAC

989898

Shades & Tints Shades & Tints

#F2DFCB

Dark

Light

#D9C777

Dark

Light

#F7AB5E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2dfcb;
  --color-2: #d9c777;
  --color-3: #f7ab5e;
  --color-4: #a6b590;
  --color-5: #9e9982;
}

SCSS

$color-1: #f2dfcb;
$color-2: #d9c777;
$color-3: #f7ab5e;
$color-4: #a6b590;
$color-5: #9e9982;

TAILWIND

colors: {
  'brand-1': '#f2dfcb',
  'brand-2': '#d9c777',
  'brand-3': '#f7ab5e',
  'brand-4': '#a6b590',
  'brand-5': '#9e9982',
}

RGB Array

[242, 223, 203], [217, 199, 119], [247, 171, 94], [166, 181, 144], [158, 153, 130]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F2DFCB, #D9C777, #F7AB5E, #A6B590, #9E9982 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: #f2dfcb; --color-2: #d9c777; --color-3: #f7ab5e; --color-4: #a6b590; --color-5: #9e9982. 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