← Back to Editor

#BFA279 · #BC1A29 · #F7F3A3 · #BBCC71 · #919E5B

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

#BFA279

Ginger · Tan · Warm Sun

HEX
#BFA279
RGB
rgb(191, 162, 121)
HSL
hsl(35, 35%, 61%)
HSB
hsb(35, 37%, 75%)
CMYK
cmyk(0%, 15%, 37%, 25%)
Oklch
oklch(72.8% 0.065 76.0)

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

#BC1A29

Vermilion · FireBrick · Passion Red

HEX
#BC1A29
RGB
rgb(188, 26, 41)
HSL
hsl(354, 76%, 42%)
HSB
hsb(354, 86%, 74%)
CMYK
cmyk(0%, 86%, 78%, 26%)
Oklch
oklch(51.1% 0.193 24.0)

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

#F7F3A3

Fresh Green · Wheat · Lemon Cream

HEX
#F7F3A3
RGB
rgb(247, 243, 163)
HSL
hsl(57, 84%, 80%)
HSB
hsb(57, 34%, 97%)
CMYK
cmyk(0%, 2%, 34%, 3%)
Oklch
oklch(94.9% 0.100 105.7)

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

#BBCC71

Willow Green · Tan · Apple Green

HEX
#BBCC71
RGB
rgb(187, 204, 113)
HSL
hsl(71, 47%, 62%)
HSB
hsb(71, 45%, 80%)
CMYK
cmyk(8%, 0%, 45%, 20%)
Oklch
oklch(81.2% 0.118 117.8)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#919E5B

Grass Green · Gray · Olive Green

HEX
#919E5B
RGB
rgb(145, 158, 91)
HSL
hsl(72, 27%, 49%)
HSB
hsb(72, 42%, 62%)
CMYK
cmyk(8%, 0%, 42%, 38%)
Oklch
oklch(67.3% 0.092 117.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BFA279
7996BE

Analogous

BE7F79
BFA279
B9BE79

Triadic

BFA279
79BEA1
A179BE

Split-Comp.

BFA279
79B9BE
7F79BE

Tetradic

BFA279
79BE7F
7996BE
BE79B9

Contrast Matrix WCAG 2.1 Contrast

BFA279
BC1A29
F7F3A3
BBCC71
919E5B
—
2.6
Fail
2.1
Fail
1.4
Fail
1.2
Fail
2.6
Fail
—
5.5
AA
3.6
AA Large
2.2
Fail
2.1
Fail
5.5
AA
—
1.5
Fail
2.5
Fail
1.4
Fail
3.6
AA Large
1.5
Fail
—
1.7
Fail
1.2
Fail
2.2
Fail
2.5
Fail
1.7
Fail
—
White BG
2.4Fail
6.3AA
1.1Fail
1.8Fail
2.9Fail
Black BG
8.7AAA
3.3AA Large
18.3AAA
12.0AAA
7.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B2B283
767425
F5F5B6
C2C387
97976B

Deuteranopia

B4B685
7F8B25
F6F6BB
C1C08C
96956F

Tritanopia

BE8B8C
B42322
F7C6C9
BC989C
92787B

Achromatopsia

A6A6A6
4C4C4C
EBEBEB
BDBDBD
929292

Shades & Tints Shades & Tints

#BFA279

Dark
Light

#BC1A29

Dark
Light

#F7F3A3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bfa279;
  --color-2: #bc1a29;
  --color-3: #f7f3a3;
  --color-4: #bbcc71;
  --color-5: #919e5b;
}

SCSS

$color-1: #bfa279;
$color-2: #bc1a29;
$color-3: #f7f3a3;
$color-4: #bbcc71;
$color-5: #919e5b;

TAILWIND

colors: {
  'brand-1': '#bfa279',
  'brand-2': '#bc1a29',
  'brand-3': '#f7f3a3',
  'brand-4': '#bbcc71',
  'brand-5': '#919e5b',
}

RGB Array

[191, 162, 121], [188, 26, 41], [247, 243, 163], [187, 204, 113], [145, 158, 91]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BFA279, #BC1A29, #F7F3A3, #BBCC71, #919E5B 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: #bfa279; --color-2: #bc1a29; --color-3: #f7f3a3; --color-4: #bbcc71; --color-5: #919e5b. 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