#E4A7A7 + #FAD7D7 + #F5F4F4 + #ABC9AB + #A3A3A3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E4A7A7

Peach Pink · Tan · Coral Red

HEX

#E4A7A7

RGB

rgb(228, 167, 167)

HSL

hsl(0, 53%, 77%)

HSB

hsb(0, 27%, 89%)

CMYK

cmyk(0%, 27%, 27%, 11%)

Oklch

oklch(78.6% 0.072 18.8)

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

#FAD7D7

Peach Pink · Bisque · Cherry Blossom

HEX

#FAD7D7

RGB

rgb(250, 215, 215)

HSL

hsl(0, 78%, 91%)

HSB

hsb(0, 14%, 98%)

CMYK

cmyk(0%, 14%, 14%, 2%)

Oklch

oklch(90.8% 0.039 17.9)

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

#F5F4F4

Moonlight White · SeaShell · Cloud White

HEX

#F5F4F4

RGB

rgb(245, 244, 244)

HSL

hsl(0, 5%, 96%)

HSB

hsb(0, 0%, 96%)

CMYK

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

Oklch

oklch(96.8% 0.001 17.2)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#ABC9AB

Celadon · Silver · Apple Green

HEX

#ABC9AB

RGB

rgb(171, 201, 171)

HSL

hsl(120, 22%, 73%)

HSB

hsb(120, 15%, 79%)

CMYK

cmyk(15%, 0%, 15%, 21%)

Oklch

oklch(80.5% 0.053 145.1)

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

#A3A3A3

Ash · DarkGray · Silver Sand

HEX

#A3A3A3

RGB

rgb(163, 163, 163)

HSL

hsl(0, 0%, 64%)

HSB

hsb(0, 0%, 64%)

CMYK

cmyk(0%, 0%, 0%, 36%)

Oklch

oklch(71.5% 0.000 89.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E4A7A7

A5E3E3

Analogous

E3A5C4

E4A7A7

E3C4A5

Triadic

E4A7A7

A5E3A5

A5A5E3

Split-Comp.

E4A7A7

A5E3C4

A5C4E3

Tetradic

E4A7A7

C4E3A5

A5E3E3

C4A5E3

Contrast Matrix WCAG 2.1 Contrast

E4A7A7	FAD7D7	F5F4F4	ABC9AB	A3A3A3
—	1.5 Fail	1.8 Fail	1.1 Fail	1.2 Fail
1.5 Fail	—	1.2 Fail	1.4 Fail	1.9 Fail
1.8 Fail	1.2 Fail	—	1.6 Fail	2.3 Fail
1.1 Fail	1.4 Fail	1.6 Fail	—	1.4 Fail
1.2 Fail	1.9 Fail	2.3 Fail	1.4 Fail	—

White BG

2.0Fail

1.3Fail

1.1Fail

1.8Fail

2.5Fail

Black BG

10.4AAA

15.8AAA

19.1AAA

11.7AAA

8.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CAC9A7

EBEBD7

F5F5F4

B8B8B2

A3A3A3

Deuteranopia

CDD2A7

EDF0D7

F5F5F4

B6B4B4

A3A3A3

Tritanopia

E1A7A7

F8D7D7

F5F4F4

ADB8B9

A3A3A3

Achromatopsia

B9B9B9

E1E1E1

F4F4F4

BDBDBD

A3A3A3

Shades & Tints Shades & Tints

#E4A7A7

Dark

Light

#FAD7D7

Dark

Light

#F5F4F4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e4a7a7;
  --color-2: #fad7d7;
  --color-3: #f5f4f4;
  --color-4: #abc9ab;
  --color-5: #a3a3a3;
}

SCSS

$color-1: #e4a7a7;
$color-2: #fad7d7;
$color-3: #f5f4f4;
$color-4: #abc9ab;
$color-5: #a3a3a3;

TAILWIND

colors: {
  'brand-1': '#e4a7a7',
  'brand-2': '#fad7d7',
  'brand-3': '#f5f4f4',
  'brand-4': '#abc9ab',
  'brand-5': '#a3a3a3',
}

RGB Array

[228, 167, 167], [250, 215, 215], [245, 244, 244], [171, 201, 171], [163, 163, 163]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E4A7A7, #FAD7D7, #F5F4F4, #ABC9AB, #A3A3A3 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: #e4a7a7; --color-2: #fad7d7; --color-3: #f5f4f4; --color-4: #abc9ab; --color-5: #a3a3a3. 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