← Back to Editor

#57433F · #CD514A · #E66B41 · #DDA247 · #C4B662

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

#57433F

Crimson · DarkOliveGreen · Wine Red

HEX
#57433F
RGB
rgb(87, 67, 63)
HSL
hsl(10, 16%, 29%)
HSB
hsb(10, 28%, 34%)
CMYK
cmyk(0%, 23%, 28%, 66%)
Oklch
oklch(40.3% 0.029 31.4)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#CD514A

Crimson · Chocolate · Passion Red

HEX
#CD514A
RGB
rgb(205, 81, 74)
HSL
hsl(3, 57%, 55%)
HSB
hsb(3, 64%, 80%)
CMYK
cmyk(0%, 60%, 64%, 20%)
Oklch
oklch(59.7% 0.159 26.2)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#E66B41

Tangerine · Tomato · Warm Sun

HEX
#E66B41
RGB
rgb(230, 107, 65)
HSL
hsl(15, 77%, 58%)
HSB
hsb(15, 72%, 90%)
CMYK
cmyk(0%, 53%, 72%, 10%)
Oklch
oklch(66.9% 0.163 39.0)

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

#DDA247

Ginger · SandyBrown · Warm Sun

HEX
#DDA247
RGB
rgb(221, 162, 71)
HSL
hsl(36, 69%, 57%)
HSB
hsb(36, 68%, 87%)
CMYK
cmyk(0%, 27%, 68%, 13%)
Oklch
oklch(75.2% 0.127 75.2)

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

#C4B662

Autumn Sage · Tan · Sunflower

HEX
#C4B662
RGB
rgb(196, 182, 98)
HSL
hsl(51, 45%, 58%)
HSB
hsb(51, 50%, 77%)
CMYK
cmyk(0%, 7%, 50%, 23%)
Oklch
oklch(77.0% 0.107 100.0)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

57433F
3E5256

Analogous

563E46
57433F
564E3E

Triadic

57433F
3E5642
423E56

Split-Comp.

57433F
3E564E
3E4656

Tetradic

57433F
46563E
3E5256
4E3E56

Contrast Matrix WCAG 2.1 Contrast

57433F
CD514A
E66B41
DDA247
C4B662
—
2.1
Fail
2.9
Fail
4.1
AA Large
4.5
AA Large
2.1
Fail
—
1.3
Fail
1.9
Fail
2.1
Fail
2.9
Fail
1.3
Fail
—
1.4
Fail
1.6
Fail
4.1
AA Large
1.9
Fail
1.4
Fail
—
1.1
Fail
4.5
AA Large
2.1
Fail
1.6
Fail
1.1
Fail
—
White BG
9.2AAA
4.3AA Large
3.2AA Large
2.2Fail
2.1Fail
Black BG
2.3Fail
4.9AA
6.5AA
9.3AAA
10.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4E4E40
97964C
B1B04B
C3C35D
BEBE76

Deuteranopia

505140
9FA84C
B8C14E
C7CB62
BFC07B

Tritanopia

564141
C74D4D
E05355
DA6E72
C3868A

Achromatopsia

494949
757575
8B8B8B
A9A9A9
B1B1B1

Shades & Tints Shades & Tints

#57433F

Dark
Light

#CD514A

Dark
Light

#E66B41

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #57433f;
  --color-2: #cd514a;
  --color-3: #e66b41;
  --color-4: #dda247;
  --color-5: #c4b662;
}

SCSS

$color-1: #57433f;
$color-2: #cd514a;
$color-3: #e66b41;
$color-4: #dda247;
$color-5: #c4b662;

TAILWIND

colors: {
  'brand-1': '#57433f',
  'brand-2': '#cd514a',
  'brand-3': '#e66b41',
  'brand-4': '#dda247',
  'brand-5': '#c4b662',
}

RGB Array

[87, 67, 63], [205, 81, 74], [230, 107, 65], [221, 162, 71], [196, 182, 98]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #57433F, #CD514A, #E66B41, #DDA247, #C4B662 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: #57433f; --color-2: #cd514a; --color-3: #e66b41; --color-4: #dda247; --color-5: #c4b662. 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