#FD4547 + #A5787B + #B1AAB1 + #CDC4BB + #E0EDD9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FD4547

Peach Pink · Tomato · Coral Red

HEX

#FD4547

RGB

rgb(253, 69, 71)

HSL

hsl(359, 98%, 63%)

HSB

hsb(359, 73%, 99%)

CMYK

cmyk(0%, 73%, 72%, 1%)

Oklch

oklch(66.1% 0.220 25.1)

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

#A5787B

Crimson · Gray · Passion Red

HEX

#A5787B

RGB

rgb(165, 120, 123)

HSL

hsl(356, 20%, 56%)

HSB

hsb(356, 27%, 65%)

CMYK

cmyk(0%, 27%, 25%, 35%)

Oklch

oklch(61.8% 0.057 14.4)

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

#B1AAB1

Ash · DarkGray · Silver Sand

HEX

#B1AAB1

RGB

rgb(177, 170, 177)

HSL

hsl(300, 4%, 68%)

HSB

hsb(300, 4%, 69%)

CMYK

cmyk(0%, 4%, 0%, 31%)

Oklch

oklch(74.6% 0.013 325.7)

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

#CDC4BB

Goose Yellow · Silver · Peach Orange

HEX

#CDC4BB

RGB

rgb(205, 196, 187)

HSL

hsl(30, 15%, 77%)

HSB

hsb(30, 9%, 80%)

CMYK

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

Oklch

oklch(82.5% 0.016 67.6)

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

#E0EDD9

Celadon · Beige · Mint Green

HEX

#E0EDD9

RGB

rgb(224, 237, 217)

HSL

hsl(99, 36%, 89%)

HSB

hsb(99, 8%, 93%)

CMYK

cmyk(5%, 0%, 8%, 7%)

Oklch

oklch(93.1% 0.030 134.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FD4547

44FDFA

Analogous

FD44A4

FD4547

FD9E44

Triadic

FD4547

47FD44

4447FD

Split-Comp.

FD4547

44FD9E

44A4FD

Tetradic

FD4547

A4FD44

44FDFA

9E44FD

Contrast Matrix WCAG 2.1 Contrast

FD4547	A5787B	B1AAB1	CDC4BB	E0EDD9
—	1.1 Fail	1.5 Fail	2.0 Fail	2.8 Fail
1.1 Fail	—	1.7 Fail	2.2 Fail	3.1 AA Large
1.5 Fail	1.7 Fail	—	1.3 Fail	1.9 Fail
2.0 Fail	2.2 Fail	1.3 Fail	—	1.4 Fail
2.8 Fail	3.1 AA Large	1.9 Fail	1.4 Fail	—

White BG

3.4AA Large

3.8AA Large

2.3Fail

1.7Fail

1.2Fail

Black BG

6.1AA

5.6AA

9.3AAA

12.2AAA

17.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ADAC47

92917A

AEAEAF

C9C9BD

E6E6DE

Deuteranopia

B8C646

94987A

AEAFAF

CACABE

E5E4DF

Tritanopia

F44646

A37A7A

B1AEAE

CDBFBF

E1E2E3

Achromatopsia

7C7C7C

868686

ADADAD

C6C6C6

E7E7E7

Shades & Tints Shades & Tints

#FD4547

Dark

Light

#A5787B

Dark

Light

#B1AAB1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fd4547;
  --color-2: #a5787b;
  --color-3: #b1aab1;
  --color-4: #cdc4bb;
  --color-5: #e0edd9;
}

SCSS

$color-1: #fd4547;
$color-2: #a5787b;
$color-3: #b1aab1;
$color-4: #cdc4bb;
$color-5: #e0edd9;

TAILWIND

colors: {
  'brand-1': '#fd4547',
  'brand-2': '#a5787b',
  'brand-3': '#b1aab1',
  'brand-4': '#cdc4bb',
  'brand-5': '#e0edd9',
}

RGB Array

[253, 69, 71], [165, 120, 123], [177, 170, 177], [205, 196, 187], [224, 237, 217]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FD4547, #A5787B, #B1AAB1, #CDC4BB, #E0EDD9 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: #fd4547; --color-2: #a5787b; --color-3: #b1aab1; --color-4: #cdc4bb; --color-5: #e0edd9. 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