← Back to Editor

#B7AAA4 · #CB9EA2 · #E48A9C · #F27095 · #F4508D

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

#B7AAA4

Apricot · DarkGray · Warm Sun

HEX
#B7AAA4
RGB
rgb(183, 170, 164)
HSL
hsl(19, 12%, 68%)
HSB
hsb(19, 10%, 72%)
CMYK
cmyk(0%, 7%, 10%, 28%)
Oklch
oklch(74.7% 0.017 46.5)

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

#CB9EA2

Peach Pink · Tan · Coral Red

HEX
#CB9EA2
RGB
rgb(203, 158, 162)
HSL
hsl(355, 30%, 71%)
HSB
hsb(355, 22%, 80%)
CMYK
cmyk(0%, 22%, 20%, 20%)
Oklch
oklch(74.2% 0.054 12.5)

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

#E48A9C

Peach Pink · LightCoral · Coral Red

HEX
#E48A9C
RGB
rgb(228, 138, 156)
HSL
hsl(348, 63%, 72%)
HSB
hsb(348, 39%, 89%)
CMYK
cmyk(0%, 39%, 32%, 11%)
Oklch
oklch(73.2% 0.111 7.3)

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

#F27095

Rouge · LightCoral · Rose Pink

HEX
#F27095
RGB
rgb(242, 112, 149)
HSL
hsl(343, 83%, 69%)
HSB
hsb(343, 54%, 95%)
CMYK
cmyk(0%, 54%, 38%, 5%)
Oklch
oklch(70.9% 0.163 4.3)

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

#F4508D

Rouge · LightCoral · Rose Pink

HEX
#F4508D
RGB
rgb(244, 80, 141)
HSL
hsl(338, 88%, 64%)
HSB
hsb(338, 67%, 96%)
CMYK
cmyk(0%, 67%, 42%, 4%)
Oklch
oklch(67.2% 0.205 1.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B7AAA4
A4B1B7

Analogous

B7A4A7
B7AAA4
B7B4A4

Triadic

B7AAA4
A4B7AA
AAA4B7

Split-Comp.

B7AAA4
A4B7B4
A4A7B7

Tetradic

B7AAA4
A7B7A4
A4B1B7
B4A4B7

Contrast Matrix WCAG 2.1 Contrast

B7AAA4
CB9EA2
E48A9C
F27095
F4508D
—
1.0
Fail
1.1
Fail
1.2
Fail
1.5
Fail
1.0
Fail
—
1.1
Fail
1.2
Fail
1.4
Fail
1.1
Fail
1.1
Fail
—
1.1
Fail
1.3
Fail
1.2
Fail
1.2
Fail
1.1
Fail
—
1.2
Fail
1.5
Fail
1.4
Fail
1.3
Fail
1.2
Fail
—
White BG
2.3Fail
2.3Fail
2.5Fail
2.8Fail
3.3AA Large
Black BG
9.3AAA
9.0AAA
8.4AAA
7.5AAA
6.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B1B1A5
B8B7A1
BDBC98
BAB98C
ADAC7E

Deuteranopia

B2B3A6
BABEA1
C2C997
C1CB8A
B7C37B

Tritanopia

B6A7A7
C9A0A0
E09493
EB8583
EC7370

Achromatopsia

ADADAD
ACACAC
A7A7A7
9B9B9B
888888

Shades & Tints Shades & Tints

#B7AAA4

Dark
Light

#CB9EA2

Dark
Light

#E48A9C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b7aaa4;
  --color-2: #cb9ea2;
  --color-3: #e48a9c;
  --color-4: #f27095;
  --color-5: #f4508d;
}

SCSS

$color-1: #b7aaa4;
$color-2: #cb9ea2;
$color-3: #e48a9c;
$color-4: #f27095;
$color-5: #f4508d;

TAILWIND

colors: {
  'brand-1': '#b7aaa4',
  'brand-2': '#cb9ea2',
  'brand-3': '#e48a9c',
  'brand-4': '#f27095',
  'brand-5': '#f4508d',
}

RGB Array

[183, 170, 164], [203, 158, 162], [228, 138, 156], [242, 112, 149], [244, 80, 141]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B7AAA4, #CB9EA2, #E48A9C, #F27095, #F4508D 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: #b7aaa4; --color-2: #cb9ea2; --color-3: #e48a9c; --color-4: #f27095; --color-5: #f4508d. 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