← Back to Editor

#BD4E07 · #C46D42 · #C08A4A · #CE8A97 · #D5B8AA

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

#BD4E07

Tangerine · Chocolate · Amber Brown

HEX
#BD4E07
RGB
rgb(189, 78, 7)
HSL
hsl(23, 93%, 38%)
HSB
hsb(23, 96%, 74%)
CMYK
cmyk(0%, 59%, 96%, 26%)
Oklch
oklch(56.2% 0.159 44.7)

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

#C46D42

Tangerine · Chocolate · Warm Sun

HEX
#C46D42
RGB
rgb(196, 109, 66)
HSL
hsl(20, 52%, 51%)
HSB
hsb(20, 66%, 77%)
CMYK
cmyk(0%, 44%, 66%, 23%)
Oklch
oklch(62.5% 0.125 45.9)

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

#C08A4A

Ginger · GoldenRod · Warm Sun

HEX
#C08A4A
RGB
rgb(192, 138, 74)
HSL
hsl(33, 48%, 52%)
HSB
hsb(33, 61%, 75%)
CMYK
cmyk(0%, 28%, 61%, 25%)
Oklch
oklch(67.4% 0.104 69.1)

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

#CE8A97

Peach Pink · DarkSalmon · Coral Red

HEX
#CE8A97
RGB
rgb(206, 138, 151)
HSL
hsl(349, 41%, 67%)
HSB
hsb(349, 33%, 81%)
CMYK
cmyk(0%, 33%, 27%, 19%)
Oklch
oklch(70.5% 0.085 6.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#D5B8AA

Apricot · Tan · Warm Sun

HEX
#D5B8AA
RGB
rgb(213, 184, 170)
HSL
hsl(20, 34%, 75%)
HSB
hsb(20, 20%, 84%)
CMYK
cmyk(0%, 14%, 20%, 16%)
Oklch
oklch(80.4% 0.039 47.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BD4E07
0776BB

Analogous

BB071C
BD4E07
BBA607

Triadic

BD4E07
07BB4C
4C07BB

Split-Comp.

BD4E07
07BBA6
071CBB

Tetradic

BD4E07
1CBB07
0776BB
A607BB

Contrast Matrix WCAG 2.1 Contrast

BD4E07
C46D42
C08A4A
CE8A97
D5B8AA
—
1.3
Fail
1.6
Fail
1.8
Fail
2.6
Fail
1.3
Fail
—
1.2
Fail
1.4
Fail
2.0
Fail
1.6
Fail
1.2
Fail
—
1.1
Fail
1.6
Fail
1.8
Fail
1.4
Fail
1.1
Fail
—
1.5
Fail
2.6
Fail
2.0
Fail
1.6
Fail
1.5
Fail
—
White BG
4.9AA
3.7AA Large
3.0AA Large
2.7Fail
1.9Fail
Black BG
4.3AA Large
5.6AA
7.0AA
7.7AAA
11.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8D8C18
9E9E4C
A9A859
B1B094
C8C8AD

Deuteranopia

939C1C
A3AA4F
ACB05D
B5BA93
CACCAE

Tritanopia

B72629
C05556
BD6668
CB9191
D4B0B1

Achromatopsia

676767
828282
939393
A0A0A0
BFBFBF

Shades & Tints Shades & Tints

#BD4E07

Dark
Light

#C46D42

Dark
Light

#C08A4A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bd4e07;
  --color-2: #c46d42;
  --color-3: #c08a4a;
  --color-4: #ce8a97;
  --color-5: #d5b8aa;
}

SCSS

$color-1: #bd4e07;
$color-2: #c46d42;
$color-3: #c08a4a;
$color-4: #ce8a97;
$color-5: #d5b8aa;

TAILWIND

colors: {
  'brand-1': '#bd4e07',
  'brand-2': '#c46d42',
  'brand-3': '#c08a4a',
  'brand-4': '#ce8a97',
  'brand-5': '#d5b8aa',
}

RGB Array

[189, 78, 7], [196, 109, 66], [192, 138, 74], [206, 138, 151], [213, 184, 170]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BD4E07, #C46D42, #C08A4A, #CE8A97, #D5B8AA 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: #bd4e07; --color-2: #c46d42; --color-3: #c08a4a; --color-4: #ce8a97; --color-5: #d5b8aa. 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