← Back to Editor

#C8B391 · #BC9786 · #C77356 · #C64C45 · #800F30

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

#C8B391

Ginger · Tan · Warm Sun

HEX
#C8B391
RGB
rgb(200, 179, 145)
HSL
hsl(37, 33%, 68%)
HSB
hsb(37, 28%, 78%)
CMYK
cmyk(0%, 11%, 28%, 22%)
Oklch
oklch(77.6% 0.052 79.7)

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

#BC9786

Apricot · Tan · Warm Sun

HEX
#BC9786
RGB
rgb(188, 151, 134)
HSL
hsl(19, 29%, 63%)
HSB
hsb(19, 29%, 74%)
CMYK
cmyk(0%, 20%, 29%, 26%)
Oklch
oklch(70.6% 0.051 46.0)

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

#C77356

Tangerine · Coral · Warm Sun

HEX
#C77356
RGB
rgb(199, 115, 86)
HSL
hsl(15, 50%, 56%)
HSB
hsb(15, 57%, 78%)
CMYK
cmyk(0%, 42%, 57%, 22%)
Oklch
oklch(64.2% 0.114 39.7)

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

#C64C45

Crimson · Sienna · Passion Red

HEX
#C64C45
RGB
rgb(198, 76, 69)
HSL
hsl(3, 53%, 52%)
HSB
hsb(3, 65%, 78%)
CMYK
cmyk(0%, 62%, 65%, 22%)
Oklch
oklch(57.9% 0.157 26.4)

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

#800F30

Dark Violet · Brown · Camellia

HEX
#800F30
RGB
rgb(128, 15, 48)
HSL
hsl(342, 79%, 28%)
HSB
hsb(342, 88%, 50%)
CMYK
cmyk(0%, 88%, 63%, 50%)
Oklch
oklch(39.1% 0.145 11.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C8B391
92A7C8

Analogous

C89992
C8B391
C2C892

Triadic

C8B391
92C8B4
B492C8

Split-Comp.

C8B391
92C2C8
9992C8

Tetradic

C8B391
92C899
92A7C8
C892C2

Contrast Matrix WCAG 2.1 Contrast

C8B391
BC9786
C77356
C64C45
800F30
—
1.3
Fail
1.7
Fail
2.3
Fail
5.1
AA
1.3
Fail
—
1.3
Fail
1.7
Fail
3.9
AA Large
1.7
Fail
1.3
Fail
—
1.3
Fail
3.0
Fail
2.3
Fail
1.7
Fail
1.3
Fail
—
2.2
Fail
5.1
AA
3.9
AA Large
3.0
Fail
2.2
Fail
—
White BG
2.0Fail
2.7Fail
3.5AA Large
4.6AA
10.4AAA
Black BG
10.3AAA
7.9AAA
6.0AA
4.5AA
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBF99
ACAC8A
A3A25D
919047
4F4E28

Deuteranopia

C0C29B
AEB18B
A8AE5F
98A147
565E26

Tritanopia

C7A0A1
BA8D8E
C36364
C04848
7A2220

Achromatopsia

B5B5B5
A0A0A0
898989
707070
353535

Shades & Tints Shades & Tints

#C8B391

Dark
Light

#BC9786

Dark
Light

#C77356

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c8b391;
  --color-2: #bc9786;
  --color-3: #c77356;
  --color-4: #c64c45;
  --color-5: #800f30;
}

SCSS

$color-1: #c8b391;
$color-2: #bc9786;
$color-3: #c77356;
$color-4: #c64c45;
$color-5: #800f30;

TAILWIND

colors: {
  'brand-1': '#c8b391',
  'brand-2': '#bc9786',
  'brand-3': '#c77356',
  'brand-4': '#c64c45',
  'brand-5': '#800f30',
}

RGB Array

[200, 179, 145], [188, 151, 134], [199, 115, 86], [198, 76, 69], [128, 15, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C8B391, #BC9786, #C77356, #C64C45, #800F30 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: #c8b391; --color-2: #bc9786; --color-3: #c77356; --color-4: #c64c45; --color-5: #800f30. 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