← Back to Editor

#FFBBD2 · #E84C96 · #D51675 · #3D3F34 · #BAA69D

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

#FFBBD2

Rouge · Pink · Cherry Blossom

HEX
#FFBBD2
RGB
rgb(255, 187, 210)
HSL
hsl(340, 100%, 87%)
HSB
hsb(340, 27%, 100%)
CMYK
cmyk(0%, 27%, 18%, 0%)
Oklch
oklch(86.1% 0.083 356.9)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#E84C96

Dark Violet · LightCoral · Rose Pink

HEX
#E84C96
RGB
rgb(232, 76, 150)
HSL
hsl(332, 77%, 60%)
HSB
hsb(332, 67%, 91%)
CMYK
cmyk(0%, 67%, 35%, 9%)
Oklch
oklch(65.3% 0.203 355.0)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#D51675

Dark Violet · MediumVioletRed · Camellia

HEX
#D51675
RGB
rgb(213, 22, 117)
HSL
hsl(330, 81%, 46%)
HSB
hsb(330, 90%, 84%)
CMYK
cmyk(0%, 90%, 45%, 16%)
Oklch
oklch(57.2% 0.223 359.0)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#3D3F34

Grass Green · DarkSlateGray · Forest Green

HEX
#3D3F34
RGB
rgb(61, 63, 52)
HSL
hsl(71, 10%, 23%)
HSB
hsb(71, 17%, 25%)
CMYK
cmyk(3%, 0%, 17%, 75%)
Oklch
oklch(36.2% 0.019 115.7)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

#BAA69D

Apricot · DarkGray · Warm Sun

HEX
#BAA69D
RGB
rgb(186, 166, 157)
HSL
hsl(19, 17%, 67%)
HSB
hsb(19, 16%, 73%)
CMYK
cmyk(0%, 11%, 16%, 27%)
Oklch
oklch(74.0% 0.027 45.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFBBD2
BDFFE9

Analogous

FFBDF4
FFBBD2
FFC8BD

Triadic

FFBBD2
D3FFBD
BDD3FF

Split-Comp.

FFBBD2
BDFFC8
BDF4FF

Tetradic

FFBBD2
F4FFBD
BDFFE9
C8BDFF

Contrast Matrix WCAG 2.1 Contrast

FFBBD2
E84C96
D51675
3D3F34
BAA69D
—
2.3
Fail
3.2
AA Large
6.8
AA
1.5
Fail
2.3
Fail
—
1.4
Fail
3.0
AA Large
1.5
Fail
3.2
AA Large
1.4
Fail
—
2.1
Fail
2.1
Fail
6.8
AA
3.0
AA Large
2.1
Fail
—
4.6
AA
1.5
Fail
1.5
Fail
2.1
Fail
4.6
AA
—
White BG
1.6Fail
3.6AA Large
5.0AA
10.7AAA
2.3Fail
Black BG
13.3AAA
5.9AA
4.2AA Large
2.0Fail
9.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E2E1CC
A4A384
82815E
3E3E37
B1B19F

Deuteranopia

E6EBCB
AEB980
8D9C58
3E3E37
B3B4A0

Tritanopia

FCC8C7
E07673
CB4C48
3D3939
B9A1A1

Achromatopsia

D2D2D2
838383
5A5A5A
3D3D3D
ABABAB

Shades & Tints Shades & Tints

#FFBBD2

Dark
Light

#E84C96

Dark
Light

#D51675

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffbbd2;
  --color-2: #e84c96;
  --color-3: #d51675;
  --color-4: #3d3f34;
  --color-5: #baa69d;
}

SCSS

$color-1: #ffbbd2;
$color-2: #e84c96;
$color-3: #d51675;
$color-4: #3d3f34;
$color-5: #baa69d;

TAILWIND

colors: {
  'brand-1': '#ffbbd2',
  'brand-2': '#e84c96',
  'brand-3': '#d51675',
  'brand-4': '#3d3f34',
  'brand-5': '#baa69d',
}

RGB Array

[255, 187, 210], [232, 76, 150], [213, 22, 117], [61, 63, 52], [186, 166, 157]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFBBD2, #E84C96, #D51675, #3D3F34, #BAA69D 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: #ffbbd2; --color-2: #e84c96; --color-3: #d51675; --color-4: #3d3f34; --color-5: #baa69d. 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