← Back to Editor

#BBB24B · #9C953A · #4B9037 · #466C39 · #543813

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

#BBB24B

Autumn Sage · GoldenRod · Sunflower

HEX
#BBB24B
RGB
rgb(187, 178, 75)
HSL
hsl(55, 45%, 51%)
HSB
hsb(55, 60%, 73%)
CMYK
cmyk(0%, 5%, 60%, 27%)
Oklch
oklch(75.1% 0.125 104.3)

TraditionalAutumn Sage」· PaintSunflower」· Creative Blush Sunrise

#9C953A

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#9C953A
RGB
rgb(156, 149, 58)
HSL
hsl(56, 46%, 42%)
HSB
hsb(56, 63%, 61%)
CMYK
cmyk(0%, 4%, 63%, 39%)
Oklch
oklch(65.8% 0.112 104.9)

TraditionalAutumn Sage」· PaintHoney Gold」· Creative Blush Sunrise

#4B9037

Celadon · DarkOliveGreen · Forest Green

HEX
#4B9037
RGB
rgb(75, 144, 55)
HSL
hsl(107, 45%, 39%)
HSB
hsb(107, 62%, 56%)
CMYK
cmyk(48%, 0%, 62%, 44%)
Oklch
oklch(58.8% 0.142 139.2)

TraditionalCeladon」· PaintForest Green」· Creative Blush Sunrise

#466C39

Celadon · DarkOliveGreen · Forest Green

HEX
#466C39
RGB
rgb(70, 108, 57)
HSL
hsl(105, 31%, 32%)
HSB
hsb(105, 47%, 42%)
CMYK
cmyk(35%, 0%, 47%, 58%)
Oklch
oklch(48.9% 0.089 138.1)

TraditionalCeladon」· PaintForest Green」· Creative Blush Sunrise

#543813

Ochre · DarkOliveGreen · Cinnamon

HEX
#543813
RGB
rgb(84, 56, 19)
HSL
hsl(34, 63%, 20%)
HSB
hsb(34, 77%, 33%)
CMYK
cmyk(0%, 33%, 77%, 67%)
Oklch
oklch(36.6% 0.065 70.5)

TraditionalOchre」· PaintCinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BBB24B
4A53BA

Analogous

BA794A
BBB24B
8BBA4A

Triadic

BBB24B
4ABAB1
B14ABA

Split-Comp.

BBB24B
4A8BBA
794ABA

Tetradic

BBB24B
4ABA79
4A53BA
BA4A8B

Contrast Matrix WCAG 2.1 Contrast

BBB24B
9C953A
4B9037
466C39
543813
1.4
Fail
1.8
Fail
2.8
Fail
4.9
AA
1.4
Fail
1.3
Fail
2.0
Fail
3.5
AA Large
1.8
Fail
1.3
Fail
1.5
Fail
2.7
Fail
2.8
Fail
2.0
Fail
1.5
Fail
1.8
Fail
4.9
AA
3.5
AA Large
2.7
Fail
1.8
Fail
White BG
2.2Fail
3.1AA Large
3.9AA Large
6.1AA
10.8AAA
Black BG
9.6AAA
6.8AA
5.3AA
3.5AA Large
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B7B764
999950
69694D
565745
48481C

Deuteranopia

B8B86A
999A55
656052
545148
4A4C1E

Tritanopia

BB787C
9C6165
4E5E61
484F51
532325

Achromatopsia

A9A9A9
8D8D8D
717171
5B5B5B
3C3C3C

Shades & Tints Shades & Tints

#BBB24B

Dark
Light

#9C953A

Dark
Light

#4B9037

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bbb24b;
  --color-2: #9c953a;
  --color-3: #4b9037;
  --color-4: #466c39;
  --color-5: #543813;
}

SCSS

$color-1: #bbb24b;
$color-2: #9c953a;
$color-3: #4b9037;
$color-4: #466c39;
$color-5: #543813;

TAILWIND

colors: {
  'brand-1': '#bbb24b',
  'brand-2': '#9c953a',
  'brand-3': '#4b9037',
  'brand-4': '#466c39',
  'brand-5': '#543813',
}

RGB Array

[187, 178, 75], [156, 149, 58], [75, 144, 55], [70, 108, 57], [84, 56, 19]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BBB24B, #9C953A, #4B9037, #466C39, #543813 is ideal for: tech websites, dark mode UIs, game UIs. 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: #bbb24b; --color-2: #9c953a; --color-3: #4b9037; --color-4: #466c39; --color-5: #543813. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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