← Back to Editor

#4B4834 · #BB6A34 · #BBAB34 · #F0DC46 · #FFF07E

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#4B4834

Autumn Sage · DarkOliveGreen · Amber Gold

HEX
#4B4834
RGB
rgb(75, 72, 52)
HSL
hsl(52, 18%, 25%)
HSB
hsb(52, 31%, 29%)
CMYK
cmyk(0%, 4%, 31%, 71%)
Oklch
oklch(39.9% 0.032 100.5)

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

#BB6A34

Tangerine · Chocolate · Amber Brown

HEX
#BB6A34
RGB
rgb(187, 106, 52)
HSL
hsl(24, 56%, 47%)
HSB
hsb(24, 72%, 73%)
CMYK
cmyk(0%, 43%, 72%, 27%)
Oklch
oklch(60.6% 0.124 51.8)

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

#BBAB34

Autumn Sage · GoldenRod · Honey Gold

HEX
#BBAB34
RGB
rgb(187, 171, 52)
HSL
hsl(53, 56%, 47%)
HSB
hsb(53, 72%, 73%)
CMYK
cmyk(0%, 9%, 72%, 27%)
Oklch
oklch(73.4% 0.135 101.4)

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

#F0DC46

Fresh Green · SandyBrown · Sunflower

HEX
#F0DC46
RGB
rgb(240, 220, 70)
HSL
hsl(53, 85%, 61%)
HSB
hsb(53, 71%, 94%)
CMYK
cmyk(0%, 8%, 71%, 6%)
Oklch
oklch(88.5% 0.163 101.5)

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

#FFF07E

Fresh Green · Khaki · Sunflower

HEX
#FFF07E
RGB
rgb(255, 240, 126)
HSL
hsl(53, 100%, 75%)
HSB
hsb(53, 51%, 100%)
CMYK
cmyk(0%, 6%, 51%, 0%)
Oklch
oklch(94.4% 0.136 101.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4B4834
34374B

Analogous

4B3D34
4B4834
434B34

Triadic

4B4834
344B48
48344B

Split-Comp.

4B4834
34434B
3D344B

Tetradic

4B4834
344B3D
34374B
4B3443

Contrast Matrix WCAG 2.1 Contrast

4B4834
BB6A34
BBAB34
F0DC46
FFF07E
—
2.3
Fail
3.9
AA Large
6.6
AA
7.9
AAA
2.3
Fail
—
1.7
Fail
2.9
Fail
3.4
AA Large
3.9
AA Large
1.7
Fail
—
1.7
Fail
2.0
Fail
6.6
AA
2.9
Fail
1.7
Fail
—
1.2
Fail
7.9
AAA
3.4
AA Large
2.0
Fail
1.2
Fail
—
White BG
9.2AAA
4.0AA Large
2.3Fail
1.4Fail
1.2Fail
Black BG
2.3Fail
5.2AA
9.0AAA
15.0AAA
18.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4A4A39
989741
B4B451
E7E76A
F9F89A

Deuteranopia

4A4A3A
9DA344
B5B658
E9EA73
F9FBA0

Tritanopia

4B3D3E
B74B4E
BA686D
EF878D
FEAFB4

Achromatopsia

474747
7C7C7C
A2A2A2
D1D1D1
E7E7E7

Shades & Tints Shades & Tints

#4B4834

Dark
Light

#BB6A34

Dark
Light

#BBAB34

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4b4834;
  --color-2: #bb6a34;
  --color-3: #bbab34;
  --color-4: #f0dc46;
  --color-5: #fff07e;
}

SCSS

$color-1: #4b4834;
$color-2: #bb6a34;
$color-3: #bbab34;
$color-4: #f0dc46;
$color-5: #fff07e;

TAILWIND

colors: {
  'brand-1': '#4b4834',
  'brand-2': '#bb6a34',
  'brand-3': '#bbab34',
  'brand-4': '#f0dc46',
  'brand-5': '#fff07e',
}

RGB Array

[75, 72, 52], [187, 106, 52], [187, 171, 52], [240, 220, 70], [255, 240, 126]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4B4834, #BB6A34, #BBAB34, #F0DC46, #FFF07E is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #4b4834; --color-2: #bb6a34; --color-3: #bbab34; --color-4: #f0dc46; --color-5: #fff07e. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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