← Back to Editor

#F8DC94 · #F2DBB8 · #E9DFC9 · #DDE2E0 · #C9E8FA

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F8DC94

Goose Yellow · Khaki · Lemon Cream

HEX
#F8DC94
RGB
rgb(248, 220, 148)
HSL
hsl(43, 88%, 78%)
HSB
hsb(43, 40%, 97%)
CMYK
cmyk(0%, 11%, 40%, 3%)
Oklch
oklch(90.2% 0.096 89.1)

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

#F2DBB8

Goose Yellow · Wheat · Peach Orange

HEX
#F2DBB8
RGB
rgb(242, 219, 184)
HSL
hsl(36, 69%, 84%)
HSB
hsb(36, 24%, 95%)
CMYK
cmyk(0%, 10%, 24%, 5%)
Oklch
oklch(90.1% 0.053 78.3)

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

#E9DFC9

Goose Yellow · Bisque · Lemon Cream

HEX
#E9DFC9
RGB
rgb(233, 223, 201)
HSL
hsl(41, 42%, 85%)
HSB
hsb(41, 14%, 91%)
CMYK
cmyk(0%, 4%, 14%, 9%)
Oklch
oklch(90.6% 0.031 86.5)

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

#DDE2E0

Jade · LightGray · Cloud White

HEX
#DDE2E0
RGB
rgb(221, 226, 224)
HSL
hsl(156, 8%, 88%)
HSB
hsb(156, 2%, 89%)
CMYK
cmyk(2%, 0%, 1%, 11%)
Oklch
oklch(90.8% 0.006 170.4)

Traditional「Jade」· Paint「Cloud White」· Creative Silver Lining

#C9E8FA

Sky Blue · Lavender · Sky Blue

HEX
#C9E8FA
RGB
rgb(201, 232, 250)
HSL
hsl(202, 83%, 88%)
HSB
hsb(202, 20%, 98%)
CMYK
cmyk(20%, 7%, 0%, 2%)
Oklch
oklch(91.4% 0.041 233.4)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8DC94
96B2F8

Analogous

F8AB96
F8DC94
E3F896

Triadic

F8DC94
96F8DC
DC96F8

Split-Comp.

F8DC94
96E3F8
AB96F8

Tetradic

F8DC94
96F8AB
96B2F8
F896E3

Contrast Matrix WCAG 2.1 Contrast

F8DC94
F2DBB8
E9DFC9
DDE2E0
C9E8FA
—
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
—
1.0
Fail
1.0
Fail
1.1
Fail
1.0
Fail
1.0
Fail
—
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
—
1.0
Fail
1.0
Fail
1.1
Fail
1.0
Fail
1.0
Fail
—
White BG
1.3Fail
1.3Fail
1.3Fail
1.3Fail
1.3Fail
Black BG
15.7AAA
15.6AAA
15.9AAA
16.0AAA
16.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECECA5
E8E8C0
E5E5CE
DFDFE0
D6D7F6

Deuteranopia

EEF0AA
E9EBC3
E5E6D0
DFDFE1
D5D2F5

Tritanopia

F7B3B6
F1C7C9
E9D3D3
DDE1E1
CBF2F1

Achromatopsia

DCDCDC
DEDEDE
DFDFDF
E0E0E0
E1E1E1

Shades & Tints Shades & Tints

#F8DC94

Dark
Light

#F2DBB8

Dark
Light

#E9DFC9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8dc94;
  --color-2: #f2dbb8;
  --color-3: #e9dfc9;
  --color-4: #dde2e0;
  --color-5: #c9e8fa;
}

SCSS

$color-1: #f8dc94;
$color-2: #f2dbb8;
$color-3: #e9dfc9;
$color-4: #dde2e0;
$color-5: #c9e8fa;

TAILWIND

colors: {
  'brand-1': '#f8dc94',
  'brand-2': '#f2dbb8',
  'brand-3': '#e9dfc9',
  'brand-4': '#dde2e0',
  'brand-5': '#c9e8fa',
}

RGB Array

[248, 220, 148], [242, 219, 184], [233, 223, 201], [221, 226, 224], [201, 232, 250]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F8DC94, #F2DBB8, #E9DFC9, #DDE2E0, #C9E8FA 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: #f8dc94; --color-2: #f2dbb8; --color-3: #e9dfc9; --color-4: #dde2e0; --color-5: #c9e8fa. 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