← Back to Editor

#B4A275 · #C0886F · #B55858 · #7B505F · #4E394D

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

#B4A275

Ginger · Tan · Sunflower

HEX
#B4A275
RGB
rgb(180, 162, 117)
HSL
hsl(43, 30%, 58%)
HSB
hsb(43, 35%, 71%)
CMYK
cmyk(0%, 10%, 35%, 29%)
Oklch
oklch(71.7% 0.064 88.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#C0886F

Tangerine · DarkSalmon · Warm Sun

HEX
#C0886F
RGB
rgb(192, 136, 111)
HSL
hsl(19, 39%, 59%)
HSB
hsb(19, 42%, 75%)
CMYK
cmyk(0%, 29%, 42%, 25%)
Oklch
oklch(67.6% 0.078 45.0)

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

#B55858

Crimson · Sienna · Passion Red

HEX
#B55858
RGB
rgb(181, 88, 88)
HSL
hsl(0, 39%, 53%)
HSB
hsb(0, 51%, 71%)
CMYK
cmyk(0%, 51%, 51%, 29%)
Oklch
oklch(57.4% 0.121 21.6)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#7B505F

Dark Violet · DimGray · Camellia

HEX
#7B505F
RGB
rgb(123, 80, 95)
HSL
hsl(339, 21%, 40%)
HSB
hsb(339, 35%, 48%)
CMYK
cmyk(0%, 35%, 23%, 52%)
Oklch
oklch(48.4% 0.061 357.1)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#4E394D

Rose Purple · DarkSlateGray · Eggplant

HEX
#4E394D
RGB
rgb(78, 57, 77)
HSL
hsl(303, 16%, 26%)
HSB
hsb(303, 27%, 31%)
CMYK
cmyk(0%, 27%, 1%, 69%)
Oklch
oklch(37.6% 0.044 328.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B4A275
7486B4

Analogous

B48274
B4A275
A6B474

Triadic

B4A275
74B4A2
A274B4

Split-Comp.

B4A275
74A6B4
8274B4

Tetradic

B4A275
74B482
7486B4
B474A6

Contrast Matrix WCAG 2.1 Contrast

B4A275
C0886F
B55858
7B505F
4E394D
—
1.2
Fail
1.9
Fail
2.7
Fail
4.1
AA Large
1.2
Fail
—
1.6
Fail
2.2
Fail
3.5
AA Large
1.9
Fail
1.6
Fail
—
1.4
Fail
2.2
Fail
2.7
Fail
2.2
Fail
1.4
Fail
—
1.6
Fail
4.1
AA Large
3.5
AA Large
2.2
Fail
1.6
Fail
—
White BG
2.5Fail
3.0AA Large
4.7AA
6.7AA
10.4AAA
Black BG
8.4AAA
7.0AA
4.5AA
3.2AA Large
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

ACAC80
A8A775
8D8C58
68685B
454548

Deuteranopia

ADAF83
ABAF76
929958
6B6E5B
464847

Tritanopia

B3888A
BD7A7B
B05858
795958
4D4444

Achromatopsia

A2A2A2
969696
747474
5F5F5F
424242

Shades & Tints Shades & Tints

#B4A275

Dark
Light

#C0886F

Dark
Light

#B55858

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b4a275;
  --color-2: #c0886f;
  --color-3: #b55858;
  --color-4: #7b505f;
  --color-5: #4e394d;
}

SCSS

$color-1: #b4a275;
$color-2: #c0886f;
$color-3: #b55858;
$color-4: #7b505f;
$color-5: #4e394d;

TAILWIND

colors: {
  'brand-1': '#b4a275',
  'brand-2': '#c0886f',
  'brand-3': '#b55858',
  'brand-4': '#7b505f',
  'brand-5': '#4e394d',
}

RGB Array

[180, 162, 117], [192, 136, 111], [181, 88, 88], [123, 80, 95], [78, 57, 77]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B4A275, #C0886F, #B55858, #7B505F, #4E394D is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #b4a275; --color-2: #c0886f; --color-3: #b55858; --color-4: #7b505f; --color-5: #4e394d. 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. Restrained colors convey professionalism and trust. 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