← Back to Editor

#BB565C · #827465 · #EE6474 · #AC9D80 · #EEDDA5

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 Library

Color Details Color Details

#BB565C

Crimson · Sienna · Passion Red

HEX
#BB565C
RGB
rgb(187, 86, 92)
HSL
hsl(356, 43%, 54%)
HSB
hsb(356, 54%, 73%)
CMYK
cmyk(0%, 54%, 51%, 27%)
Oklch
oklch(58.0% 0.131 18.4)

TraditionalCrimson」· PaintPassion Red」· Creative Blush Sunrise

#827465

Ochre · DimGray · Amber Brown

HEX
#827465
RGB
rgb(130, 116, 101)
HSL
hsl(31, 13%, 45%)
HSB
hsb(31, 22%, 51%)
CMYK
cmyk(0%, 11%, 22%, 49%)
Oklch
oklch(56.8% 0.028 69.1)

TraditionalOchre」· PaintAmber Brown」· Creative Blush Sunrise

#EE6474

Peach Pink · LightCoral · Coral Red

HEX
#EE6474
RGB
rgb(238, 100, 116)
HSL
hsl(353, 80%, 66%)
HSB
hsb(353, 58%, 93%)
CMYK
cmyk(0%, 58%, 51%, 7%)
Oklch
oklch(68.0% 0.170 15.8)

TraditionalPeach Pink」· PaintCoral Red」· Creative Rose Petal

#AC9D80

Ginger · DarkGray · Sunflower

HEX
#AC9D80
RGB
rgb(172, 157, 128)
HSL
hsl(40, 21%, 59%)
HSB
hsb(40, 26%, 67%)
CMYK
cmyk(0%, 9%, 26%, 33%)
Oklch
oklch(70.1% 0.044 83.8)

TraditionalGinger」· PaintSunflower」· Creative Blush Sunrise

#EEDDA5

Goose Yellow · Wheat · Lemon Cream

HEX
#EEDDA5
RGB
rgb(238, 221, 165)
HSL
hsl(46, 68%, 79%)
HSB
hsb(46, 31%, 93%)
CMYK
cmyk(0%, 7%, 31%, 7%)
Oklch
oklch(89.8% 0.075 93.2)

TraditionalGoose Yellow」· PaintLemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BB565C
57BCB5

Analogous

BC5790
BB565C
BC8357

Triadic

BB565C
5EBC57
575EBC

Split-Comp.

BB565C
57BC83
5790BC

Tetradic

BB565C
90BC57
57BCB5
8357BC

Contrast Matrix WCAG 2.1 Contrast

BB565C
827465
EE6474
AC9D80
EEDDA5
1.0
Fail
1.5
Fail
1.7
Fail
3.4
AA Large
1.0
Fail
1.4
Fail
1.7
Fail
3.3
AA Large
1.5
Fail
1.4
Fail
1.2
Fail
2.3
Fail
1.7
Fail
1.7
Fail
1.2
Fail
2.0
Fail
3.4
AA Large
3.3
AA Large
2.3
Fail
2.0
Fail
White BG
4.6AA
4.5AA
3.1AA Large
2.7Fail
1.4Fail
Black BG
4.6AA
4.6AA
6.7AA
7.9AAA
15.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8F8E5B
7C7C69
B2B170
A6A587
E7E6B3

Deuteranopia

959D5A
7D7E69
BAC56F
A6A889
E8E9B6

Tritanopia

B65959
816B6C
E76D6C
AB8D8E
EDBDC0

Achromatopsia

757575
767676
8F8F8F
9E9E9E
DCDCDC

Shades & Tints Shades & Tints

#BB565C

Dark
Light

#827465

Dark
Light

#EE6474

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bb565c;
  --color-2: #827465;
  --color-3: #ee6474;
  --color-4: #ac9d80;
  --color-5: #eedda5;
}

SCSS

$color-1: #bb565c;
$color-2: #827465;
$color-3: #ee6474;
$color-4: #ac9d80;
$color-5: #eedda5;

TAILWIND

colors: {
  'brand-1': '#bb565c',
  'brand-2': '#827465',
  'brand-3': '#ee6474',
  'brand-4': '#ac9d80',
  'brand-5': '#eedda5',
}

RGB Array

[187, 86, 92], [130, 116, 101], [238, 100, 116], [172, 157, 128], [238, 221, 165]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BB565C, #827465, #EE6474, #AC9D80, #EEDDA5 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: #bb565c; --color-2: #827465; --color-3: #ee6474; --color-4: #ac9d80; --color-5: #eedda5. 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