#DDDD99 + #FAF4F6 + #F6EDD8 + #DEE1E4 + #928E93 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DDDD99

Fresh Green · Khaki · Sunflower

HEX

#DDDD99

RGB

rgb(221, 221, 153)

HSL

hsl(60, 50%, 73%)

HSB

hsb(60, 31%, 87%)

CMYK

cmyk(0%, 0%, 31%, 13%)

Oklch

oklch(88.2% 0.088 108.1)

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

#FAF4F6

Rouge · Snow · Cherry Blossom

HEX

#FAF4F6

RGB

rgb(250, 244, 246)

HSL

hsl(340, 37%, 97%)

HSB

hsb(340, 2%, 98%)

CMYK

cmyk(0%, 2%, 2%, 2%)

Oklch

oklch(97.2% 0.007 354.8)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#F6EDD8

Goose Yellow · Beige · Lemon Cream

HEX

#F6EDD8

RGB

rgb(246, 237, 216)

HSL

hsl(42, 63%, 91%)

HSB

hsb(42, 12%, 96%)

CMYK

cmyk(0%, 4%, 12%, 4%)

Oklch

oklch(94.8% 0.029 87.5)

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

#DEE1E4

Azure · Lavender · Sky Blue

HEX

#DEE1E4

RGB

rgb(222, 225, 228)

HSL

hsl(210, 10%, 88%)

HSB

hsb(210, 3%, 89%)

CMYK

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

Oklch

oklch(90.8% 0.005 247.9)

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

#928E93

Ash · LightSlateGray · Silver Sand

HEX

#928E93

RGB

rgb(146, 142, 147)

HSL

hsl(288, 2%, 57%)

HSB

hsb(288, 3%, 58%)

CMYK

cmyk(1%, 3%, 0%, 42%)

Oklch

oklch(65.2% 0.009 319.4)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DDDD99

9898DD

Analogous

DDBA98

DDDD99

BADD98

Triadic

DDDD99

98DDDD

DD98DD

Split-Comp.

DDDD99

98BADD

BA98DD

Tetradic

DDDD99

98DDBA

9898DD

DD98BA

Contrast Matrix WCAG 2.1 Contrast

DDDD99	FAF4F6	F6EDD8	DEE1E4	928E93
—	1.3 Fail	1.2 Fail	1.1 Fail	2.3 Fail
1.3 Fail	—	1.1 Fail	1.2 Fail	3.0 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	2.8 Fail
1.1 Fail	1.2 Fail	1.1 Fail	—	2.5 Fail
2.3 Fail	3.0 Fail	2.8 Fail	2.5 Fail	—

White BG

1.4Fail

1.1Fail

1.2Fail

1.3Fail

3.2AA Large

Black BG

14.9AAA

19.3AAA

18.0AAA

16.0AAA

6.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDDA9

F7F7F6

F2F2DD

DFDFE3

909092

Deuteranopia

DDDDAD

F8F8F5

F3F3DE

DFDFE3

919192

Tritanopia

DDB6B9

FAF5F5

F6E1E2

DEE3E3

929191

Achromatopsia

D5D5D5

F6F6F6

EDEDED

E0E0E0

909090

Shades & Tints Shades & Tints

#DDDD99

Dark

Light

#FAF4F6

Dark

Light

#F6EDD8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dddd99;
  --color-2: #faf4f6;
  --color-3: #f6edd8;
  --color-4: #dee1e4;
  --color-5: #928e93;
}

SCSS

$color-1: #dddd99;
$color-2: #faf4f6;
$color-3: #f6edd8;
$color-4: #dee1e4;
$color-5: #928e93;

TAILWIND

colors: {
  'brand-1': '#dddd99',
  'brand-2': '#faf4f6',
  'brand-3': '#f6edd8',
  'brand-4': '#dee1e4',
  'brand-5': '#928e93',
}

RGB Array

[221, 221, 153], [250, 244, 246], [246, 237, 216], [222, 225, 228], [146, 142, 147]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DDDD99, #FAF4F6, #F6EDD8, #DEE1E4, #928E93 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: #dddd99; --color-2: #faf4f6; --color-3: #f6edd8; --color-4: #dee1e4; --color-5: #928e93. 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