#AB7F72 + #B99D78 + #E5D8AC + #F3F1E1 + #D6D4C1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#AB7F72

Crimson · Gray · Passion Red

HEX

#AB7F72

RGB

rgb(171, 127, 114)

HSL

hsl(14, 25%, 56%)

HSB

hsb(14, 33%, 67%)

CMYK

cmyk(0%, 26%, 33%, 33%)

Oklch

oklch(63.6% 0.058 37.1)

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

#B99D78

Ginger · Tan · Warm Sun

HEX

#B99D78

RGB

rgb(185, 157, 120)

HSL

hsl(34, 32%, 60%)

HSB

hsb(34, 35%, 73%)

CMYK

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

Oklch

oklch(71.2% 0.061 74.3)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#E5D8AC

Goose Yellow · Wheat · Lemon Cream

HEX

#E5D8AC

RGB

rgb(229, 216, 172)

HSL

hsl(46, 52%, 79%)

HSB

hsb(46, 25%, 90%)

CMYK

cmyk(0%, 6%, 25%, 10%)

Oklch

oklch(88.2% 0.059 93.5)

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

#F3F1E1

Fresh Green · Beige · Lemon Cream

HEX

#F3F1E1

RGB

rgb(243, 241, 225)

HSL

hsl(53, 43%, 92%)

HSB

hsb(53, 7%, 95%)

CMYK

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

Oklch

oklch(95.5% 0.021 101.0)

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

#D6D4C1

Fresh Green · LightGray · Lemon Cream

HEX

#D6D4C1

RGB

rgb(214, 212, 193)

HSL

hsl(54, 20%, 80%)

HSB

hsb(54, 10%, 84%)

CMYK

cmyk(0%, 1%, 10%, 16%)

Oklch

oklch(86.6% 0.026 102.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AB7F72

739EAB

Analogous

AB7382

AB7F72

AB9C73

Triadic

AB7F72

73AB80

8073AB

Split-Comp.

AB7F72

73AB9C

7382AB

Tetradic

AB7F72

82AB73

739EAB

9C73AB

Contrast Matrix WCAG 2.1 Contrast

AB7F72	B99D78	E5D8AC	F3F1E1	D6D4C1
—	1.4 Fail	2.5 Fail	3.1 AA Large	2.3 Fail
1.4 Fail	—	1.8 Fail	2.3 Fail	1.7 Fail
2.5 Fail	1.8 Fail	—	1.3 Fail	1.1 Fail
3.1 AA Large	2.3 Fail	1.3 Fail	—	1.3 Fail
2.3 Fail	1.7 Fail	1.1 Fail	1.3 Fail	—

White BG

3.5AA Large

2.6Fail

1.4Fail

1.1Fail

1.5Fail

Black BG

6.0AA

8.2AAA

14.7AAA

18.5AAA

14.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

989875

ADAD81

DFDFB7

F2F2E5

D5D5C6

Deuteranopia

9B9E76

AFB183

E0E1B9

F2F2E6

D5D5C7

Tritanopia

A97878

B8888A

E4BFC1

F3E8E9

D6C9CA

Achromatopsia

8B8B8B

A1A1A1

D7D7D7

F0F0F0

D2D2D2

Shades & Tints Shades & Tints

#AB7F72

Dark

Light

#B99D78

Dark

Light

#E5D8AC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ab7f72;
  --color-2: #b99d78;
  --color-3: #e5d8ac;
  --color-4: #f3f1e1;
  --color-5: #d6d4c1;
}

SCSS

$color-1: #ab7f72;
$color-2: #b99d78;
$color-3: #e5d8ac;
$color-4: #f3f1e1;
$color-5: #d6d4c1;

TAILWIND

colors: {
  'brand-1': '#ab7f72',
  'brand-2': '#b99d78',
  'brand-3': '#e5d8ac',
  'brand-4': '#f3f1e1',
  'brand-5': '#d6d4c1',
}

RGB Array

[171, 127, 114], [185, 157, 120], [229, 216, 172], [243, 241, 225], [214, 212, 193]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AB7F72, #B99D78, #E5D8AC, #F3F1E1, #D6D4C1 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: #ab7f72; --color-2: #b99d78; --color-3: #e5d8ac; --color-4: #f3f1e1; --color-5: #d6d4c1. 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