← Back to Editor

#BFC427 · #872681 · #F23F3F · #807D6A · #403D29

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

#BFC427

Autumn Sage · GoldenRod · Honey Gold

HEX
#BFC427
RGB
rgb(191, 196, 39)
HSL
hsl(62, 67%, 46%)
HSB
hsb(62, 80%, 77%)
CMYK
cmyk(3%, 0%, 80%, 23%)
Oklch
oklch(79.1% 0.165 111.6)

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

#872681

Rose Purple · Purple · Eggplant

HEX
#872681
RGB
rgb(135, 38, 129)
HSL
hsl(304, 56%, 34%)
HSB
hsb(304, 72%, 53%)
CMYK
cmyk(0%, 72%, 4%, 47%)
Oklch
oklch(45.5% 0.168 330.6)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

#F23F3F

Vermilion · Tomato · Passion Red

HEX
#F23F3F
RGB
rgb(242, 63, 63)
HSL
hsl(0, 87%, 60%)
HSB
hsb(0, 74%, 95%)
CMYK
cmyk(0%, 74%, 74%, 5%)
Oklch
oklch(63.7% 0.215 25.8)

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

#807D6A

Autumn Sage · Gray · Warm Gray

HEX
#807D6A
RGB
rgb(128, 125, 106)
HSL
hsl(52, 9%, 46%)
HSB
hsb(52, 17%, 50%)
CMYK
cmyk(0%, 2%, 17%, 50%)
Oklch
oklch(58.7% 0.028 99.8)

Traditional「Autumn Sage」· Paint「Warm Gray」· Creative Urban Concrete

#403D29

Autumn Sage · DarkSlateGray · Amber Gold

HEX
#403D29
RGB
rgb(64, 61, 41)
HSL
hsl(52, 22%, 21%)
HSB
hsb(52, 36%, 25%)
CMYK
cmyk(0%, 5%, 36%, 75%)
Oklch
oklch(35.7% 0.033 100.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BFC427
2C27C4

Analogous

C47B27
BFC427
70C427

Triadic

BFC427
27BFC4
C427BF

Split-Comp.

BFC427
2770C4
7B27C4

Tetradic

BFC427
27C47B
2C27C4
C42770

Contrast Matrix WCAG 2.1 Contrast

BFC427
872681
F23F3F
807D6A
403D29
—
4.2
AA Large
2.0
Fail
2.2
Fail
5.8
AA
4.2
AA Large
—
2.1
Fail
1.9
Fail
1.4
Fail
2.0
Fail
2.1
Fail
—
1.1
Fail
2.9
Fail
2.2
Fail
1.9
Fail
1.1
Fail
—
2.6
Fail
5.8
AA
1.4
Fail
2.9
Fail
2.6
Fail
—
White BG
1.9Fail
8.0AAA
3.8AA Large
4.2AA Large
11.0AAA
Black BG
11.1AAA
2.6Fail
5.6AA
5.1AA
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C1C14D
5D5C6B
A4A33F
7F7F6F
3F3F2E

Deuteranopia

C1C156
636A66
AFBC3F
7F7F70
3F3F2F

Tritanopia

BF6B72
825A56
E93F3F
807273
403233

Achromatopsia

B1B1B1
4D4D4D
757575
7C7C7C
3C3C3C

Shades & Tints Shades & Tints

#BFC427

Dark
Light

#872681

Dark
Light

#F23F3F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bfc427;
  --color-2: #872681;
  --color-3: #f23f3f;
  --color-4: #807d6a;
  --color-5: #403d29;
}

SCSS

$color-1: #bfc427;
$color-2: #872681;
$color-3: #f23f3f;
$color-4: #807d6a;
$color-5: #403d29;

TAILWIND

colors: {
  'brand-1': '#bfc427',
  'brand-2': '#872681',
  'brand-3': '#f23f3f',
  'brand-4': '#807d6a',
  'brand-5': '#403d29',
}

RGB Array

[191, 196, 39], [135, 38, 129], [242, 63, 63], [128, 125, 106], [64, 61, 41]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BFC427, #872681, #F23F3F, #807D6A, #403D29 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: #bfc427; --color-2: #872681; --color-3: #f23f3f; --color-4: #807d6a; --color-5: #403d29. 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