#5C423B + #53A396 + #E4AD4C + #D84621 + #65A353 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#5C423B

Crimson · DarkOliveGreen · Wine Red

HEX

#5C423B

RGB

rgb(92, 66, 59)

HSL

hsl(13, 22%, 30%)

HSB

hsb(13, 36%, 36%)

CMYK

cmyk(0%, 28%, 36%, 64%)

Oklch

oklch(40.6% 0.038 35.6)

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

#53A396

Mineral Blue · CadetBlue · Mint Ice

HEX

#53A396

RGB

rgb(83, 163, 150)

HSL

hsl(170, 33%, 48%)

HSB

hsb(170, 49%, 64%)

CMYK

cmyk(49%, 0%, 8%, 36%)

Oklch

oklch(66.1% 0.082 181.8)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#E4AD4C

Ginger · SandyBrown · Warm Sun

HEX

#E4AD4C

RGB

rgb(228, 173, 76)

HSL

hsl(38, 74%, 60%)

HSB

hsb(38, 67%, 89%)

CMYK

cmyk(0%, 24%, 67%, 11%)

Oklch

oklch(78.1% 0.130 78.9)

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

#D84621

Vermilion · Chocolate · Passion Red

HEX

#D84621

RGB

rgb(216, 70, 33)

HSL

hsl(12, 73%, 49%)

HSB

hsb(12, 85%, 85%)

CMYK

cmyk(0%, 68%, 85%, 15%)

Oklch

oklch(59.7% 0.189 34.8)

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

#65A353

Celadon · MediumSeaGreen · Olive Green

HEX

#65A353

RGB

rgb(101, 163, 83)

HSL

hsl(107, 33%, 48%)

HSB

hsb(107, 49%, 64%)

CMYK

cmyk(38%, 0%, 49%, 36%)

Oklch

oklch(65.4% 0.129 139.0)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5C423B

3C565D

Analogous

5D3C45

5C423B

5D543C

Triadic

5C423B

3C5D43

433C5D

Split-Comp.

5C423B

3C5D54

3C455D

Tetradic

5C423B

455D3C

3C565D

543C5D

Contrast Matrix WCAG 2.1 Contrast

5C423B	53A396	E4AD4C	D84621	65A353
—	3.1 AA Large	4.5 AA	2.1 Fail	3.0 AA Large
3.1 AA Large	—	1.5 Fail	1.5 Fail	1.0 Fail
4.5 AA	1.5 Fail	—	2.2 Fail	1.5 Fail
2.1 Fail	1.5 Fail	2.2 Fail	—	1.4 Fail
3.0 AA Large	1.0 Fail	1.5 Fail	1.4 Fail	—

White BG

9.1AAA

3.0Fail

2.0Fail

4.4AA Large

3.0AA Large

Black BG

2.3Fail

7.0AAA

10.4AAA

4.8AA

6.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

51513D

767699

CCCC63

99972A

808066

Deuteranopia

52543D

716B9A

CFD469

A1AC2C

7C786B

Tritanopia

5B3E3E

579C9C

E1767A

D13133

687679

Achromatopsia

494949

8A8A8A

B2B2B2

6D6D6D

878787

Shades & Tints Shades & Tints

#5C423B

Dark

Light

#53A396

Dark

Light

#E4AD4C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5c423b;
  --color-2: #53a396;
  --color-3: #e4ad4c;
  --color-4: #d84621;
  --color-5: #65a353;
}

SCSS

$color-1: #5c423b;
$color-2: #53a396;
$color-3: #e4ad4c;
$color-4: #d84621;
$color-5: #65a353;

TAILWIND

colors: {
  'brand-1': '#5c423b',
  'brand-2': '#53a396',
  'brand-3': '#e4ad4c',
  'brand-4': '#d84621',
  'brand-5': '#65a353',
}

RGB Array

[92, 66, 59], [83, 163, 150], [228, 173, 76], [216, 70, 33], [101, 163, 83]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #5C423B, #53A396, #E4AD4C, #D84621, #65A353 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: #5c423b; --color-2: #53a396; --color-3: #e4ad4c; --color-4: #d84621; --color-5: #65a353. 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 warm-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