← Back to Editor

#AB9B89 · #D1B7A7 · #F7D8C6 · #F09F92 · #C9857B

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#AB9B89

Ginger · DarkGray · Warm Sun

HEX
#AB9B89
RGB
rgb(171, 155, 137)
HSL
hsl(32, 17%, 60%)
HSB
hsb(32, 20%, 67%)
CMYK
cmyk(0%, 9%, 20%, 33%)
Oklch
oklch(69.8% 0.032 70.6)

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

#D1B7A7

Apricot · Tan · Warm Sun

HEX
#D1B7A7
RGB
rgb(209, 183, 167)
HSL
hsl(23, 31%, 74%)
HSB
hsb(23, 20%, 82%)
CMYK
cmyk(0%, 12%, 20%, 18%)
Oklch
oklch(79.7% 0.037 53.6)

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

#F7D8C6

Apricot · Bisque · Peach Orange

HEX
#F7D8C6
RGB
rgb(247, 216, 198)
HSL
hsl(22, 75%, 87%)
HSB
hsb(22, 20%, 97%)
CMYK
cmyk(0%, 13%, 20%, 3%)
Oklch
oklch(90.3% 0.042 52.1)

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

#F09F92

Peach Pink · DarkSalmon · Coral Red

HEX
#F09F92
RGB
rgb(240, 159, 146)
HSL
hsl(8, 76%, 76%)
HSB
hsb(8, 39%, 94%)
CMYK
cmyk(0%, 34%, 39%, 6%)
Oklch
oklch(77.9% 0.099 29.5)

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

#C9857B

Peach Pink · DarkSalmon · Coral Red

HEX
#C9857B
RGB
rgb(201, 133, 123)
HSL
hsl(8, 42%, 64%)
HSB
hsb(8, 39%, 79%)
CMYK
cmyk(0%, 34%, 39%, 21%)
Oklch
oklch(68.3% 0.086 28.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AB9B89
8898AA

Analogous

AA8988
AB9B89
A9AA88

Triadic

AB9B89
88AA9A
9A88AA

Split-Comp.

AB9B89
88A9AA
8988AA

Tetradic

AB9B89
88AA89
8898AA
AA88A9

Contrast Matrix WCAG 2.1 Contrast

AB9B89
D1B7A7
F7D8C6
F09F92
C9857B
—
1.4
Fail
2.0
Fail
1.3
Fail
1.1
Fail
1.4
Fail
—
1.4
Fail
1.1
Fail
1.5
Fail
2.0
Fail
1.4
Fail
—
1.5
Fail
2.2
Fail
1.3
Fail
1.1
Fail
1.5
Fail
—
1.4
Fail
1.1
Fail
1.5
Fail
2.2
Fail
1.4
Fail
—
White BG
2.7Fail
1.9Fail
1.3Fail
2.1Fail
2.9Fail
Black BG
7.8AAA
11.0AAA
15.6AAA
10.1AAA
7.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A4A48D
C6C6AB
EAE9CA
CDCC95
ACAB7D

Deuteranopia

A5A68E
C7C9AC
EBEECB
D2D896
B0B57E

Tritanopia

AA9192
D0AEAF
F5CECF
EC9898
C67F80

Achromatopsia

9E9E9E
BDBDBD
DFDFDF
B6B6B6
989898

Shades & Tints Shades & Tints

#AB9B89

Dark
Light

#D1B7A7

Dark
Light

#F7D8C6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ab9b89;
  --color-2: #d1b7a7;
  --color-3: #f7d8c6;
  --color-4: #f09f92;
  --color-5: #c9857b;
}

SCSS

$color-1: #ab9b89;
$color-2: #d1b7a7;
$color-3: #f7d8c6;
$color-4: #f09f92;
$color-5: #c9857b;

TAILWIND

colors: {
  'brand-1': '#ab9b89',
  'brand-2': '#d1b7a7',
  'brand-3': '#f7d8c6',
  'brand-4': '#f09f92',
  'brand-5': '#c9857b',
}

RGB Array

[171, 155, 137], [209, 183, 167], [247, 216, 198], [240, 159, 146], [201, 133, 123]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AB9B89, #D1B7A7, #F7D8C6, #F09F92, #C9857B 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: #ab9b89; --color-2: #d1b7a7; --color-3: #f7d8c6; --color-4: #f09f92; --color-5: #c9857b. 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