← Back to Editor

#5B443C · #E7BC5D · #ECA675 · #CA8D9F · #C19CAE

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

#5B443C

Tangerine · DarkOliveGreen · Amber Brown

HEX
#5B443C
RGB
rgb(91, 68, 60)
HSL
hsl(15, 21%, 30%)
HSB
hsb(15, 34%, 36%)
CMYK
cmyk(0%, 25%, 34%, 64%)
Oklch
oklch(40.9% 0.035 40.0)

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

#E7BC5D

Ginger · SandyBrown · Sunflower

HEX
#E7BC5D
RGB
rgb(231, 188, 93)
HSL
hsl(41, 74%, 64%)
HSB
hsb(41, 60%, 91%)
CMYK
cmyk(0%, 19%, 60%, 9%)
Oklch
oklch(81.5% 0.123 85.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#ECA675

Apricot · DarkSalmon · Warm Sun

HEX
#ECA675
RGB
rgb(236, 166, 117)
HSL
hsl(25, 76%, 69%)
HSB
hsb(25, 50%, 93%)
CMYK
cmyk(0%, 30%, 50%, 7%)
Oklch
oklch(78.2% 0.105 55.5)

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

#CA8D9F

Rouge · Tan · Rose Pink

HEX
#CA8D9F
RGB
rgb(202, 141, 159)
HSL
hsl(342, 37%, 67%)
HSB
hsb(342, 30%, 79%)
CMYK
cmyk(0%, 30%, 21%, 21%)
Oklch
oklch(70.9% 0.077 360.0)

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

#C19CAE

Rouge · DarkGray · Rose Pink

HEX
#C19CAE
RGB
rgb(193, 156, 174)
HSL
hsl(331, 23%, 68%)
HSB
hsb(331, 19%, 76%)
CMYK
cmyk(0%, 19%, 10%, 24%)
Oklch
oklch(73.2% 0.050 347.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5B443C
3C555D

Analogous

5D3C44
5B443C
5D553C

Triadic

5B443C
3C5D44
443C5D

Split-Comp.

5B443C
3C5D55
3C445D

Tetradic

5B443C
445D3C
3C555D
553C5D

Contrast Matrix WCAG 2.1 Contrast

5B443C
E7BC5D
ECA675
CA8D9F
C19CAE
—
5.0
AA
4.4
AA Large
3.3
AA Large
3.7
AA Large
5.0
AA
—
1.1
Fail
1.5
Fail
1.4
Fail
4.4
AA Large
1.1
Fail
—
1.3
Fail
1.2
Fail
3.3
AA Large
1.5
Fail
1.3
Fail
—
1.1
Fail
3.7
AA Large
1.4
Fail
1.2
Fail
1.1
Fail
—
White BG
9.0AAA
1.8Fail
2.0Fail
2.7Fail
2.4Fail
Black BG
2.3Fail
11.7AAA
10.3AAA
7.8AAA
8.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

51513E
D4D474
CECD81
B0AF9B
B1B1AA

Deuteranopia

52543E
D7DA7A
D2D784
B3B89A
B3B6A9

Tritanopia

5A3F40
E5868A
E98A8C
C79796
BFA6A5

Achromatopsia

4A4A4A
BEBEBE
B5B5B5
A1A1A1
A9A9A9

Shades & Tints Shades & Tints

#5B443C

Dark
Light

#E7BC5D

Dark
Light

#ECA675

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5b443c;
  --color-2: #e7bc5d;
  --color-3: #eca675;
  --color-4: #ca8d9f;
  --color-5: #c19cae;
}

SCSS

$color-1: #5b443c;
$color-2: #e7bc5d;
$color-3: #eca675;
$color-4: #ca8d9f;
$color-5: #c19cae;

TAILWIND

colors: {
  'brand-1': '#5b443c',
  'brand-2': '#e7bc5d',
  'brand-3': '#eca675',
  'brand-4': '#ca8d9f',
  'brand-5': '#c19cae',
}

RGB Array

[91, 68, 60], [231, 188, 93], [236, 166, 117], [202, 141, 159], [193, 156, 174]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5B443C, #E7BC5D, #ECA675, #CA8D9F, #C19CAE 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: #5b443c; --color-2: #e7bc5d; --color-3: #eca675; --color-4: #ca8d9f; --color-5: #c19cae. 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