#F8DCBC + #D1D0AA + #5F9C93 + #DB5153 + #F8CDAE - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F8DCBC

Goose Yellow · Wheat · Peach Orange

HEX

#F8DCBC

RGB

rgb(248, 220, 188)

HSL

hsl(32, 81%, 85%)

HSB

hsb(32, 24%, 97%)

CMYK

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

Oklch

oklch(91.0% 0.052 70.8)

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

#D1D0AA

Fresh Green · Silver · Sunflower

HEX

#D1D0AA

RGB

rgb(209, 208, 170)

HSL

hsl(58, 30%, 74%)

HSB

hsb(58, 19%, 82%)

CMYK

cmyk(0%, 0%, 19%, 18%)

Oklch

oklch(84.9% 0.051 106.2)

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

#5F9C93

Mineral Blue · CadetBlue · Mint Ice

HEX

#5F9C93

RGB

rgb(95, 156, 147)

HSL

hsl(171, 24%, 49%)

HSB

hsb(171, 39%, 61%)

CMYK

cmyk(39%, 0%, 6%, 39%)

Oklch

oklch(64.9% 0.065 183.9)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#DB5153

Vermilion · Tomato · Passion Red

HEX

#DB5153

RGB

rgb(219, 81, 83)

HSL

hsl(359, 66%, 59%)

HSB

hsb(359, 63%, 86%)

CMYK

cmyk(0%, 63%, 62%, 14%)

Oklch

oklch(62.1% 0.173 22.8)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#F8CDAE

Apricot · Wheat · Peach Orange

HEX

#F8CDAE

RGB

rgb(248, 205, 174)

HSL

hsl(25, 84%, 83%)

HSB

hsb(25, 30%, 97%)

CMYK

cmyk(0%, 17%, 30%, 3%)

Oklch

oklch(87.8% 0.064 57.6)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8DCBC

BAD7F8

Analogous

F8BCBA

F8DCBC

F6F8BA

Triadic

F8DCBC

BAF8DB

DBBAF8

Split-Comp.

F8DCBC

BAF6F8

BCBAF8

Tetradic

F8DCBC

BAF8BC

BAD7F8

F8BAF6

Contrast Matrix WCAG 2.1 Contrast

F8DCBC	D1D0AA	5F9C93	DB5153	F8CDAE
—	1.2 Fail	2.4 Fail	3.0 AA Large	1.1 Fail
1.2 Fail	—	2.0 Fail	2.5 Fail	1.1 Fail
2.4 Fail	2.0 Fail	—	1.3 Fail	2.2 Fail
3.0 AA Large	2.5 Fail	1.3 Fail	—	2.7 Fail
1.1 Fail	1.1 Fail	2.2 Fail	2.7 Fail	—

White BG

1.3Fail

1.6Fail

3.2AA Large

4.0AA Large

1.5Fail

Black BG

16.0AAA

13.3AAA

6.7AA

5.3AA

14.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECECC4

D1D1B3

797A95

9F9E53

E5E5B6

Deuteranopia

EEF0C6

D1D1B5

767196

A7B252

E8EBB7

Tritanopia

F7CACB

D1BABC

629797

D45252

F6BBBD

Achromatopsia

E1E1E1

CCCCCC

898989

7A7A7A

D6D6D6

Shades & Tints Shades & Tints

#F8DCBC

Dark

Light

#D1D0AA

Dark

Light

#5F9C93

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8dcbc;
  --color-2: #d1d0aa;
  --color-3: #5f9c93;
  --color-4: #db5153;
  --color-5: #f8cdae;
}

SCSS

$color-1: #f8dcbc;
$color-2: #d1d0aa;
$color-3: #5f9c93;
$color-4: #db5153;
$color-5: #f8cdae;

TAILWIND

colors: {
  'brand-1': '#f8dcbc',
  'brand-2': '#d1d0aa',
  'brand-3': '#5f9c93',
  'brand-4': '#db5153',
  'brand-5': '#f8cdae',
}

RGB Array

[248, 220, 188], [209, 208, 170], [95, 156, 147], [219, 81, 83], [248, 205, 174]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F8DCBC, #D1D0AA, #5F9C93, #DB5153, #F8CDAE 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: #f8dcbc; --color-2: #d1d0aa; --color-3: #5f9c93; --color-4: #db5153; --color-5: #f8cdae. 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