#FC6C64 + #B5A7A7 + #D9B4B2 + #E0E8CF + #F3FCF0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FC6C64

Peach Pink · Salmon · Coral Red

HEX

#FC6C64

RGB

rgb(252, 108, 100)

HSL

hsl(3, 96%, 69%)

HSB

hsb(3, 60%, 99%)

CMYK

cmyk(0%, 57%, 60%, 1%)

Oklch

oklch(70.7% 0.178 25.8)

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

#B5A7A7

Peach Pink · DarkGray · Silver Sand

HEX

#B5A7A7

RGB

rgb(181, 167, 167)

HSL

hsl(0, 9%, 68%)

HSB

hsb(0, 8%, 71%)

CMYK

cmyk(0%, 8%, 8%, 29%)

Oklch

oklch(74.0% 0.016 17.5)

Traditional「Peach Pink」· Paint「Silver Sand」· Creative Urban Concrete

#D9B4B2

Peach Pink · Silver · Coral Red

HEX

#D9B4B2

RGB

rgb(217, 180, 178)

HSL

hsl(3, 34%, 77%)

HSB

hsb(3, 18%, 85%)

CMYK

cmyk(0%, 17%, 18%, 15%)

Oklch

oklch(80.2% 0.043 21.7)

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

#E0E8CF

Willow Green · LightGray · Mint Green

HEX

#E0E8CF

RGB

rgb(224, 232, 207)

HSL

hsl(79, 35%, 86%)

HSB

hsb(79, 11%, 91%)

CMYK

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

Oklch

oklch(91.8% 0.034 121.5)

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

#F3FCF0

Emerald · SeaShell · Mint Green

HEX

#F3FCF0

RGB

rgb(243, 252, 240)

HSL

hsl(105, 67%, 96%)

HSB

hsb(105, 5%, 99%)

CMYK

cmyk(4%, 0%, 5%, 1%)

Oklch

oklch(98.1% 0.018 137.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FC6C64

64F4FC

Analogous

FC64A8

FC6C64

FCB864

Triadic

FC6C64

64FC6C

6C64FC

Split-Comp.

FC6C64

64FCB8

64A8FC

Tetradic

FC6C64

A8FC64

64F4FC

B864FC

Contrast Matrix WCAG 2.1 Contrast

FC6C64	B5A7A7	D9B4B2	E0E8CF	F3FCF0
—	1.2 Fail	1.5 Fail	2.2 Fail	2.7 Fail
1.2 Fail	—	1.2 Fail	1.8 Fail	2.2 Fail
1.5 Fail	1.2 Fail	—	1.5 Fail	1.8 Fail
2.2 Fail	1.8 Fail	1.5 Fail	—	1.2 Fail
2.7 Fail	2.2 Fail	1.8 Fail	1.2 Fail	—

White BG

2.8Fail

2.3Fail

1.9Fail

1.3Fail

1.1Fail

Black BG

7.5AAA

9.1AAA

11.1AAA

16.6AAA

20.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BEBC66

AFAFA7

C9C9B2

E3E4D5

F7F7F3

Deuteranopia

C6D166

B0B1A7

CBCEB3

E3E2D6

F6F6F4

Tritanopia

F56768

B4A7A7

D7B3B3

E0DADB

F3F5F6

Achromatopsia

969696

ABABAB

BFBFBF

E3E3E3

F8F8F8

Shades & Tints Shades & Tints

#FC6C64

Dark

Light

#B5A7A7

Dark

Light

#D9B4B2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fc6c64;
  --color-2: #b5a7a7;
  --color-3: #d9b4b2;
  --color-4: #e0e8cf;
  --color-5: #f3fcf0;
}

SCSS

$color-1: #fc6c64;
$color-2: #b5a7a7;
$color-3: #d9b4b2;
$color-4: #e0e8cf;
$color-5: #f3fcf0;

TAILWIND

colors: {
  'brand-1': '#fc6c64',
  'brand-2': '#b5a7a7',
  'brand-3': '#d9b4b2',
  'brand-4': '#e0e8cf',
  'brand-5': '#f3fcf0',
}

RGB Array

[252, 108, 100], [181, 167, 167], [217, 180, 178], [224, 232, 207], [243, 252, 240]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FC6C64, #B5A7A7, #D9B4B2, #E0E8CF, #F3FCF0 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: #fc6c64; --color-2: #b5a7a7; --color-3: #d9b4b2; --color-4: #e0e8cf; --color-5: #f3fcf0. 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