← Back to Editor

#ABB2B6 · #DFC6AF · #DCA993 · #DC8289 · #A97C7B

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#ABB2B6

Ash · DarkGray · Silver Sand

HEX
#ABB2B6
RGB
rgb(171, 178, 182)
HSL
hsl(202, 7%, 69%)
HSB
hsb(202, 6%, 71%)
CMYK
cmyk(6%, 2%, 0%, 29%)
Oklch
oklch(75.9% 0.010 232.4)

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

#DFC6AF

Apricot · Wheat · Peach Orange

HEX
#DFC6AF
RGB
rgb(223, 198, 175)
HSL
hsl(29, 43%, 78%)
HSB
hsb(29, 22%, 87%)
CMYK
cmyk(0%, 11%, 22%, 13%)
Oklch
oklch(84.2% 0.042 64.8)

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

#DCA993

Apricot · Tan · Warm Sun

HEX
#DCA993
RGB
rgb(220, 169, 147)
HSL
hsl(18, 51%, 72%)
HSB
hsb(18, 33%, 86%)
CMYK
cmyk(0%, 23%, 33%, 14%)
Oklch
oklch(77.6% 0.068 44.4)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#DC8289

Peach Pink · LightCoral · Coral Red

HEX
#DC8289
RGB
rgb(220, 130, 137)
HSL
hsl(355, 56%, 69%)
HSB
hsb(355, 41%, 86%)
CMYK
cmyk(0%, 41%, 38%, 14%)
Oklch
oklch(70.5% 0.111 15.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#A97C7B

Crimson · Gray · Passion Red

HEX
#A97C7B
RGB
rgb(169, 124, 123)
HSL
hsl(1, 21%, 57%)
HSB
hsb(1, 27%, 66%)
CMYK
cmyk(0%, 27%, 27%, 34%)
Oklch
oklch(63.0% 0.056 20.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ABB2B6
B5AEAA

Analogous

AAB5B4
ABB2B6
AAACB5

Triadic

ABB2B6
B5AAB1
B1B5AA

Split-Comp.

ABB2B6
B5AAAC
B5B4AA

Tetradic

ABB2B6
B4AAB5
B5AEAA
ACB5AA

Contrast Matrix WCAG 2.1 Contrast

ABB2B6
DFC6AF
DCA993
DC8289
A97C7B
—
1.3
Fail
1.0
Fail
1.3
Fail
1.7
Fail
1.3
Fail
—
1.3
Fail
1.7
Fail
2.2
Fail
1.0
Fail
1.3
Fail
—
1.3
Fail
1.7
Fail
1.3
Fail
1.7
Fail
1.3
Fail
—
1.3
Fail
1.7
Fail
2.2
Fail
1.7
Fail
1.3
Fail
—
White BG
2.1Fail
1.6Fail
2.1Fail
2.8Fail
3.6AA Large
Black BG
9.8AAA
12.8AAA
10.1AAA
7.6AAA
5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AEAEB5
D4D4B5
C6C598
B5B487
96957B

Deuteranopia

AEADB5
D6D8B6
C9CD9A
BAC187
989C7B

Tritanopia

ABB4B4
DEB9BA
D99D9D
D88686
A77B7B

Achromatopsia

B0B0B0
CBCBCB
B6B6B6
9E9E9E
898989

Shades & Tints Shades & Tints

#ABB2B6

Dark
Light

#DFC6AF

Dark
Light

#DCA993

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #abb2b6;
  --color-2: #dfc6af;
  --color-3: #dca993;
  --color-4: #dc8289;
  --color-5: #a97c7b;
}

SCSS

$color-1: #abb2b6;
$color-2: #dfc6af;
$color-3: #dca993;
$color-4: #dc8289;
$color-5: #a97c7b;

TAILWIND

colors: {
  'brand-1': '#abb2b6',
  'brand-2': '#dfc6af',
  'brand-3': '#dca993',
  'brand-4': '#dc8289',
  'brand-5': '#a97c7b',
}

RGB Array

[171, 178, 182], [223, 198, 175], [220, 169, 147], [220, 130, 137], [169, 124, 123]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ABB2B6, #DFC6AF, #DCA993, #DC8289, #A97C7B 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: #abb2b6; --color-2: #dfc6af; --color-3: #dca993; --color-4: #dc8289; --color-5: #a97c7b. 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