← Back to Editor

#BFBE61 · #BEA373 · #C84252 · #724A5B · #41392B

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

#BFBE61

Autumn Sage · Tan · Sunflower

HEX
#BFBE61
RGB
rgb(191, 190, 97)
HSL
hsl(59, 42%, 56%)
HSB
hsb(59, 49%, 75%)
CMYK
cmyk(0%, 1%, 49%, 25%)
Oklch
oklch(78.3% 0.116 108.3)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#BEA373

Ginger · Tan · Warm Sun

HEX
#BEA373
RGB
rgb(190, 163, 115)
HSL
hsl(38, 37%, 60%)
HSB
hsb(38, 39%, 75%)
CMYK
cmyk(0%, 14%, 39%, 25%)
Oklch
oklch(72.8% 0.072 81.5)

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

#C84252

Crimson · Crimson · Passion Red

HEX
#C84252
RGB
rgb(200, 66, 82)
HSL
hsl(353, 55%, 52%)
HSB
hsb(353, 67%, 78%)
CMYK
cmyk(0%, 67%, 59%, 22%)
Oklch
oklch(57.3% 0.169 17.5)

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

#724A5B

Dark Violet · DimGray · Camellia

HEX
#724A5B
RGB
rgb(114, 74, 91)
HSL
hsl(335, 21%, 37%)
HSB
hsb(335, 35%, 45%)
CMYK
cmyk(0%, 35%, 20%, 55%)
Oklch
oklch(46.0% 0.059 352.6)

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

#41392B

Ochre · DarkSlateGray · Cinnamon

HEX
#41392B
RGB
rgb(65, 57, 43)
HSL
hsl(38, 20%, 21%)
HSB
hsb(38, 34%, 25%)
CMYK
cmyk(0%, 12%, 34%, 75%)
Oklch
oklch(34.9% 0.026 81.5)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BFBE61
6061BE

Analogous

BE8D60
BFBE61
90BE60

Triadic

BFBE61
60BEBC
BC60BE

Split-Comp.

BFBE61
6090BE
8D60BE

Tetradic

BFBE61
60BE8D
6061BE
BE6090

Contrast Matrix WCAG 2.1 Contrast

BFBE61
BEA373
C84252
724A5B
41392B
—
1.2
Fail
2.5
Fail
3.8
AA Large
5.8
AA
1.2
Fail
—
2.0
Fail
3.0
AA Large
4.7
AA
2.5
Fail
2.0
Fail
—
1.5
Fail
2.4
Fail
3.8
AA Large
3.0
AA Large
1.5
Fail
—
1.5
Fail
5.8
AA
4.7
AA
2.4
Fail
1.5
Fail
—
White BG
2.0Fail
2.4Fail
4.8AA
7.4AAA
11.4AAA
Black BG
10.8AAA
8.7AAA
4.4AA Large
2.8Fail
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBF78
B2B27F
8E8D4E
616057
3E3D2E

Deuteranopia

BFBF7D
B4B681
96A04D
636656
3E3F2F

Tritanopia

BF898D
BD888A
C14B4A
705453
413132

Achromatopsia

B4B4B4
A6A6A6
6C6C6C
585858
3A3A3A

Shades & Tints Shades & Tints

#BFBE61

Dark
Light

#BEA373

Dark
Light

#C84252

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bfbe61;
  --color-2: #bea373;
  --color-3: #c84252;
  --color-4: #724a5b;
  --color-5: #41392b;
}

SCSS

$color-1: #bfbe61;
$color-2: #bea373;
$color-3: #c84252;
$color-4: #724a5b;
$color-5: #41392b;

TAILWIND

colors: {
  'brand-1': '#bfbe61',
  'brand-2': '#bea373',
  'brand-3': '#c84252',
  'brand-4': '#724a5b',
  'brand-5': '#41392b',
}

RGB Array

[191, 190, 97], [190, 163, 115], [200, 66, 82], [114, 74, 91], [65, 57, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BFBE61, #BEA373, #C84252, #724A5B, #41392B 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: #bfbe61; --color-2: #bea373; --color-3: #c84252; --color-4: #724a5b; --color-5: #41392b. 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