#AF8D87 + #BDA49F + #CFAFCC + #E4E2A8 + #EBF8AC - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#AF8D87

Peach Pink · DarkGray · Coral Red

HEX

#AF8D87

RGB

rgb(175, 141, 135)

HSL

hsl(9, 20%, 61%)

HSB

hsb(9, 23%, 69%)

CMYK

cmyk(0%, 19%, 23%, 31%)

Oklch

oklch(67.3% 0.042 29.8)

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

#BDA49F

Peach Pink · DarkGray · Coral Red

HEX

#BDA49F

RGB

rgb(189, 164, 159)

HSL

hsl(10, 19%, 68%)

HSB

hsb(10, 16%, 74%)

CMYK

cmyk(0%, 13%, 16%, 26%)

Oklch

oklch(73.9% 0.030 31.2)

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

#CFAFCC

Mauve · Silver · Lilac Purple

HEX

#CFAFCC

RGB

rgb(207, 175, 204)

HSL

hsl(306, 25%, 75%)

HSB

hsb(306, 15%, 81%)

CMYK

cmyk(0%, 15%, 1%, 19%)

Oklch

oklch(79.1% 0.054 329.1)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#E4E2A8

Fresh Green · Wheat · Lemon Cream

HEX

#E4E2A8

RGB

rgb(228, 226, 168)

HSL

hsl(58, 53%, 78%)

HSB

hsb(58, 26%, 89%)

CMYK

cmyk(0%, 1%, 26%, 11%)

Oklch

oklch(90.0% 0.075 106.2)

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

#EBF8AC

Willow Green · Wheat · Mint Green

HEX

#EBF8AC

RGB

rgb(235, 248, 172)

HSL

hsl(70, 84%, 82%)

HSB

hsb(70, 31%, 97%)

CMYK

cmyk(5%, 0%, 31%, 3%)

Oklch

oklch(95.2% 0.098 116.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AF8D87

88A9AF

Analogous

AF8896

AF8D87

AFA288

Triadic

AF8D87

88AF8E

8E88AF

Split-Comp.

AF8D87

88AFA2

8896AF

Tetradic

AF8D87

96AF88

88A9AF

A288AF

Contrast Matrix WCAG 2.1 Contrast

AF8D87	BDA49F	CFAFCC	E4E2A8	EBF8AC
—	1.3 Fail	1.5 Fail	2.3 Fail	2.7 Fail
1.3 Fail	—	1.2 Fail	1.8 Fail	2.1 Fail
1.5 Fail	1.2 Fail	—	1.5 Fail	1.7 Fail
2.3 Fail	1.8 Fail	1.5 Fail	—	1.2 Fail
2.7 Fail	2.1 Fail	1.7 Fail	1.2 Fail	—

White BG

3.0AA Large

2.3Fail

2.0Fail

1.3Fail

1.1Fail

Black BG

7.0AA

9.0AAA

10.7AAA

15.7AAA

18.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A0A088

B2B2A0

C1C1C5

E3E3B6

F1F1BE

Deuteranopia

A2A589

B4B5A1

C3C5C3

E3E3B9

F0EFC3

Tritanopia

AD8A8A

BCA1A1

CDBFBE

E4C1C4

ECCDD0

Achromatopsia

969696

ABABAB

BCBCBC

DCDCDC

EBEBEB

Shades & Tints Shades & Tints

#AF8D87

Dark

Light

#BDA49F

Dark

Light

#CFAFCC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #af8d87;
  --color-2: #bda49f;
  --color-3: #cfafcc;
  --color-4: #e4e2a8;
  --color-5: #ebf8ac;
}

SCSS

$color-1: #af8d87;
$color-2: #bda49f;
$color-3: #cfafcc;
$color-4: #e4e2a8;
$color-5: #ebf8ac;

TAILWIND

colors: {
  'brand-1': '#af8d87',
  'brand-2': '#bda49f',
  'brand-3': '#cfafcc',
  'brand-4': '#e4e2a8',
  'brand-5': '#ebf8ac',
}

RGB Array

[175, 141, 135], [189, 164, 159], [207, 175, 204], [228, 226, 168], [235, 248, 172]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AF8D87, #BDA49F, #CFAFCC, #E4E2A8, #EBF8AC 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: #af8d87; --color-2: #bda49f; --color-3: #cfafcc; --color-4: #e4e2a8; --color-5: #ebf8ac. 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