← Back to Editor

#B47774 · #49463D · #738C77 · #A9B087 · #D1C87B

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

#B47774

Crimson · Gray · Passion Red

HEX
#B47774
RGB
rgb(180, 119, 116)
HSL
hsl(3, 30%, 58%)
HSB
hsb(3, 36%, 71%)
CMYK
cmyk(0%, 34%, 36%, 29%)
Oklch
oklch(63.2% 0.077 22.6)

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

#49463D

Ochre · DarkSlateGray · Charcoal

HEX
#49463D
RGB
rgb(73, 70, 61)
HSL
hsl(45, 9%, 26%)
HSB
hsb(45, 16%, 29%)
CMYK
cmyk(0%, 4%, 16%, 71%)
Oklch
oklch(39.4% 0.015 91.7)

Traditional「Ochre」· Paint「Charcoal」· Creative Midnight Shadow

#738C77

Celadon · Gray · Olive Green

HEX
#738C77
RGB
rgb(115, 140, 119)
HSL
hsl(130, 10%, 50%)
HSB
hsb(130, 18%, 55%)
CMYK
cmyk(18%, 0%, 15%, 45%)
Oklch
oklch(61.4% 0.042 149.6)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#A9B087

Willow Green · DarkSeaGreen · Apple Green

HEX
#A9B087
RGB
rgb(169, 176, 135)
HSL
hsl(70, 21%, 61%)
HSB
hsb(70, 23%, 69%)
CMYK
cmyk(4%, 0%, 23%, 31%)
Oklch
oklch(74.1% 0.057 115.7)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#D1C87B

Fresh Green · BurlyWood · Sunflower

HEX
#D1C87B
RGB
rgb(209, 200, 123)
HSL
hsl(54, 48%, 65%)
HSB
hsb(54, 41%, 82%)
CMYK
cmyk(0%, 4%, 41%, 18%)
Oklch
oklch(82.3% 0.099 102.5)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B47774
74B1B4

Analogous

B47491
B47774
B49774

Triadic

B47774
74B477
7774B4

Split-Comp.

B47774
74B497
7491B4

Tetradic

B47774
91B474
74B1B4
9774B4

Contrast Matrix WCAG 2.1 Contrast

B47774
49463D
738C77
A9B087
D1C87B
—
2.6
Fail
1.0
Fail
1.6
Fail
2.1
Fail
2.6
Fail
—
2.6
Fail
4.2
AA Large
5.5
AA
1.0
Fail
2.6
Fail
—
1.6
Fail
2.1
Fail
1.6
Fail
4.2
AA Large
1.6
Fail
—
1.3
Fail
2.1
Fail
5.5
AA
2.1
Fail
1.3
Fail
—
White BG
3.6AA Large
9.4AAA
3.7AA Large
2.3Fail
1.7Fail
Black BG
5.8AA
2.2Fail
5.7AA
9.2AAA
12.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9A9975
48483F
7E7E7C
ACAC91
CDCD8E

Deuteranopia

9DA275
484840
7C7B7D
ACAB93
CECE92

Tritanopia

B17575
494141
748081
A9999A
D19CA0

Achromatopsia

898989
464646
828282
A9A9A9
C2C2C2

Shades & Tints Shades & Tints

#B47774

Dark
Light

#49463D

Dark
Light

#738C77

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b47774;
  --color-2: #49463d;
  --color-3: #738c77;
  --color-4: #a9b087;
  --color-5: #d1c87b;
}

SCSS

$color-1: #b47774;
$color-2: #49463d;
$color-3: #738c77;
$color-4: #a9b087;
$color-5: #d1c87b;

TAILWIND

colors: {
  'brand-1': '#b47774',
  'brand-2': '#49463d',
  'brand-3': '#738c77',
  'brand-4': '#a9b087',
  'brand-5': '#d1c87b',
}

RGB Array

[180, 119, 116], [73, 70, 61], [115, 140, 119], [169, 176, 135], [209, 200, 123]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B47774, #49463D, #738C77, #A9B087, #D1C87B 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: #b47774; --color-2: #49463d; --color-3: #738c77; --color-4: #a9b087; --color-5: #d1c87b. 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