← Back to Editor

#BBDE5B · #C5AA52 · #CF7548 · #855241 · #403842

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

#BBDE5B

Willow Green · GreenYellow · Apple Green

HEX
#BBDE5B
RGB
rgb(187, 222, 91)
HSL
hsl(76, 66%, 61%)
HSB
hsb(76, 59%, 87%)
CMYK
cmyk(16%, 0%, 59%, 13%)
Oklch
oklch(84.9% 0.162 122.5)

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

#C5AA52

Ginger · SandyBrown · Sunflower

HEX
#C5AA52
RGB
rgb(197, 170, 82)
HSL
hsl(46, 50%, 55%)
HSB
hsb(46, 58%, 77%)
CMYK
cmyk(0%, 14%, 58%, 23%)
Oklch
oklch(74.4% 0.112 92.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#CF7548

Tangerine · Chocolate · Warm Sun

HEX
#CF7548
RGB
rgb(207, 117, 72)
HSL
hsl(20, 58%, 55%)
HSB
hsb(20, 65%, 81%)
CMYK
cmyk(0%, 43%, 65%, 19%)
Oklch
oklch(65.4% 0.128 46.2)

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

#855241

Tangerine · Sienna · Amber Brown

HEX
#855241
RGB
rgb(133, 82, 65)
HSL
hsl(15, 34%, 39%)
HSB
hsb(15, 51%, 52%)
CMYK
cmyk(0%, 38%, 51%, 48%)
Oklch
oklch(49.2% 0.074 39.2)

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

#403842

Dark Plum · DarkSlateGray · Dark Stone

HEX
#403842
RGB
rgb(64, 56, 66)
HSL
hsl(288, 8%, 24%)
HSB
hsb(288, 15%, 26%)
CMYK
cmyk(3%, 15%, 0%, 74%)
Oklch
oklch(35.3% 0.020 319.5)

Traditional「Dark Plum」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BBDE5B
7D5ADD

Analogous

DDBF5A
BBDE5B
79DD5A

Triadic

BBDE5B
5ABADD
DD5ABA

Split-Comp.

BBDE5B
5A79DD
BF5ADD

Tetradic

BBDE5B
5ADDBF
7D5ADD
DD5A79

Contrast Matrix WCAG 2.1 Contrast

BBDE5B
C5AA52
CF7548
855241
403842
—
1.5
Fail
2.2
Fail
4.2
AA Large
7.4
AAA
1.5
Fail
—
1.5
Fail
2.8
Fail
5.0
AA
2.2
Fail
1.5
Fail
—
1.9
Fail
3.4
AA Large
4.2
AA Large
2.8
Fail
1.9
Fail
—
1.8
Fail
7.4
AAA
5.0
AA
3.4
AA Large
1.8
Fail
—
White BG
1.5Fail
2.3Fail
3.3AA Large
6.4AA
11.3AAA
Black BG
13.7AAA
9.2AAA
6.3AA
3.3AA Large
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

CACA7B
B9B967
A8A753
6F6E45
3D3C40

Deuteranopia

C8C682
BBBD6C
ADB456
727646
3D3E3F

Tritanopia

BD9499
C4787C
CA5B5D
824849
403E3D

Achromatopsia

C5C5C5
A8A8A8
8B8B8B
5F5F5F
3C3C3C

Shades & Tints Shades & Tints

#BBDE5B

Dark
Light

#C5AA52

Dark
Light

#CF7548

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bbde5b;
  --color-2: #c5aa52;
  --color-3: #cf7548;
  --color-4: #855241;
  --color-5: #403842;
}

SCSS

$color-1: #bbde5b;
$color-2: #c5aa52;
$color-3: #cf7548;
$color-4: #855241;
$color-5: #403842;

TAILWIND

colors: {
  'brand-1': '#bbde5b',
  'brand-2': '#c5aa52',
  'brand-3': '#cf7548',
  'brand-4': '#855241',
  'brand-5': '#403842',
}

RGB Array

[187, 222, 91], [197, 170, 82], [207, 117, 72], [133, 82, 65], [64, 56, 66]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BBDE5B, #C5AA52, #CF7548, #855241, #403842 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: #bbde5b; --color-2: #c5aa52; --color-3: #cf7548; --color-4: #855241; --color-5: #403842. 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