#F4DDBC + #F7B0AD + #F27777 + #876968 + #C0C1B0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F4DDBC

Goose Yellow · Wheat · Peach Orange

HEX

#F4DDBC

RGB

rgb(244, 221, 188)

HSL

hsl(35, 72%, 85%)

HSB

hsb(35, 23%, 96%)

CMYK

cmyk(0%, 9%, 23%, 4%)

Oklch

oklch(90.8% 0.050 76.9)

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

#F7B0AD

Peach Pink · LightPink · Cherry Blossom

HEX

#F7B0AD

RGB

rgb(247, 176, 173)

HSL

hsl(2, 82%, 82%)

HSB

hsb(2, 30%, 97%)

CMYK

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

Oklch

oklch(82.3% 0.084 21.8)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#F27777

Peach Pink · LightCoral · Coral Red

HEX

#F27777

RGB

rgb(242, 119, 119)

HSL

hsl(0, 83%, 71%)

HSB

hsb(0, 51%, 95%)

CMYK

cmyk(0%, 51%, 51%, 5%)

Oklch

oklch(71.2% 0.152 21.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#876968

Crimson · DimGray · Passion Red

HEX

#876968

RGB

rgb(135, 105, 104)

HSL

hsl(2, 13%, 47%)

HSB

hsb(2, 23%, 53%)

CMYK

cmyk(0%, 22%, 23%, 47%)

Oklch

oklch(55.0% 0.039 20.6)

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

#C0C1B0

Fresh Green · Silver · Sunflower

HEX

#C0C1B0

RGB

rgb(192, 193, 176)

HSL

hsl(64, 12%, 72%)

HSB

hsb(64, 9%, 76%)

CMYK

cmyk(1%, 0%, 9%, 24%)

Oklch

oklch(80.5% 0.023 109.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4DDBC

BDD4F4

Analogous

F4C2BD

F4DDBC

F0F4BD

Triadic

F4DDBC

BDF4DD

DDBDF4

Split-Comp.

F4DDBC

BDF0F4

C2BDF4

Tetradic

F4DDBC

BDF4C2

BDD4F4

F4BDF0

Contrast Matrix WCAG 2.1 Contrast

F4DDBC	F7B0AD	F27777	876968	C0C1B0
—	1.4 Fail	2.1 Fail	3.7 AA Large	1.4 Fail
1.4 Fail	—	1.5 Fail	2.8 Fail	1.0 Fail
2.1 Fail	1.5 Fail	—	1.8 Fail	1.5 Fail
3.7 AA Large	2.8 Fail	1.8 Fail	—	2.7 Fail
1.4 Fail	1.0 Fail	1.5 Fail	2.7 Fail	—

White BG

1.3Fail

1.8Fail

2.7Fail

4.9AA

1.8Fail

Black BG

15.9AAA

11.8AAA

7.7AAA

4.3AA Large

11.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EAEAC4

D8D8AE

BDBC77

7A7A68

C0C0B4

Deuteranopia

EBEDC6

DCE2AE

C4CD77

7C7E68

C0C0B5

Tritanopia

F3CACC

F3AEAE

EC7777

866868

C0B7B8

Achromatopsia

E0E0E0

C5C5C5

9C9C9C

727272

BFBFBF

Shades & Tints Shades & Tints

#F4DDBC

Dark

Light

#F7B0AD

Dark

Light

#F27777

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4ddbc;
  --color-2: #f7b0ad;
  --color-3: #f27777;
  --color-4: #876968;
  --color-5: #c0c1b0;
}

SCSS

$color-1: #f4ddbc;
$color-2: #f7b0ad;
$color-3: #f27777;
$color-4: #876968;
$color-5: #c0c1b0;

TAILWIND

colors: {
  'brand-1': '#f4ddbc',
  'brand-2': '#f7b0ad',
  'brand-3': '#f27777',
  'brand-4': '#876968',
  'brand-5': '#c0c1b0',
}

RGB Array

[244, 221, 188], [247, 176, 173], [242, 119, 119], [135, 105, 104], [192, 193, 176]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4DDBC, #F7B0AD, #F27777, #876968, #C0C1B0 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: #f4ddbc; --color-2: #f7b0ad; --color-3: #f27777; --color-4: #876968; --color-5: #c0c1b0. 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