← Back to Editor

#AB615B · #D47687 · #D08B93 · #BCA1B9 · #95B6D6

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#AB615B

Crimson · Sienna · Passion Red

HEX
#AB615B
RGB
rgb(171, 97, 91)
HSL
hsl(4, 32%, 51%)
HSB
hsb(4, 47%, 67%)
CMYK
cmyk(0%, 43%, 47%, 33%)
Oklch
oklch(57.5% 0.097 25.4)

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

#D47687

Peach Pink · LightCoral · Coral Red

HEX
#D47687
RGB
rgb(212, 118, 135)
HSL
hsl(349, 52%, 65%)
HSB
hsb(349, 44%, 83%)
CMYK
cmyk(0%, 44%, 36%, 17%)
Oklch
oklch(67.5% 0.118 9.2)

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

#D08B93

Peach Pink · DarkSalmon · Coral Red

HEX
#D08B93
RGB
rgb(208, 139, 147)
HSL
hsl(353, 42%, 68%)
HSB
hsb(353, 33%, 82%)
CMYK
cmyk(0%, 33%, 29%, 18%)
Oklch
oklch(70.8% 0.085 11.8)

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

#BCA1B9

Mauve · DarkGray · Lilac Purple

HEX
#BCA1B9
RGB
rgb(188, 161, 185)
HSL
hsl(307, 17%, 68%)
HSB
hsb(307, 14%, 74%)
CMYK
cmyk(0%, 14%, 2%, 26%)
Oklch
oklch(74.0% 0.046 329.6)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#95B6D6

Azure · LightSteelBlue · Cobalt Blue

HEX
#95B6D6
RGB
rgb(149, 182, 214)
HSL
hsl(210, 44%, 71%)
HSB
hsb(210, 30%, 84%)
CMYK
cmyk(30%, 15%, 0%, 16%)
Oklch
oklch(76.3% 0.058 247.8)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AB615B
5AA5AA

Analogous

AA5A7D
AB615B
AA875A

Triadic

AB615B
5AAA5F
5F5AAA

Split-Comp.

AB615B
5AAA87
5A7DAA

Tetradic

AB615B
7DAA5A
5AA5AA
875AAA

Contrast Matrix WCAG 2.1 Contrast

AB615B
D47687
D08B93
BCA1B9
95B6D6
—
1.5
Fail
1.7
Fail
1.9
Fail
2.2
Fail
1.5
Fail
—
1.2
Fail
1.3
Fail
1.5
Fail
1.7
Fail
1.2
Fail
—
1.1
Fail
1.3
Fail
1.9
Fail
1.3
Fail
1.1
Fail
—
1.1
Fail
2.2
Fail
1.5
Fail
1.3
Fail
1.1
Fail
—
White BG
4.6AA
3.1AA Large
2.7Fail
2.3Fail
2.1Fail
Black BG
4.6AA
6.7AA
7.8AAA
8.9AAA
9.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8B8A5C
ABAA83
B2B291
B0B0B3
A3A4CE

Deuteranopia

8F955D
B1B882
B6BB91
B2B4B2
A19FCC

Tritanopia

A75E5E
CF807F
CD908F
BBAFAE
97C8C7

Achromatopsia

767676
949494
A1A1A1
ACACAC
B0B0B0

Shades & Tints Shades & Tints

#AB615B

Dark
Light

#D47687

Dark
Light

#D08B93

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ab615b;
  --color-2: #d47687;
  --color-3: #d08b93;
  --color-4: #bca1b9;
  --color-5: #95b6d6;
}

SCSS

$color-1: #ab615b;
$color-2: #d47687;
$color-3: #d08b93;
$color-4: #bca1b9;
$color-5: #95b6d6;

TAILWIND

colors: {
  'brand-1': '#ab615b',
  'brand-2': '#d47687',
  'brand-3': '#d08b93',
  'brand-4': '#bca1b9',
  'brand-5': '#95b6d6',
}

RGB Array

[171, 97, 91], [212, 118, 135], [208, 139, 147], [188, 161, 185], [149, 182, 214]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AB615B, #D47687, #D08B93, #BCA1B9, #95B6D6 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: #ab615b; --color-2: #d47687; --color-3: #d08b93; --color-4: #bca1b9; --color-5: #95b6d6. 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