← Back to Editor

#D77073 · #F4EFF0 · #D8E8D3 · #BBCEB7 · #B3BCB7

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D77073

Peach Pink · LightCoral · Coral Red

HEX
#D77073
RGB
rgb(215, 112, 115)
HSL
hsl(358, 56%, 64%)
HSB
hsb(358, 48%, 84%)
CMYK
cmyk(0%, 48%, 47%, 16%)
Oklch
oklch(66.4% 0.129 19.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#F4EFF0

Peach Pink · Linen · Cherry Blossom

HEX
#F4EFF0
RGB
rgb(244, 239, 240)
HSL
hsl(348, 19%, 95%)
HSB
hsb(348, 2%, 96%)
CMYK
cmyk(0%, 2%, 2%, 4%)
Oklch
oklch(95.6% 0.006 3.3)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#D8E8D3

Celadon · LightGray · Mint Green

HEX
#D8E8D3
RGB
rgb(216, 232, 211)
HSL
hsl(106, 31%, 87%)
HSB
hsb(106, 9%, 91%)
CMYK
cmyk(7%, 0%, 9%, 9%)
Oklch
oklch(91.3% 0.033 138.2)

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

#BBCEB7

Celadon · Silver · Apple Green

HEX
#BBCEB7
RGB
rgb(187, 206, 183)
HSL
hsl(110, 19%, 76%)
HSB
hsb(110, 11%, 81%)
CMYK
cmyk(9%, 0%, 11%, 19%)
Oklch
oklch(83.1% 0.038 140.2)

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

#B3BCB7

Silver Gray · Silver · Pearl Gray

HEX
#B3BCB7
RGB
rgb(179, 188, 183)
HSL
hsl(147, 6%, 72%)
HSB
hsb(147, 5%, 74%)
CMYK
cmyk(5%, 0%, 3%, 26%)
Oklch
oklch(78.7% 0.012 162.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D77073
70D7D3

Analogous

D770A7
D77073
D7A070

Triadic

D77073
73D770
7073D7

Split-Comp.

D77073
70D7A0
70A7D7

Tetradic

D77073
A7D770
70D7D3
A070D7

Contrast Matrix WCAG 2.1 Contrast

D77073
F4EFF0
D8E8D3
BBCEB7
B3BCB7
—
2.9
Fail
2.5
Fail
2.0
Fail
1.7
Fail
2.9
Fail
—
1.1
Fail
1.5
Fail
1.7
Fail
2.5
Fail
1.1
Fail
—
1.3
Fail
1.5
Fail
2.0
Fail
1.5
Fail
1.3
Fail
—
1.2
Fail
1.7
Fail
1.7
Fail
1.5
Fail
1.2
Fail
—
White BG
3.3AA Large
1.1Fail
1.3Fail
1.7Fail
1.9Fail
Black BG
6.5AA
18.5AAA
16.4AAA
12.6AAA
10.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AAA972
F2F2F0
DFDFD8
C3C3BD
B7B7B8

Deuteranopia

B0B872
F2F3F0
DEDDD9
C2C1BE
B6B6B9

Tritanopia

D27272
F4F0F0
D9DCDD
BCC1C2
B3B9B9

Achromatopsia

8F8F8F
F1F1F1
E1E1E1
C6C6C6
B9B9B9

Shades & Tints Shades & Tints

#D77073

Dark
Light

#F4EFF0

Dark
Light

#D8E8D3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d77073;
  --color-2: #f4eff0;
  --color-3: #d8e8d3;
  --color-4: #bbceb7;
  --color-5: #b3bcb7;
}

SCSS

$color-1: #d77073;
$color-2: #f4eff0;
$color-3: #d8e8d3;
$color-4: #bbceb7;
$color-5: #b3bcb7;

TAILWIND

colors: {
  'brand-1': '#d77073',
  'brand-2': '#f4eff0',
  'brand-3': '#d8e8d3',
  'brand-4': '#bbceb7',
  'brand-5': '#b3bcb7',
}

RGB Array

[215, 112, 115], [244, 239, 240], [216, 232, 211], [187, 206, 183], [179, 188, 183]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D77073, #F4EFF0, #D8E8D3, #BBCEB7, #B3BCB7 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #d77073; --color-2: #f4eff0; --color-3: #d8e8d3; --color-4: #bbceb7; --color-5: #b3bcb7. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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