#F1D896 + #FDE4AB + #D5DCB3 + #A8C7B8 + #728B85 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F1D896

Goose Yellow · Khaki · Lemon Cream

HEX

#F1D896

RGB

rgb(241, 216, 150)

HSL

hsl(44, 76%, 77%)

HSB

hsb(44, 38%, 95%)

CMYK

cmyk(0%, 10%, 38%, 5%)

Oklch

oklch(88.8% 0.088 89.6)

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

#FDE4AB

Goose Yellow · Wheat · Lemon Cream

HEX

#FDE4AB

RGB

rgb(253, 228, 171)

HSL

hsl(42, 95%, 83%)

HSB

hsb(42, 32%, 99%)

CMYK

cmyk(0%, 10%, 32%, 1%)

Oklch

oklch(92.6% 0.078 87.0)

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

#D5DCB3

Willow Green · Wheat · Apple Green

HEX

#D5DCB3

RGB

rgb(213, 220, 179)

HSL

hsl(70, 37%, 78%)

HSB

hsb(70, 19%, 86%)

CMYK

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

Oklch

oklch(87.9% 0.055 115.4)

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

#A8C7B8

Jade · Silver · Apple Green

HEX

#A8C7B8

RGB

rgb(168, 199, 184)

HSL

hsl(151, 22%, 72%)

HSB

hsb(151, 16%, 78%)

CMYK

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

Oklch

oklch(80.2% 0.039 164.6)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#728B85

Mineral Blue · SlateGray · Mint Ice

HEX

#728B85

RGB

rgb(114, 139, 133)

HSL

hsl(166, 10%, 50%)

HSB

hsb(166, 18%, 55%)

CMYK

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

Oklch

oklch(61.5% 0.030 179.1)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1D896

98B0F1

Analogous

F1AD98

F1D896

DCF198

Triadic

F1D896

98F1D9

D998F1

Split-Comp.

F1D896

98DCF1

AD98F1

Tetradic

F1D896

98F1AD

98B0F1

F198DC

Contrast Matrix WCAG 2.1 Contrast

F1D896	FDE4AB	D5DCB3	A8C7B8	728B85
—	1.1 Fail	1.0 Fail	1.3 Fail	2.6 Fail
1.1 Fail	—	1.1 Fail	1.5 Fail	2.9 Fail
1.0 Fail	1.1 Fail	—	1.3 Fail	2.6 Fail
1.3 Fail	1.5 Fail	1.3 Fail	—	2.0 Fail
2.6 Fail	2.9 Fail	2.6 Fail	2.0 Fail	—

White BG

1.4Fail

1.2Fail

1.4Fail

1.8Fail

3.7AA Large

Black BG

15.0AAA

16.9AAA

14.7AAA

11.5AAA

5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E6E6A6

F2F2B9

D8D8BD

B5B6BC

7D7D86

Deuteranopia

E8EAAA

F4F6BC

D8D7BF

B4B1BC

7B7A87

Tritanopia

F0B3B5

FCC4C6

D5C5C6

AABEBF

738888

Achromatopsia

D8D8D8

E5E5E5

D5D5D5

BCBCBC

838383

Shades & Tints Shades & Tints

#F1D896

Dark

Light

#FDE4AB

Dark

Light

#D5DCB3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1d896;
  --color-2: #fde4ab;
  --color-3: #d5dcb3;
  --color-4: #a8c7b8;
  --color-5: #728b85;
}

SCSS

$color-1: #f1d896;
$color-2: #fde4ab;
$color-3: #d5dcb3;
$color-4: #a8c7b8;
$color-5: #728b85;

TAILWIND

colors: {
  'brand-1': '#f1d896',
  'brand-2': '#fde4ab',
  'brand-3': '#d5dcb3',
  'brand-4': '#a8c7b8',
  'brand-5': '#728b85',
}

RGB Array

[241, 216, 150], [253, 228, 171], [213, 220, 179], [168, 199, 184], [114, 139, 133]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F1D896, #FDE4AB, #D5DCB3, #A8C7B8, #728B85 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: #f1d896; --color-2: #fde4ab; --color-3: #d5dcb3; --color-4: #a8c7b8; --color-5: #728b85. 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