← Back to Editor

#5D3625 · #E66129 · #C28245 · #B7A46A · #B0B481

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

#5D3625

Tangerine · DarkOliveGreen · Cinnamon

HEX
#5D3625
RGB
rgb(93, 54, 37)
HSL
hsl(18, 43%, 25%)
HSB
hsb(18, 60%, 36%)
CMYK
cmyk(0%, 42%, 60%, 64%)
Oklch
oklch(37.7% 0.063 44.0)

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

#E66129

Tangerine · Chocolate · Warm Sun

HEX
#E66129
RGB
rgb(230, 97, 41)
HSL
hsl(18, 79%, 53%)
HSB
hsb(18, 82%, 90%)
CMYK
cmyk(0%, 58%, 82%, 10%)
Oklch
oklch(65.3% 0.178 40.9)

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

#C28245

Tangerine · Chocolate · Warm Sun

HEX
#C28245
RGB
rgb(194, 130, 69)
HSL
hsl(29, 51%, 52%)
HSB
hsb(29, 64%, 76%)
CMYK
cmyk(0%, 33%, 64%, 24%)
Oklch
oklch(66.0% 0.110 62.5)

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

#B7A46A

Ginger · Tan · Sunflower

HEX
#B7A46A
RGB
rgb(183, 164, 106)
HSL
hsl(45, 35%, 57%)
HSB
hsb(45, 42%, 72%)
CMYK
cmyk(0%, 10%, 42%, 28%)
Oklch
oklch(72.2% 0.080 92.0)

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

#B0B481

Fresh Green · Tan · Sunflower

HEX
#B0B481
RGB
rgb(176, 180, 129)
HSL
hsl(65, 25%, 61%)
HSB
hsb(65, 28%, 71%)
CMYK
cmyk(2%, 0%, 28%, 29%)
Oklch
oklch(75.4% 0.069 111.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5D3625
244B5B

Analogous

5B242F
5D3625
5B5024

Triadic

5D3625
245B35
35245B

Split-Comp.

5D3625
245B50
242F5B

Tetradic

5D3625
2F5B24
244B5B
50245B

Contrast Matrix WCAG 2.1 Contrast

5D3625
E66129
C28245
B7A46A
B0B481
—
3.0
AA Large
3.3
AA Large
4.2
AA Large
4.8
AA
3.0
AA Large
—
1.1
Fail
1.4
Fail
1.6
Fail
3.3
AA Large
1.1
Fail
—
1.3
Fail
1.5
Fail
4.2
AA Large
1.4
Fail
1.3
Fail
—
1.1
Fail
4.8
AA
1.6
Fail
1.5
Fail
1.1
Fail
—
White BG
10.4AAA
3.4AA Large
3.2AA Large
2.5Fail
2.2Fail
Black BG
2.0Fail
6.1AA
6.6AA
8.5AAA
9.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4C4C29
ACAB37
A6A654
AFAF78
B2B28D

Deuteranopia

4E512A
B4BE3A
AAAF57
B0B17B
B2B190

Tritanopia

5B2C2D
DF4144
BF5F62
B68386
B09799

Achromatopsia

404040
828282
8E8E8E
A3A3A3
ADADAD

Shades & Tints Shades & Tints

#5D3625

Dark
Light

#E66129

Dark
Light

#C28245

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5d3625;
  --color-2: #e66129;
  --color-3: #c28245;
  --color-4: #b7a46a;
  --color-5: #b0b481;
}

SCSS

$color-1: #5d3625;
$color-2: #e66129;
$color-3: #c28245;
$color-4: #b7a46a;
$color-5: #b0b481;

TAILWIND

colors: {
  'brand-1': '#5d3625',
  'brand-2': '#e66129',
  'brand-3': '#c28245',
  'brand-4': '#b7a46a',
  'brand-5': '#b0b481',
}

RGB Array

[93, 54, 37], [230, 97, 41], [194, 130, 69], [183, 164, 106], [176, 180, 129]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5D3625, #E66129, #C28245, #B7A46A, #B0B481 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: #5d3625; --color-2: #e66129; --color-3: #c28245; --color-4: #b7a46a; --color-5: #b0b481. 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