← Back to Editor

#BBBE25 · #E69E2C · #D1AB6D · #F24141 · #47343C

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

#BBBE25

Autumn Sage · GoldenRod · Honey Gold

HEX
#BBBE25
RGB
rgb(187, 190, 37)
HSL
hsl(61, 67%, 45%)
HSB
hsb(61, 81%, 75%)
CMYK
cmyk(2%, 0%, 81%, 25%)
Oklch
oklch(77.4% 0.161 110.8)

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

#E69E2C

Ginger · GoldenRod · Warm Sun

HEX
#E69E2C
RGB
rgb(230, 158, 44)
HSL
hsl(37, 79%, 54%)
HSB
hsb(37, 81%, 90%)
CMYK
cmyk(0%, 31%, 81%, 10%)
Oklch
oklch(75.2% 0.147 73.2)

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

#D1AB6D

Ginger · BurlyWood · Warm Sun

HEX
#D1AB6D
RGB
rgb(209, 171, 109)
HSL
hsl(37, 52%, 62%)
HSB
hsb(37, 48%, 82%)
CMYK
cmyk(0%, 18%, 48%, 18%)
Oklch
oklch(76.2% 0.091 79.0)

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

#F24141

Vermilion · Tomato · Passion Red

HEX
#F24141
RGB
rgb(242, 65, 65)
HSL
hsl(0, 87%, 60%)
HSB
hsb(0, 73%, 95%)
CMYK
cmyk(0%, 73%, 73%, 5%)
Oklch
oklch(63.9% 0.214 25.6)

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

#47343C

Dark Violet · DarkSlateGray · Raspberry

HEX
#47343C
RGB
rgb(71, 52, 60)
HSL
hsl(335, 15%, 24%)
HSB
hsb(335, 27%, 28%)
CMYK
cmyk(0%, 27%, 15%, 72%)
Oklch
oklch(34.9% 0.030 351.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BBBE25
2826C0

Analogous

C07526
BBBE25
70C026

Triadic

BBBE25
26BDC0
C026BD

Split-Comp.

BBBE25
2670C0
7526C0

Tetradic

BBBE25
26C075
2826C0
C02670

Contrast Matrix WCAG 2.1 Contrast

BBBE25
E69E2C
D1AB6D
F24141
47343C
—
1.1
Fail
1.1
Fail
1.9
Fail
5.8
AA
1.1
Fail
—
1.1
Fail
1.7
Fail
5.1
AA
1.1
Fail
1.1
Fail
—
1.7
Fail
5.3
AA
1.9
Fail
1.7
Fail
1.7
Fail
—
3.1
AA Large
5.8
AA
5.1
AA
5.3
AA
3.1
AA Large
—
White BG
2.0Fail
2.3Fail
2.2Fail
3.7AA Large
11.5AAA
Black BG
10.5AAA
9.3AAA
9.8AAA
5.6AA
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BCBC4A
C7C648
C1C07C
A5A441
3F3F3A

Deuteranopia

BCBC53
CBD04E
C3C680
B0BD41
40413A

Tritanopia

BB676E
E25D62
CF888A
E94141
463938

Achromatopsia

ACACAC
A7A7A7
AFAFAF
767676
3B3B3B

Shades & Tints Shades & Tints

#BBBE25

Dark
Light

#E69E2C

Dark
Light

#D1AB6D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bbbe25;
  --color-2: #e69e2c;
  --color-3: #d1ab6d;
  --color-4: #f24141;
  --color-5: #47343c;
}

SCSS

$color-1: #bbbe25;
$color-2: #e69e2c;
$color-3: #d1ab6d;
$color-4: #f24141;
$color-5: #47343c;

TAILWIND

colors: {
  'brand-1': '#bbbe25',
  'brand-2': '#e69e2c',
  'brand-3': '#d1ab6d',
  'brand-4': '#f24141',
  'brand-5': '#47343c',
}

RGB Array

[187, 190, 37], [230, 158, 44], [209, 171, 109], [242, 65, 65], [71, 52, 60]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BBBE25, #E69E2C, #D1AB6D, #F24141, #47343C 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: #bbbe25; --color-2: #e69e2c; --color-3: #d1ab6d; --color-4: #f24141; --color-5: #47343c. 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