← Back to Editor

#B45831 · #E1A978 · #DCBE9C · #D9D4D0 · #5EB0BB

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B45831

Tangerine · Sienna · Amber Brown

HEX
#B45831
RGB
rgb(180, 88, 49)
HSL
hsl(18, 57%, 45%)
HSB
hsb(18, 73%, 71%)
CMYK
cmyk(0%, 51%, 73%, 29%)
Oklch
oklch(56.6% 0.131 42.4)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#E1A978

Apricot · DarkSalmon · Warm Sun

HEX
#E1A978
RGB
rgb(225, 169, 120)
HSL
hsl(28, 64%, 68%)
HSB
hsb(28, 47%, 88%)
CMYK
cmyk(0%, 25%, 47%, 12%)
Oklch
oklch(77.6% 0.092 62.0)

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

#DCBE9C

Goose Yellow · Tan · Warm Sun

HEX
#DCBE9C
RGB
rgb(220, 190, 156)
HSL
hsl(32, 48%, 74%)
HSB
hsb(32, 29%, 86%)
CMYK
cmyk(0%, 14%, 29%, 14%)
Oklch
oklch(81.9% 0.057 70.4)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#D9D4D0

Apricot · LightGray · Peach Orange

HEX
#D9D4D0
RGB
rgb(217, 212, 208)
HSL
hsl(27, 11%, 83%)
HSB
hsb(27, 4%, 85%)
CMYK
cmyk(0%, 2%, 4%, 15%)
Oklch
oklch(87.3% 0.008 61.4)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#5EB0BB

Slate Blue · CadetBlue · Lake Green

HEX
#5EB0BB
RGB
rgb(94, 176, 187)
HSL
hsl(187, 41%, 55%)
HSB
hsb(187, 50%, 73%)
CMYK
cmyk(50%, 6%, 0%, 27%)
Oklch
oklch(71.0% 0.081 206.8)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B45831
318DB4

Analogous

B4314C
B45831
B49A31

Triadic

B45831
31B459
5931B4

Split-Comp.

B45831
31B49A
314CB4

Tetradic

B45831
4CB431
318DB4
9A31B4

Contrast Matrix WCAG 2.1 Contrast

B45831
E1A978
DCBE9C
D9D4D0
5EB0BB
—
2.3
Fail
2.7
Fail
3.3
AA Large
1.9
Fail
2.3
Fail
—
1.2
Fail
1.4
Fail
1.2
Fail
2.7
Fail
1.2
Fail
—
1.2
Fail
1.4
Fail
3.3
AA Large
1.4
Fail
1.2
Fail
—
1.7
Fail
1.9
Fail
1.2
Fail
1.4
Fail
1.7
Fail
—
White BG
4.8AA
2.1Fail
1.8Fail
1.5Fail
2.5Fail
Black BG
4.4AA Large
10.1AAA
11.9AAA
14.3AAA
8.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8C8B3A
C9C884
CFCFA4
D7D7D1
8282B8

Deuteranopia

92983D
CCD087
D1D3A6
D7D7D1
7D77B8

Tritanopia

AF4244
DE8D8F
DBABAC
D9D2D2
62B6B6

Achromatopsia

6F6F6F
B4B4B4
C3C3C3
D5D5D5
999999

Shades & Tints Shades & Tints

#B45831

Dark
Light

#E1A978

Dark
Light

#DCBE9C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b45831;
  --color-2: #e1a978;
  --color-3: #dcbe9c;
  --color-4: #d9d4d0;
  --color-5: #5eb0bb;
}

SCSS

$color-1: #b45831;
$color-2: #e1a978;
$color-3: #dcbe9c;
$color-4: #d9d4d0;
$color-5: #5eb0bb;

TAILWIND

colors: {
  'brand-1': '#b45831',
  'brand-2': '#e1a978',
  'brand-3': '#dcbe9c',
  'brand-4': '#d9d4d0',
  'brand-5': '#5eb0bb',
}

RGB Array

[180, 88, 49], [225, 169, 120], [220, 190, 156], [217, 212, 208], [94, 176, 187]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B45831, #E1A978, #DCBE9C, #D9D4D0, #5EB0BB 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: #b45831; --color-2: #e1a978; --color-3: #dcbe9c; --color-4: #d9d4d0; --color-5: #5eb0bb. 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