← Back to Editor

#B5A18B · #DE5789 · #B38287 · #D67681 · #493643

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

#B5A18B

Ginger · DarkGray · Warm Sun

HEX
#B5A18B
RGB
rgb(181, 161, 139)
HSL
hsl(31, 22%, 63%)
HSB
hsb(31, 23%, 71%)
CMYK
cmyk(0%, 11%, 23%, 29%)
Oklch
oklch(72.1% 0.039 69.8)

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

#DE5789

Rouge · LightCoral · Rose Pink

HEX
#DE5789
RGB
rgb(222, 87, 137)
HSL
hsl(338, 67%, 61%)
HSB
hsb(338, 61%, 87%)
CMYK
cmyk(0%, 61%, 38%, 13%)
Oklch
oklch(64.5% 0.174 0.2)

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

#B38287

Peach Pink · Gray · Coral Red

HEX
#B38287
RGB
rgb(179, 130, 135)
HSL
hsl(354, 24%, 61%)
HSB
hsb(354, 27%, 70%)
CMYK
cmyk(0%, 27%, 25%, 30%)
Oklch
oklch(65.6% 0.061 12.1)

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

#D67681

Peach Pink · LightCoral · Coral Red

HEX
#D67681
RGB
rgb(214, 118, 129)
HSL
hsl(353, 54%, 65%)
HSB
hsb(353, 45%, 84%)
CMYK
cmyk(0%, 45%, 40%, 16%)
Oklch
oklch(67.6% 0.120 13.5)

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

#493643

Rose Purple · DarkSlateGray · Eggplant

HEX
#493643
RGB
rgb(73, 54, 67)
HSL
hsl(319, 15%, 25%)
HSB
hsb(319, 26%, 29%)
CMYK
cmyk(0%, 26%, 8%, 71%)
Oklch
oklch(35.9% 0.034 338.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B5A18B
8CA0B5

Analogous

B58D8C
B5A18B
B5B58C

Triadic

B5A18B
8CB5A1
A18CB5

Split-Comp.

B5A18B
8CB5B5
8D8CB5

Tetradic

B5A18B
8CB58D
8CA0B5
B58CB5

Contrast Matrix WCAG 2.1 Contrast

B5A18B
DE5789
B38287
D67681
493643
—
1.4
Fail
1.3
Fail
1.2
Fail
4.5
AA Large
1.4
Fail
—
1.1
Fail
1.2
Fail
3.1
AA Large
1.3
Fail
1.1
Fail
—
1.0
Fail
3.4
AA Large
1.2
Fail
1.2
Fail
1.0
Fail
—
3.6
AA Large
4.5
AA Large
3.1
AA Large
3.4
AA Large
3.6
AA Large
—
White BG
2.5Fail
3.6AA Large
3.3AA Large
3.1AA Large
11.1AAA
Black BG
8.4AAA
5.8AA
6.5AA
6.8AA
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

ACAC90
A4A27D
9E9D86
ACAC7E
414140

Deuteranopia

AEAF92
ABB57A
A1A486
B2B97E
42433F

Tritanopia

B49595
D77371
B18585
D17C7C
483D3D

Achromatopsia

A4A4A4
858585
919191
949494
3D3D3D

Shades & Tints Shades & Tints

#B5A18B

Dark
Light

#DE5789

Dark
Light

#B38287

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b5a18b;
  --color-2: #de5789;
  --color-3: #b38287;
  --color-4: #d67681;
  --color-5: #493643;
}

SCSS

$color-1: #b5a18b;
$color-2: #de5789;
$color-3: #b38287;
$color-4: #d67681;
$color-5: #493643;

TAILWIND

colors: {
  'brand-1': '#b5a18b',
  'brand-2': '#de5789',
  'brand-3': '#b38287',
  'brand-4': '#d67681',
  'brand-5': '#493643',
}

RGB Array

[181, 161, 139], [222, 87, 137], [179, 130, 135], [214, 118, 129], [73, 54, 67]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B5A18B, #DE5789, #B38287, #D67681, #493643 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: #b5a18b; --color-2: #de5789; --color-3: #b38287; --color-4: #d67681; --color-5: #493643. 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