#AB5555 + #B7BDA4 + #D4C99F + #FACDA7 + #EB8686 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#AB5555

Crimson · Sienna · Passion Red

HEX

#AB5555

RGB

rgb(171, 85, 85)

HSL

hsl(0, 34%, 50%)

HSB

hsb(0, 50%, 67%)

CMYK

cmyk(0%, 50%, 50%, 33%)

Oklch

oklch(55.4% 0.113 21.4)

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

#B7BDA4

Willow Green · DarkGray · Apple Green

HEX

#B7BDA4

RGB

rgb(183, 189, 164)

HSL

hsl(74, 16%, 69%)

HSB

hsb(74, 13%, 74%)

CMYK

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

Oklch

oklch(78.7% 0.035 118.2)

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

#D4C99F

Goose Yellow · Tan · Sunflower

HEX

#D4C99F

RGB

rgb(212, 201, 159)

HSL

hsl(48, 38%, 73%)

HSB

hsb(48, 25%, 83%)

CMYK

cmyk(0%, 5%, 25%, 17%)

Oklch

oklch(83.4% 0.057 95.1)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#FACDA7

Apricot · Wheat · Peach Orange

HEX

#FACDA7

RGB

rgb(250, 205, 167)

HSL

hsl(27, 89%, 82%)

HSB

hsb(27, 33%, 98%)

CMYK

cmyk(0%, 18%, 33%, 2%)

Oklch

oklch(87.8% 0.072 61.9)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#EB8686

Peach Pink · LightCoral · Coral Red

HEX

#EB8686

RGB

rgb(235, 134, 134)

HSL

hsl(0, 72%, 72%)

HSB

hsb(0, 43%, 92%)

CMYK

cmyk(0%, 43%, 43%, 8%)

Oklch

oklch(72.9% 0.124 20.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AB5555

54ABAB

Analogous

AB5480

AB5555

AB8054

Triadic

AB5555

54AB54

5454AB

Split-Comp.

AB5555

54AB80

5480AB

Tetradic

AB5555

80AB54

54ABAB

8054AB

Contrast Matrix WCAG 2.1 Contrast

AB5555	B7BDA4	D4C99F	FACDA7	EB8686
—	2.6 Fail	3.0 AA Large	3.4 AA Large	2.0 Fail
2.6 Fail	—	1.2 Fail	1.3 Fail	1.3 Fail
3.0 AA Large	1.2 Fail	—	1.1 Fail	1.5 Fail
3.4 AA Large	1.3 Fail	1.1 Fail	—	1.7 Fail
2.0 Fail	1.3 Fail	1.5 Fail	1.7 Fail	—

White BG

5.0AA

1.9Fail

1.7Fail

1.5Fail

2.5Fail

Black BG

4.2AA Large

10.8AAA

12.7AAA

14.4AAA

8.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

868555

BABAAA

CFCFA9

E7E6B0

BFBE86

Deuteranopia

8B9155

B9B9AC

D0D1AC

E9EDB2

C5CD86

Tritanopia

A75555

B7AFB0

D3B1B3

F8B7B9

E68686

Achromatopsia

6F6F6F

B8B8B8

C8C8C8

D6D6D6

A4A4A4

Shades & Tints Shades & Tints

#AB5555

Dark

Light

#B7BDA4

Dark

Light

#D4C99F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ab5555;
  --color-2: #b7bda4;
  --color-3: #d4c99f;
  --color-4: #facda7;
  --color-5: #eb8686;
}

SCSS

$color-1: #ab5555;
$color-2: #b7bda4;
$color-3: #d4c99f;
$color-4: #facda7;
$color-5: #eb8686;

TAILWIND

colors: {
  'brand-1': '#ab5555',
  'brand-2': '#b7bda4',
  'brand-3': '#d4c99f',
  'brand-4': '#facda7',
  'brand-5': '#eb8686',
}

RGB Array

[171, 85, 85], [183, 189, 164], [212, 201, 159], [250, 205, 167], [235, 134, 134]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AB5555, #B7BDA4, #D4C99F, #FACDA7, #EB8686 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: #ab5555; --color-2: #b7bda4; --color-3: #d4c99f; --color-4: #facda7; --color-5: #eb8686. 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