← Back to Editor

#4C2E24 · #BECF88 · #D8A974 · #F38460 · #857E56

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 LibraryData Visualization

Color Details Color Details

#4C2E24

Tangerine · DarkSlateGray · Cinnamon

HEX
#4C2E24
RGB
rgb(76, 46, 36)
HSL
hsl(15, 36%, 22%)
HSB
hsb(15, 53%, 30%)
CMYK
cmyk(0%, 39%, 53%, 70%)
Oklch
oklch(33.5% 0.048 39.2)

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

#BECF88

Willow Green · Tan · Apple Green

HEX
#BECF88
RGB
rgb(190, 207, 136)
HSL
hsl(74, 43%, 67%)
HSB
hsb(74, 34%, 81%)
CMYK
cmyk(8%, 0%, 34%, 19%)
Oklch
oklch(82.5% 0.095 119.5)

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

#D8A974

Ginger · BurlyWood · Warm Sun

HEX
#D8A974
RGB
rgb(216, 169, 116)
HSL
hsl(32, 56%, 65%)
HSB
hsb(32, 46%, 85%)
CMYK
cmyk(0%, 22%, 46%, 15%)
Oklch
oklch(76.6% 0.089 69.2)

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

#F38460

Apricot · Salmon · Warm Sun

HEX
#F38460
RGB
rgb(243, 132, 96)
HSL
hsl(15, 86%, 66%)
HSB
hsb(15, 60%, 95%)
CMYK
cmyk(0%, 46%, 60%, 5%)
Oklch
oklch(72.9% 0.145 38.6)

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

#857E56

Autumn Sage · DimGray · Honey Gold

HEX
#857E56
RGB
rgb(133, 126, 86)
HSL
hsl(51, 21%, 43%)
HSB
hsb(51, 35%, 52%)
CMYK
cmyk(0%, 5%, 35%, 48%)
Oklch
oklch(58.9% 0.057 99.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4C2E24
24424C

Analogous

4C242E
4C2E24
4C4224

Triadic

4C2E24
244C2E
2E244C

Split-Comp.

4C2E24
244C42
242E4C

Tetradic

4C2E24
2E4C24
24424C
42244C

Contrast Matrix WCAG 2.1 Contrast

4C2E24
BECF88
D8A974
F38460
857E56
—
7.2
AAA
5.7
AA
4.8
AA
3.0
Fail
7.2
AAA
—
1.3
Fail
1.5
Fail
2.4
Fail
5.7
AA
1.3
Fail
—
1.2
Fail
1.9
Fail
4.8
AA
1.5
Fail
1.2
Fail
—
1.6
Fail
3.0
Fail
2.4
Fail
1.9
Fail
1.6
Fail
—
White BG
12.2AAA
1.7Fail
2.1Fail
2.5Fail
4.1AA Large
Black BG
1.7Fail
12.5AAA
9.8AAA
8.3AAA
5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3F3F26
C5C699
C4C381
C3C269
828260

Deuteranopia

414327
C4C39D
C6CA84
C9D26B
828362

Tritanopia

4B2829
BFA7AA
D68B8D
ED7071
856769

Achromatopsia

363636
C2C2C2
B1B1B1
A1A1A1
7C7C7C

Shades & Tints Shades & Tints

#4C2E24

Dark
Light

#BECF88

Dark
Light

#D8A974

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4c2e24;
  --color-2: #becf88;
  --color-3: #d8a974;
  --color-4: #f38460;
  --color-5: #857e56;
}

SCSS

$color-1: #4c2e24;
$color-2: #becf88;
$color-3: #d8a974;
$color-4: #f38460;
$color-5: #857e56;

TAILWIND

colors: {
  'brand-1': '#4c2e24',
  'brand-2': '#becf88',
  'brand-3': '#d8a974',
  'brand-4': '#f38460',
  'brand-5': '#857e56',
}

RGB Array

[76, 46, 36], [190, 207, 136], [216, 169, 116], [243, 132, 96], [133, 126, 86]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4C2E24, #BECF88, #D8A974, #F38460, #857E56 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #4c2e24; --color-2: #becf88; --color-3: #d8a974; --color-4: #f38460; --color-5: #857e56. 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 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