#BFB987 + #F2401C + #825C45 + #6A6E57 + #61786E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#BFB987

Fresh Green · Tan · Sunflower

HEX

#BFB987

RGB

rgb(191, 185, 135)

HSL

hsl(54, 30%, 64%)

HSB

hsb(54, 29%, 75%)

CMYK

cmyk(0%, 3%, 29%, 25%)

Oklch

oklch(77.8% 0.067 102.0)

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

#F2401C

Vermilion · OrangeRed · Passion Red

HEX

#F2401C

RGB

rgb(242, 64, 28)

HSL

hsl(10, 89%, 53%)

HSB

hsb(10, 88%, 95%)

CMYK

cmyk(0%, 74%, 88%, 5%)

Oklch

oklch(63.5% 0.219 32.9)

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

#825C45

Tangerine · Sienna · Amber Brown

HEX

#825C45

RGB

rgb(130, 92, 69)

HSL

hsl(23, 31%, 39%)

HSB

hsb(23, 47%, 51%)

CMYK

cmyk(0%, 29%, 47%, 49%)

Oklch

oklch(50.9% 0.061 52.1)

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

#6A6E57

Grass Green · DimGray · Forest Green

HEX

#6A6E57

RGB

rgb(106, 110, 87)

HSL

hsl(70, 12%, 39%)

HSB

hsb(70, 21%, 43%)

CMYK

cmyk(4%, 0%, 21%, 57%)

Oklch

oklch(52.8% 0.035 115.6)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

#61786E

Mineral Blue · DimGray · Olive Green

HEX

#61786E

RGB

rgb(97, 120, 110)

HSL

hsl(154, 11%, 43%)

HSB

hsb(154, 19%, 47%)

CMYK

cmyk(19%, 0%, 8%, 53%)

Oklch

oklch(55.1% 0.031 167.0)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BFB987

888DBF

Analogous

BF9E88

BFB987

A9BF88

Triadic

BFB987

88BFB9

B988BF

Split-Comp.

BFB987

88A9BF

9E88BF

Tetradic

BFB987

88BF9E

888DBF

BF88A9

Contrast Matrix WCAG 2.1 Contrast

BFB987	F2401C	825C45	6A6E57	61786E
—	1.9 Fail	2.9 Fail	2.6 Fail	2.4 Fail
1.9 Fail	—	1.5 Fail	1.4 Fail	1.3 Fail
2.9 Fail	1.5 Fail	—	1.1 Fail	1.2 Fail
2.6 Fail	1.4 Fail	1.1 Fail	—	1.1 Fail
2.4 Fail	1.3 Fail	1.2 Fail	1.1 Fail	—

White BG

2.0Fail

3.8AA Large

5.9AA

5.3AA

4.8AA

Black BG

10.5AAA

5.5AA

3.6AA Large

4.0AA Large

4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

BCBC93

A5A325

72714B

6C6C5D

6B6B70

Deuteranopia

BDBD96

AFBD27

74774C

6C6B5E

6A6871

Tritanopia

BF9D9F

E92C2D

804F50

6A6162

627273

Achromatopsia

B5B5B5

717171

656565

6A6A6A

707070

Shades & Tints Shades & Tints

#BFB987

Dark

Light

#F2401C

Dark

Light

#825C45

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bfb987;
  --color-2: #f2401c;
  --color-3: #825c45;
  --color-4: #6a6e57;
  --color-5: #61786e;
}

SCSS

$color-1: #bfb987;
$color-2: #f2401c;
$color-3: #825c45;
$color-4: #6a6e57;
$color-5: #61786e;

TAILWIND

colors: {
  'brand-1': '#bfb987',
  'brand-2': '#f2401c',
  'brand-3': '#825c45',
  'brand-4': '#6a6e57',
  'brand-5': '#61786e',
}

RGB Array

[191, 185, 135], [242, 64, 28], [130, 92, 69], [106, 110, 87], [97, 120, 110]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BFB987, #F2401C, #825C45, #6A6E57, #61786E 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: #bfb987; --color-2: #f2401c; --color-3: #825c45; --color-4: #6a6e57; --color-5: #61786e. 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