← Back to Editor

#BFB777 · #A1B33E · #C48C31 · #E05E2B · #B8567D

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

#BFB777

Fresh Green · Tan · Sunflower

HEX
#BFB777
RGB
rgb(191, 183, 119)
HSL
hsl(53, 36%, 61%)
HSB
hsb(53, 38%, 75%)
CMYK
cmyk(0%, 4%, 38%, 25%)
Oklch
oklch(77.1% 0.084 102.0)

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

#A1B33E

Autumn Sage · GoldenRod · Honey Gold

HEX
#A1B33E
RGB
rgb(161, 179, 62)
HSL
hsl(69, 49%, 47%)
HSB
hsb(69, 65%, 70%)
CMYK
cmyk(10%, 0%, 65%, 30%)
Oklch
oklch(73.0% 0.142 117.5)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#C48C31

Ochre · GoldenRod · Amber Brown

HEX
#C48C31
RGB
rgb(196, 140, 49)
HSL
hsl(37, 60%, 48%)
HSB
hsb(37, 75%, 77%)
CMYK
cmyk(0%, 29%, 75%, 23%)
Oklch
oklch(67.9% 0.124 75.4)

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

#E05E2B

Tangerine · Chocolate · Warm Sun

HEX
#E05E2B
RGB
rgb(224, 94, 43)
HSL
hsl(17, 74%, 52%)
HSB
hsb(17, 81%, 88%)
CMYK
cmyk(0%, 58%, 81%, 12%)
Oklch
oklch(64.0% 0.174 40.1)

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

#B8567D

Dark Violet · MediumVioletRed · Rose Pink

HEX
#B8567D
RGB
rgb(184, 86, 125)
HSL
hsl(336, 41%, 53%)
HSB
hsb(336, 53%, 72%)
CMYK
cmyk(0%, 53%, 32%, 28%)
Oklch
oklch(58.5% 0.133 357.0)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BFB777
7880BF

Analogous

BF9378
BFB777
A4BF78

Triadic

BFB777
78BFB7
B778BF

Split-Comp.

BFB777
78A4BF
9378BF

Tetradic

BFB777
78BF93
7880BF
BF78A4

Contrast Matrix WCAG 2.1 Contrast

BFB777
A1B33E
C48C31
E05E2B
B8567D
—
1.1
Fail
1.4
Fail
1.8
Fail
2.2
Fail
1.1
Fail
—
1.3
Fail
1.6
Fail
1.9
Fail
1.4
Fail
1.3
Fail
—
1.2
Fail
1.5
Fail
1.8
Fail
1.6
Fail
1.2
Fail
—
1.2
Fail
2.2
Fail
1.9
Fail
1.5
Fail
1.2
Fail
—
White BG
2.0Fail
2.3Fail
2.9Fail
3.6AA Large
4.5AA
Black BG
10.3AAA
9.0AAA
7.1AAA
5.8AA
4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BCBB86
A9A95A
ACAB47
A8A737
8E8D74

Deuteranopia

BCBD8A
A8A661
AFB34C
AFB93A
939B71

Tritanopia

BF9395
A27176
C1585C
D94143
B36C6A

Achromatopsia

B2B2B2
A0A0A0
929292
7F7F7F
787878

Shades & Tints Shades & Tints

#BFB777

Dark
Light

#A1B33E

Dark
Light

#C48C31

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bfb777;
  --color-2: #a1b33e;
  --color-3: #c48c31;
  --color-4: #e05e2b;
  --color-5: #b8567d;
}

SCSS

$color-1: #bfb777;
$color-2: #a1b33e;
$color-3: #c48c31;
$color-4: #e05e2b;
$color-5: #b8567d;

TAILWIND

colors: {
  'brand-1': '#bfb777',
  'brand-2': '#a1b33e',
  'brand-3': '#c48c31',
  'brand-4': '#e05e2b',
  'brand-5': '#b8567d',
}

RGB Array

[191, 183, 119], [161, 179, 62], [196, 140, 49], [224, 94, 43], [184, 86, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BFB777, #A1B33E, #C48C31, #E05E2B, #B8567D 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: #bfb777; --color-2: #a1b33e; --color-3: #c48c31; --color-4: #e05e2b; --color-5: #b8567d. 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