← Back to Editor

#ACB8A2 · #CC9E91 · #EB857A · #D19E5C · #D2B336

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#ACB8A2

Celadon · DarkGray · Apple Green

HEX
#ACB8A2
RGB
rgb(172, 184, 162)
HSL
hsl(93, 13%, 68%)
HSB
hsb(93, 12%, 72%)
CMYK
cmyk(7%, 0%, 12%, 28%)
Oklch
oklch(76.7% 0.033 130.7)

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

#CC9E91

Peach Pink · Tan · Coral Red

HEX
#CC9E91
RGB
rgb(204, 158, 145)
HSL
hsl(13, 37%, 68%)
HSB
hsb(13, 29%, 80%)
CMYK
cmyk(0%, 23%, 29%, 20%)
Oklch
oklch(73.8% 0.058 36.3)

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

#EB857A

Peach Pink · LightCoral · Coral Red

HEX
#EB857A
RGB
rgb(235, 133, 122)
HSL
hsl(6, 74%, 70%)
HSB
hsb(6, 48%, 92%)
CMYK
cmyk(0%, 43%, 48%, 8%)
Oklch
oklch(72.5% 0.127 27.1)

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

#D19E5C

Ginger · SandyBrown · Warm Sun

HEX
#D19E5C
RGB
rgb(209, 158, 92)
HSL
hsl(34, 56%, 59%)
HSB
hsb(34, 56%, 82%)
CMYK
cmyk(0%, 24%, 56%, 18%)
Oklch
oklch(73.4% 0.103 72.1)

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

#D2B336

Ginger · GoldenRod · Sunflower

HEX
#D2B336
RGB
rgb(210, 179, 54)
HSL
hsl(48, 63%, 52%)
HSB
hsb(48, 74%, 82%)
CMYK
cmyk(0%, 15%, 74%, 18%)
Oklch
oklch(77.3% 0.141 94.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ACB8A2
AEA3B8

Analogous

B7B8A3
ACB8A2
A3B8A4

Triadic

ACB8A2
A3ACB8
B8A3AC

Split-Comp.

ACB8A2
A4A3B8
B8A3B7

Tetradic

ACB8A2
A3B7B8
AEA3B8
B8A4A3

Contrast Matrix WCAG 2.1 Contrast

ACB8A2
CC9E91
EB857A
D19E5C
D2B336
—
1.1
Fail
1.2
Fail
1.2
Fail
1.0
Fail
1.1
Fail
—
1.1
Fail
1.0
Fail
1.2
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.3
Fail
1.2
Fail
1.0
Fail
1.1
Fail
—
1.2
Fail
1.0
Fail
1.2
Fail
1.3
Fail
1.2
Fail
—
White BG
2.1Fail
2.4Fail
2.6Fail
2.4Fail
2.1Fail
Black BG
10.1AAA
8.9AAA
8.2AAA
8.8AAA
10.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B1B1A7
B8B894
BFBE7D
BBBA6C
C5C454

Deuteranopia

B1B0A9
BBBE95
C5CC7D
BEC270
C6C95C

Tritanopia

ADACAC
CA9797
E67F7F
CE797B
D06C71

Achromatopsia

B2B2B2
AAAAAA
A2A2A2
A6A6A6
AEAEAE

Shades & Tints Shades & Tints

#ACB8A2

Dark
Light

#CC9E91

Dark
Light

#EB857A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #acb8a2;
  --color-2: #cc9e91;
  --color-3: #eb857a;
  --color-4: #d19e5c;
  --color-5: #d2b336;
}

SCSS

$color-1: #acb8a2;
$color-2: #cc9e91;
$color-3: #eb857a;
$color-4: #d19e5c;
$color-5: #d2b336;

TAILWIND

colors: {
  'brand-1': '#acb8a2',
  'brand-2': '#cc9e91',
  'brand-3': '#eb857a',
  'brand-4': '#d19e5c',
  'brand-5': '#d2b336',
}

RGB Array

[172, 184, 162], [204, 158, 145], [235, 133, 122], [209, 158, 92], [210, 179, 54]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ACB8A2, #CC9E91, #EB857A, #D19E5C, #D2B336 is ideal for: corporate websites, product showcases, portfolios. 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: #acb8a2; --color-2: #cc9e91; --color-3: #eb857a; --color-4: #d19e5c; --color-5: #d2b336. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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