← Back to Editor

#BD5E3A · #DB8946 · #D9C171 · #DBD99E · #B6CFAE

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

#BD5E3A

Tangerine · Sienna · Amber Brown

HEX
#BD5E3A
RGB
rgb(189, 94, 58)
HSL
hsl(16, 53%, 48%)
HSB
hsb(16, 69%, 74%)
CMYK
cmyk(0%, 50%, 69%, 26%)
Oklch
oklch(59.0% 0.132 40.8)

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

#DB8946

Tangerine · Coral · Warm Sun

HEX
#DB8946
RGB
rgb(219, 137, 70)
HSL
hsl(27, 67%, 57%)
HSB
hsb(27, 68%, 86%)
CMYK
cmyk(0%, 37%, 68%, 14%)
Oklch
oklch(70.3% 0.130 57.6)

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

#D9C171

Ginger · BurlyWood · Sunflower

HEX
#D9C171
RGB
rgb(217, 193, 113)
HSL
hsl(46, 58%, 65%)
HSB
hsb(46, 48%, 85%)
CMYK
cmyk(0%, 11%, 48%, 15%)
Oklch
oklch(81.4% 0.104 93.2)

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

#DBD99E

Fresh Green · Khaki · Sunflower

HEX
#DBD99E
RGB
rgb(219, 217, 158)
HSL
hsl(58, 46%, 74%)
HSB
hsb(58, 28%, 86%)
CMYK
cmyk(0%, 1%, 28%, 14%)
Oklch
oklch(87.3% 0.077 106.3)

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

#B6CFAE

Celadon · Silver · Apple Green

HEX
#B6CFAE
RGB
rgb(182, 207, 174)
HSL
hsl(105, 26%, 75%)
HSB
hsb(105, 16%, 81%)
CMYK
cmyk(12%, 0%, 16%, 19%)
Oklch
oklch(82.7% 0.053 138.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BD5E3A
3A99BB

Analogous

BB3A58
BD5E3A
BB9D3A

Triadic

BD5E3A
3ABB5C
5C3ABB

Split-Comp.

BD5E3A
3ABB9D
3A58BB

Tetradic

BD5E3A
58BB3A
3A99BB
9D3ABB

Contrast Matrix WCAG 2.1 Contrast

BD5E3A
DB8946
D9C171
DBD99E
B6CFAE
—
1.6
Fail
2.4
Fail
3.0
Fail
2.6
Fail
1.6
Fail
—
1.5
Fail
1.9
Fail
1.6
Fail
2.4
Fail
1.5
Fail
—
1.2
Fail
1.1
Fail
3.0
Fail
1.9
Fail
1.2
Fail
—
1.2
Fail
2.6
Fail
1.6
Fail
1.1
Fail
1.2
Fail
—
White BG
4.4AA Large
2.7Fail
1.8Fail
1.5Fail
1.7Fail
Black BG
4.8AA
7.7AAA
11.8AAA
14.4AAA
12.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

949343
B7B756
CFCE84
DADAAC
C1C1B6

Deuteranopia

99A045
BCC25A
D0D289
DADAB0
BFBEB8

Tritanopia

B84A4B
D76366
D89497
DBB8BA
B7BCBE

Achromatopsia

767676
9A9A9A
BFBFBF
D3D3D3
C4C4C4

Shades & Tints Shades & Tints

#BD5E3A

Dark
Light

#DB8946

Dark
Light

#D9C171

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bd5e3a;
  --color-2: #db8946;
  --color-3: #d9c171;
  --color-4: #dbd99e;
  --color-5: #b6cfae;
}

SCSS

$color-1: #bd5e3a;
$color-2: #db8946;
$color-3: #d9c171;
$color-4: #dbd99e;
$color-5: #b6cfae;

TAILWIND

colors: {
  'brand-1': '#bd5e3a',
  'brand-2': '#db8946',
  'brand-3': '#d9c171',
  'brand-4': '#dbd99e',
  'brand-5': '#b6cfae',
}

RGB Array

[189, 94, 58], [219, 137, 70], [217, 193, 113], [219, 217, 158], [182, 207, 174]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BD5E3A, #DB8946, #D9C171, #DBD99E, #B6CFAE 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: #bd5e3a; --color-2: #db8946; --color-3: #d9c171; --color-4: #dbd99e; --color-5: #b6cfae. 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