← Back to Editor

#4B3E2B · #AB4100 · #FE5E2A · #EFF2DA · #18656A

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#4B3E2B

Ochre · DarkOliveGreen · Cinnamon

HEX
#4B3E2B
RGB
rgb(75, 62, 43)
HSL
hsl(36, 27%, 23%)
HSB
hsb(36, 43%, 29%)
CMYK
cmyk(0%, 17%, 43%, 71%)
Oklch
oklch(37.2% 0.035 76.8)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#AB4100

Tangerine · FireBrick · Amber Brown

HEX
#AB4100
RGB
rgb(171, 65, 0)
HSL
hsl(23, 100%, 34%)
HSB
hsb(23, 100%, 67%)
CMYK
cmyk(0%, 62%, 100%, 33%)
Oklch
oklch(51.5% 0.152 43.1)

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

#FE5E2A

Tangerine · Tomato · Warm Sun

HEX
#FE5E2A
RGB
rgb(254, 94, 42)
HSL
hsl(15, 99%, 58%)
HSB
hsb(15, 83%, 100%)
CMYK
cmyk(0%, 63%, 83%, 0%)
Oklch
oklch(68.6% 0.205 37.3)

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

#EFF2DA

Fresh Green · Beige · Lemon Cream

HEX
#EFF2DA
RGB
rgb(239, 242, 218)
HSL
hsl(67, 48%, 90%)
HSB
hsb(67, 10%, 95%)
CMYK
cmyk(1%, 0%, 10%, 5%)
Oklch
oklch(95.3% 0.032 112.8)

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

#18656A

Lake Blue · DarkSlateGray · Peacock Green

HEX
#18656A
RGB
rgb(24, 101, 106)
HSL
hsl(184, 63%, 25%)
HSB
hsb(184, 77%, 42%)
CMYK
cmyk(77%, 5%, 0%, 58%)
Oklch
oklch(46.5% 0.071 201.5)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4B3E2B
2B374A

Analogous

4A2E2B
4B3E2B
474A2B

Triadic

4B3E2B
2B4A3E
3E2B4A

Split-Comp.

4B3E2B
2B474A
2E2B4A

Tetradic

4B3E2B
2B4A2E
2B374A
4A2B47

Contrast Matrix WCAG 2.1 Contrast

4B3E2B
AB4100
FE5E2A
EFF2DA
18656A
—
1.7
Fail
3.4
AA Large
9.1
AAA
1.5
Fail
1.7
Fail
—
2.0
Fail
5.3
AA
1.1
Fail
3.4
AA Large
2.0
Fail
—
2.7
Fail
2.2
Fail
9.1
AAA
5.3
AA
2.7
Fail
—
5.9
AA
1.5
Fail
1.1
Fail
2.2
Fail
5.9
AA
—
White BG
10.4AAA
6.0AA
3.1AA Large
1.1Fail
6.8AA
Black BG
2.0Fail
3.5AA Large
6.8AA
18.4AAA
3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

454530
7D7C10
B9B737
F0F0E0
393A69

Deuteranopia

464731
838B14
C2CE3A
F0F0E1
352F68

Tritanopia

4A3334
A61C1F
F64143
EFE4E5
1C6868

Achromatopsia

404040
595959
888888
EEEEEE
4F4F4F

Shades & Tints Shades & Tints

#4B3E2B

Dark
Light

#AB4100

Dark
Light

#FE5E2A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4b3e2b;
  --color-2: #ab4100;
  --color-3: #fe5e2a;
  --color-4: #eff2da;
  --color-5: #18656a;
}

SCSS

$color-1: #4b3e2b;
$color-2: #ab4100;
$color-3: #fe5e2a;
$color-4: #eff2da;
$color-5: #18656a;

TAILWIND

colors: {
  'brand-1': '#4b3e2b',
  'brand-2': '#ab4100',
  'brand-3': '#fe5e2a',
  'brand-4': '#eff2da',
  'brand-5': '#18656a',
}

RGB Array

[75, 62, 43], [171, 65, 0], [254, 94, 42], [239, 242, 218], [24, 101, 106]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4B3E2B, #AB4100, #FE5E2A, #EFF2DA, #18656A 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: #4b3e2b; --color-2: #ab4100; --color-3: #fe5e2a; --color-4: #eff2da; --color-5: #18656a. 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