← Back to Editor

#F9D879 · #D0E3AC · #D5EAC1 · #DBF4E1 · #C5EEE0

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

#F9D879

Goose Yellow · Khaki · Sunflower

HEX
#F9D879
RGB
rgb(249, 216, 121)
HSL
hsl(45, 91%, 73%)
HSB
hsb(45, 51%, 98%)
CMYK
cmyk(0%, 13%, 51%, 2%)
Oklch
oklch(89.1% 0.120 90.7)

TraditionalGoose Yellow」· PaintSunflower」· Creative Lemon Fizz

#D0E3AC

Willow Green · Wheat · Apple Green

HEX
#D0E3AC
RGB
rgb(208, 227, 172)
HSL
hsl(81, 50%, 78%)
HSB
hsb(81, 24%, 89%)
CMYK
cmyk(8%, 0%, 24%, 11%)
Oklch
oklch(88.8% 0.075 123.4)

TraditionalWillow Green」· PaintApple Green」· Creative Mint Breeze

#D5EAC1

Celadon · LightGray · Mint Green

HEX
#D5EAC1
RGB
rgb(213, 234, 193)
HSL
hsl(91, 49%, 84%)
HSB
hsb(91, 18%, 92%)
CMYK
cmyk(9%, 0%, 18%, 8%)
Oklch
oklch(91.1% 0.059 129.7)

TraditionalCeladon」· PaintMint Green」· Creative Mint Breeze

#DBF4E1

Emerald · Beige · Mint Green

HEX
#DBF4E1
RGB
rgb(219, 244, 225)
HSL
hsl(134, 53%, 91%)
HSB
hsb(134, 10%, 96%)
CMYK
cmyk(10%, 0%, 8%, 4%)
Oklch
oklch(94.4% 0.036 152.8)

TraditionalEmerald」· PaintMint Green」· Creative Mint Breeze

#C5EEE0

Jade · LightGray · Glacier Blue

HEX
#C5EEE0
RGB
rgb(197, 238, 224)
HSL
hsl(160, 55%, 85%)
HSB
hsb(160, 17%, 93%)
CMYK
cmyk(17%, 0%, 6%, 7%)
Oklch
oklch(91.6% 0.047 172.5)

TraditionalJade」· PaintGlacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F9D879
7B9BF9

Analogous

F99B7B
F9D879
D9F97B

Triadic

F9D879
7BF9D9
D97BF9

Split-Comp.

F9D879
7BD9F9
9B7BF9

Tetradic

F9D879
7BF99B
7B9BF9
F97BD9

Contrast Matrix WCAG 2.1 Contrast

F9D879
D0E3AC
D5EAC1
DBF4E1
C5EEE0
1.0
Fail
1.1
Fail
1.2
Fail
1.1
Fail
1.0
Fail
1.1
Fail
1.2
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.0
Fail
1.2
Fail
1.2
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.0
Fail
1.1
Fail
White BG
1.4Fail
1.4Fail
1.3Fail
1.2Fail
1.3Fail
Black BG
15.1AAA
15.3AAA
16.4AAA
18.0AAA
16.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBEA90
D8D8B9
DEDECB
E6E6E6
D7D7E3

Deuteranopia

EDEF96
D7D6BD
DDDBCD
E4E3E7
D4D1E4

Tritanopia

F7A2A6
D1C4C6
D6D3D4
DCE9EA
C7E6E7

Achromatopsia

D7D7D7
D7D7D7
DFDFDF
EAEAEA
E0E0E0

Shades & Tints Shades & Tints

#F9D879

Dark
Light

#D0E3AC

Dark
Light

#D5EAC1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f9d879;
  --color-2: #d0e3ac;
  --color-3: #d5eac1;
  --color-4: #dbf4e1;
  --color-5: #c5eee0;
}

SCSS

$color-1: #f9d879;
$color-2: #d0e3ac;
$color-3: #d5eac1;
$color-4: #dbf4e1;
$color-5: #c5eee0;

TAILWIND

colors: {
  'brand-1': '#f9d879',
  'brand-2': '#d0e3ac',
  'brand-3': '#d5eac1',
  'brand-4': '#dbf4e1',
  'brand-5': '#c5eee0',
}

RGB Array

[249, 216, 121], [208, 227, 172], [213, 234, 193], [219, 244, 225], [197, 238, 224]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F9D879, #D0E3AC, #D5EAC1, #DBF4E1, #C5EEE0 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: #f9d879; --color-2: #d0e3ac; --color-3: #d5eac1; --color-4: #dbf4e1; --color-5: #c5eee0. 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