#F7EC88 + #E3DEC8 + #DBD5A9 + #C5C983 + #D4B26E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F7EC88

Fresh Green · Khaki · Sunflower

HEX

#F7EC88

RGB

rgb(247, 236, 136)

HSL

hsl(54, 87%, 75%)

HSB

hsb(54, 45%, 97%)

CMYK

cmyk(0%, 4%, 45%, 3%)

Oklch

oklch(93.1% 0.122 102.9)

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

#E3DEC8

Goose Yellow · LightGray · Lemon Cream

HEX

#E3DEC8

RGB

rgb(227, 222, 200)

HSL

hsl(49, 33%, 84%)

HSB

hsb(49, 12%, 89%)

CMYK

cmyk(0%, 2%, 12%, 11%)

Oklch

oklch(89.9% 0.030 96.4)

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

#DBD5A9

Fresh Green · Wheat · Lemon Cream

HEX

#DBD5A9

RGB

rgb(219, 213, 169)

HSL

hsl(53, 41%, 76%)

HSB

hsb(53, 23%, 86%)

CMYK

cmyk(0%, 3%, 23%, 14%)

Oklch

oklch(86.7% 0.058 101.1)

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

#C5C983

Fresh Green · Tan · Sunflower

HEX

#C5C983

RGB

rgb(197, 201, 131)

HSL

hsl(63, 39%, 65%)

HSB

hsb(63, 35%, 79%)

CMYK

cmyk(2%, 0%, 35%, 21%)

Oklch

oklch(81.6% 0.091 111.0)

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

#D4B26E

Ginger · BurlyWood · Sunflower

HEX

#D4B26E

RGB

rgb(212, 178, 110)

HSL

hsl(40, 54%, 63%)

HSB

hsb(40, 48%, 83%)

CMYK

cmyk(0%, 16%, 48%, 17%)

Oklch

oklch(77.9% 0.095 83.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7EC88

8893F7

Analogous

F7B488

F7EC88

CAF788

Triadic

F7EC88

88F7EC

EC88F7

Split-Comp.

F7EC88

88CAF7

B488F7

Tetradic

F7EC88

88F7B4

8893F7

F788CA

Contrast Matrix WCAG 2.1 Contrast

F7EC88	E3DEC8	DBD5A9	C5C983	D4B26E
—	1.1 Fail	1.2 Fail	1.4 Fail	1.7 Fail
1.1 Fail	—	1.1 Fail	1.3 Fail	1.5 Fail
1.2 Fail	1.1 Fail	—	1.2 Fail	1.4 Fail
1.4 Fail	1.3 Fail	1.2 Fail	—	1.2 Fail
1.7 Fail	1.5 Fail	1.4 Fail	1.2 Fail	—

White BG

1.2Fail

1.4Fail

1.5Fail

1.7Fail

2.0Fail

Black BG

17.3AAA

15.5AAA

14.1AAA

12.1AAA

10.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F2F2A0

E1E1CD

D8D8B4

C7C794

C5C57E

Deuteranopia

F3F4A6

E1E1CF

D9D9B6

C7C698

C7CA82

Tritanopia

F6B3B8

E3D2D2

DBBCBE

C5A1A4

D28B8E

Achromatopsia

E4E4E4

DDDDDD

D2D2D2

C0C0C0

B4B4B4

Shades & Tints Shades & Tints

#F7EC88

Dark

Light

#E3DEC8

Dark

Light

#DBD5A9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7ec88;
  --color-2: #e3dec8;
  --color-3: #dbd5a9;
  --color-4: #c5c983;
  --color-5: #d4b26e;
}

SCSS

$color-1: #f7ec88;
$color-2: #e3dec8;
$color-3: #dbd5a9;
$color-4: #c5c983;
$color-5: #d4b26e;

TAILWIND

colors: {
  'brand-1': '#f7ec88',
  'brand-2': '#e3dec8',
  'brand-3': '#dbd5a9',
  'brand-4': '#c5c983',
  'brand-5': '#d4b26e',
}

RGB Array

[247, 236, 136], [227, 222, 200], [219, 213, 169], [197, 201, 131], [212, 178, 110]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F7EC88, #E3DEC8, #DBD5A9, #C5C983, #D4B26E 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: #f7ec88; --color-2: #e3dec8; --color-3: #dbd5a9; --color-4: #c5c983; --color-5: #d4b26e. 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