#FDDF4D + #D9E6C4 + #CCD8BF + #DBDBDB + #CBD1CD - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FDDF4D

Fresh Green · SandyBrown · Sunflower

HEX

#FDDF4D

RGB

rgb(253, 223, 77)

HSL

hsl(50, 98%, 65%)

HSB

hsb(50, 70%, 99%)

CMYK

cmyk(0%, 12%, 70%, 1%)

Oklch

oklch(90.4% 0.161 97.3)

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

#D9E6C4

Willow Green · LightGray · Mint Green

HEX

#D9E6C4

RGB

rgb(217, 230, 196)

HSL

hsl(83, 40%, 84%)

HSB

hsb(83, 15%, 90%)

CMYK

cmyk(6%, 0%, 15%, 10%)

Oklch

oklch(90.6% 0.047 124.4)

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

#CCD8BF

Willow Green · LightGray · Apple Green

HEX

#CCD8BF

RGB

rgb(204, 216, 191)

HSL

hsl(89, 24%, 80%)

HSB

hsb(89, 12%, 85%)

CMYK

cmyk(6%, 0%, 12%, 15%)

Oklch

oklch(86.6% 0.036 128.2)

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

#DBDBDB

Plain White · LightGray · Cloud White

HEX

#DBDBDB

RGB

rgb(219, 219, 219)

HSL

hsl(0, 0%, 86%)

HSB

hsb(0, 0%, 86%)

CMYK

cmyk(0%, 0%, 0%, 14%)

Oklch

oklch(89.1% 0.000 89.9)

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

#CBD1CD

Silver Gray · LightGray · Pearl Gray

HEX

#CBD1CD

RGB

rgb(203, 209, 205)

HSL

hsl(140, 6%, 81%)

HSB

hsb(140, 3%, 82%)

CMYK

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

Oklch

oklch(85.5% 0.009 157.1)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FDDF4D

4E6BFD

Analogous

FD894E

FDDF4D

C3FD4E

Triadic

FDDF4D

4EFDE0

E04EFD

Split-Comp.

FDDF4D

4EC3FD

894EFD

Tetradic

FDDF4D

4EFD89

4E6BFD

FD4EC3

Contrast Matrix WCAG 2.1 Contrast

FDDF4D	D9E6C4	CCD8BF	DBDBDB	CBD1CD
—	1.0 Fail	1.1 Fail	1.0 Fail	1.2 Fail
1.0 Fail	—	1.1 Fail	1.1 Fail	1.2 Fail
1.1 Fail	1.1 Fail	—	1.1 Fail	1.0 Fail
1.0 Fail	1.1 Fail	1.1 Fail	—	1.1 Fail
1.2 Fail	1.2 Fail	1.0 Fail	1.1 Fail	—

White BG

1.3Fail

1.5Fail

1.4Fail

1.6Fail

Black BG

15.8AAA

16.1AAA

14.1AAA

15.2AAA

13.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F0F070

DFDFCC

D1D1C5

DBDBDB

CECECE

Deuteranopia

F2F479

DEDDCE

D1D0C7

DBDBDB

CDCDCE

Tritanopia

FC8C92

DAD3D4

CDCACB

DBDBDB

CBCFCF

Achromatopsia

D7D7D7

DEDEDE

D2D2D2

DBDBDB

CFCFCF

Shades & Tints Shades & Tints

#FDDF4D

Dark

Light

#D9E6C4

Dark

Light

#CCD8BF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fddf4d;
  --color-2: #d9e6c4;
  --color-3: #ccd8bf;
  --color-4: #dbdbdb;
  --color-5: #cbd1cd;
}

SCSS

$color-1: #fddf4d;
$color-2: #d9e6c4;
$color-3: #ccd8bf;
$color-4: #dbdbdb;
$color-5: #cbd1cd;

TAILWIND

colors: {
  'brand-1': '#fddf4d',
  'brand-2': '#d9e6c4',
  'brand-3': '#ccd8bf',
  'brand-4': '#dbdbdb',
  'brand-5': '#cbd1cd',
}

RGB Array

[253, 223, 77], [217, 230, 196], [204, 216, 191], [219, 219, 219], [203, 209, 205]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FDDF4D, #D9E6C4, #CCD8BF, #DBDBDB, #CBD1CD 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: #fddf4d; --color-2: #d9e6c4; --color-3: #ccd8bf; --color-4: #dbdbdb; --color-5: #cbd1cd. 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