#F8CC8A + #DAEB7A + #E2FFAB + #D6CDCE + #A895A3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F8CC8A

Goose Yellow · Khaki · Peach Orange

HEX

#F8CC8A

RGB

rgb(248, 204, 138)

HSL

hsl(36, 89%, 76%)

HSB

hsb(36, 44%, 97%)

CMYK

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

Oklch

oklch(86.9% 0.097 77.1)

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

#DAEB7A

Fresh Green · Khaki · Sunflower

HEX

#DAEB7A

RGB

rgb(218, 235, 122)

HSL

hsl(69, 74%, 70%)

HSB

hsb(69, 48%, 92%)

CMYK

cmyk(7%, 0%, 48%, 8%)

Oklch

oklch(90.4% 0.139 116.3)

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

#E2FFAB

Willow Green · Wheat · Mint Green

HEX

#E2FFAB

RGB

rgb(226, 255, 171)

HSL

hsl(81, 100%, 84%)

HSB

hsb(81, 33%, 100%)

CMYK

cmyk(11%, 0%, 33%, 0%)

Oklch

oklch(96.0% 0.111 124.0)

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

#D6CDCE

Peach Pink · LightGray · Cherry Blossom

HEX

#D6CDCE

RGB

rgb(214, 205, 206)

HSL

hsl(353, 10%, 82%)

HSB

hsb(353, 4%, 84%)

CMYK

cmyk(0%, 4%, 4%, 16%)

Oklch

oklch(85.6% 0.010 9.6)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#A895A3

Mauve · DarkGray · Lilac Purple

HEX

#A895A3

RGB

rgb(168, 149, 163)

HSL

hsl(316, 10%, 62%)

HSB

hsb(316, 11%, 66%)

CMYK

cmyk(0%, 11%, 3%, 34%)

Oklch

oklch(69.1% 0.030 335.1)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8CC8A

8BB7F8

Analogous

F8968B

F8CC8A

EDF88B

Triadic

F8CC8A

8BF8CD

CD8BF8

Split-Comp.

F8CC8A

8BEDF8

968BF8

Tetradic

F8CC8A

8BF896

8BB7F8

F88BED

Contrast Matrix WCAG 2.1 Contrast

F8CC8A	DAEB7A	E2FFAB	D6CDCE	A895A3
—	1.2 Fail	1.4 Fail	1.0 Fail	1.9 Fail
1.2 Fail	—	1.2 Fail	1.2 Fail	2.2 Fail
1.4 Fail	1.2 Fail	—	1.4 Fail	2.6 Fail
1.0 Fail	1.2 Fail	1.4 Fail	—	1.8 Fail
1.9 Fail	2.2 Fail	2.6 Fail	1.8 Fail	—

White BG

1.5Fail

1.3Fail

1.1Fail

1.6Fail

2.8Fail

Black BG

14.0AAA

16.1AAA

19.1AAA

13.5AAA

7.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E5E59A

E1E295

EFEFBF

D2D2CE

A0A0A0

Deuteranopia

E8EB9E

E0DF9C

EDEBC4

D3D3CE

A1A29F

Tritanopia

F6A7A9

DBABB0

E3CFD3

D6CECE

A79D9C

Achromatopsia

D2D2D2

D9D9D9

EDEDED

D0D0D0

9C9C9C

Shades & Tints Shades & Tints

#F8CC8A

Dark

Light

#DAEB7A

Dark

Light

#E2FFAB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8cc8a;
  --color-2: #daeb7a;
  --color-3: #e2ffab;
  --color-4: #d6cdce;
  --color-5: #a895a3;
}

SCSS

$color-1: #f8cc8a;
$color-2: #daeb7a;
$color-3: #e2ffab;
$color-4: #d6cdce;
$color-5: #a895a3;

TAILWIND

colors: {
  'brand-1': '#f8cc8a',
  'brand-2': '#daeb7a',
  'brand-3': '#e2ffab',
  'brand-4': '#d6cdce',
  'brand-5': '#a895a3',
}

RGB Array

[248, 204, 138], [218, 235, 122], [226, 255, 171], [214, 205, 206], [168, 149, 163]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F8CC8A, #DAEB7A, #E2FFAB, #D6CDCE, #A895A3 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: #f8cc8a; --color-2: #daeb7a; --color-3: #e2ffab; --color-4: #d6cdce; --color-5: #a895a3. 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