← Back to Editor

#B89F76 · #FFFFFF · #FFBACA · #FD89B0 · #F75797

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#B89F76

Ginger · Tan · Warm Sun

HEX
#B89F76
RGB
rgb(184, 159, 118)
HSL
hsl(37, 32%, 59%)
HSB
hsb(37, 36%, 72%)
CMYK
cmyk(0%, 14%, 36%, 28%)
Oklch
oklch(71.5% 0.063 79.8)

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

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#FFBACA

Peach Pink · Pink · Cherry Blossom

HEX
#FFBACA
RGB
rgb(255, 186, 202)
HSL
hsl(346, 100%, 86%)
HSB
hsb(346, 27%, 100%)
CMYK
cmyk(0%, 27%, 21%, 0%)
Oklch
oklch(85.7% 0.082 3.6)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#FD89B0

Rouge · LightPink · Cherry Blossom

HEX
#FD89B0
RGB
rgb(253, 137, 176)
HSL
hsl(340, 97%, 76%)
HSB
hsb(340, 46%, 99%)
CMYK
cmyk(0%, 46%, 30%, 1%)
Oklch
oklch(76.7% 0.146 359.7)

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

#F75797

Rouge · LightCoral · Rose Pink

HEX
#F75797
RGB
rgb(247, 87, 151)
HSL
hsl(336, 91%, 65%)
HSB
hsb(336, 65%, 97%)
CMYK
cmyk(0%, 65%, 39%, 3%)
Oklch
oklch(68.7% 0.202 359.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B89F76
758FB8

Analogous

B87D75
B89F76
B0B875

Triadic

B89F76
75B89E
9E75B8

Split-Comp.

B89F76
75B0B8
7D75B8

Tetradic

B89F76
75B87D
758FB8
B875B0

Contrast Matrix WCAG 2.1 Contrast

B89F76
FFFFFF
FFBACA
FD89B0
F75797
—
2.5
Fail
1.6
Fail
1.1
Fail
1.2
Fail
2.5
Fail
—
1.6
Fail
2.2
Fail
3.1
AA Large
1.6
Fail
1.6
Fail
—
1.4
Fail
1.9
Fail
1.1
Fail
2.2
Fail
1.4
Fail
—
1.4
Fail
1.2
Fail
3.1
AA Large
1.9
Fail
1.4
Fail
—
White BG
2.5Fail
1.0Fail
1.6Fail
2.2Fail
3.1AA Large
Black BG
8.3AAA
21.0AAA
13.1AAA
9.4AAA
6.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ADAD80
FFFFFF
E1E1C6
CBCAA7
B2B088

Deuteranopia

AFB082
FFFFFF
E5EAC5
D2DAA4
BBC784

Tritanopia

B78889
FFFFFF
FCC3C2
F79F9D
EF7B79

Achromatopsia

A2A2A2
FFFFFF
D0D0D0
B0B0B0
8E8E8E

Shades & Tints Shades & Tints

#B89F76

Dark
Light

#FFFFFF

Dark
Light

#FFBACA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b89f76;
  --color-2: #ffffff;
  --color-3: #ffbaca;
  --color-4: #fd89b0;
  --color-5: #f75797;
}

SCSS

$color-1: #b89f76;
$color-2: #ffffff;
$color-3: #ffbaca;
$color-4: #fd89b0;
$color-5: #f75797;

TAILWIND

colors: {
  'brand-1': '#b89f76',
  'brand-2': '#ffffff',
  'brand-3': '#ffbaca',
  'brand-4': '#fd89b0',
  'brand-5': '#f75797',
}

RGB Array

[184, 159, 118], [255, 255, 255], [255, 186, 202], [253, 137, 176], [247, 87, 151]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #B89F76, #FFFFFF, #FFBACA, #FD89B0, #F75797 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #b89f76; --color-2: #ffffff; --color-3: #ffbaca; --color-4: #fd89b0; --color-5: #f75797. 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. 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 cool-style 5-color scheme is especially suited for food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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