← Back to Editor

#FFABAB · #FF8A9B · #D16FAF · #88627D · #4B6156

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 LibraryData Visualization

Color Details Color Details

#FFABAB

Peach Pink · LightPink · Cherry Blossom

HEX
#FFABAB
RGB
rgb(255, 171, 171)
HSL
hsl(0, 100%, 84%)
HSB
hsb(0, 33%, 100%)
CMYK
cmyk(0%, 33%, 33%, 0%)
Oklch
oklch(82.3% 0.099 19.4)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#FF8A9B

Peach Pink · LightCoral · Coral Red

HEX
#FF8A9B
RGB
rgb(255, 138, 155)
HSL
hsl(351, 100%, 77%)
HSB
hsb(351, 46%, 100%)
CMYK
cmyk(0%, 46%, 39%, 0%)
Oklch
oklch(76.5% 0.142 11.8)

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

#D16FAF

Mauve · Orchid · Rose Pink

HEX
#D16FAF
RGB
rgb(209, 111, 175)
HSL
hsl(321, 52%, 63%)
HSB
hsb(321, 47%, 82%)
CMYK
cmyk(0%, 47%, 16%, 18%)
Oklch
oklch(67.3% 0.145 342.0)

Traditional「Mauve」· Paint「Rose Pink」· Creative Rose Petal

#88627D

Rose Purple · Gray · Violet

HEX
#88627D
RGB
rgb(136, 98, 125)
HSL
hsl(317, 16%, 46%)
HSB
hsb(317, 28%, 53%)
CMYK
cmyk(0%, 28%, 8%, 47%)
Oklch
oklch(54.4% 0.062 337.4)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#4B6156

Mineral Blue · DarkSlateGray · Forest Green

HEX
#4B6156
RGB
rgb(75, 97, 86)
HSL
hsl(150, 13%, 34%)
HSB
hsb(150, 23%, 38%)
CMYK
cmyk(23%, 0%, 11%, 62%)
Oklch
oklch(47.1% 0.032 163.2)

Traditional「Mineral Blue」· Paint「Forest Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFABAB
ADFFFF

Analogous

FFADD6
FFABAB
FFD6AD

Triadic

FFABAB
ADFFAD
ADADFF

Split-Comp.

FFABAB
ADFFD6
ADD6FF

Tetradic

FFABAB
D6FFAD
ADFFFF
D6ADFF

Contrast Matrix WCAG 2.1 Contrast

FFABAB
FF8A9B
D16FAF
88627D
4B6156
—
1.2
Fail
1.8
Fail
2.9
Fail
3.7
AA Large
1.2
Fail
—
1.4
Fail
2.3
Fail
3.0
Fail
1.8
Fail
1.4
Fail
—
1.6
Fail
2.1
Fail
2.9
Fail
2.3
Fail
1.6
Fail
—
1.3
Fail
3.7
AA Large
3.0
Fail
2.1
Fail
1.3
Fail
—
White BG
1.8Fail
2.2Fail
3.2AA Large
5.1AA
6.7AA
Black BG
11.7AAA
9.4AAA
6.6AA
4.1AA Large
3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DBDAAB
CCCB97
A7A6A0
787776
555559

Deuteranopia

E0E6AB
D3DC96
ACB49C
7A7D75
535259

Tritanopia

FBABAB
F99493
CC9391
867170
4C5B5B

Achromatopsia

C4C4C4
AFAFAF
949494
707070
595959

Shades & Tints Shades & Tints

#FFABAB

Dark
Light

#FF8A9B

Dark
Light

#D16FAF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffabab;
  --color-2: #ff8a9b;
  --color-3: #d16faf;
  --color-4: #88627d;
  --color-5: #4b6156;
}

SCSS

$color-1: #ffabab;
$color-2: #ff8a9b;
$color-3: #d16faf;
$color-4: #88627d;
$color-5: #4b6156;

TAILWIND

colors: {
  'brand-1': '#ffabab',
  'brand-2': '#ff8a9b',
  'brand-3': '#d16faf',
  'brand-4': '#88627d',
  'brand-5': '#4b6156',
}

RGB Array

[255, 171, 171], [255, 138, 155], [209, 111, 175], [136, 98, 125], [75, 97, 86]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFABAB, #FF8A9B, #D16FAF, #88627D, #4B6156 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #ffabab; --color-2: #ff8a9b; --color-3: #d16faf; --color-4: #88627d; --color-5: #4b6156. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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