#524441 + #9C328A + #EA6554 + #CCA78D + #8CB050 · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#524441

Crimson · DarkSlateGray · Wine Red

HEX

#524441

RGB

rgb(82, 68, 65)

HSL

hsl(11, 12%, 29%)

HSB

hsb(11, 21%, 32%)

CMYK

cmyk(0%, 17%, 21%, 68%)

Oklch

oklch(40.0% 0.020 32.1)

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

#9C328A

Rose Purple · MediumVioletRed · Eggplant

HEX

#9C328A

RGB

rgb(156, 50, 138)

HSL

hsl(310, 51%, 40%)

HSB

hsb(310, 68%, 61%)

CMYK

cmyk(0%, 68%, 12%, 39%)

Oklch

oklch(50.4% 0.172 335.3)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

#EA6554

Peach Pink · Tomato · Coral Red

HEX

#EA6554

RGB

rgb(234, 101, 84)

HSL

hsl(7, 78%, 62%)

HSB

hsb(7, 64%, 92%)

CMYK

cmyk(0%, 57%, 64%, 8%)

Oklch

oklch(66.9% 0.168 29.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#CCA78D

Apricot · Tan · Warm Sun

HEX

#CCA78D

RGB

rgb(204, 167, 141)

HSL

hsl(25, 38%, 68%)

HSB

hsb(25, 31%, 80%)

CMYK

cmyk(0%, 18%, 31%, 20%)

Oklch

oklch(75.5% 0.057 56.8)

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

#8CB050

Grass Green · DarkSeaGreen · Olive Green

HEX

#8CB050

RGB

rgb(140, 176, 80)

HSL

hsl(83, 38%, 50%)

HSB

hsb(83, 55%, 69%)

CMYK

cmyk(20%, 0%, 55%, 31%)

Oklch

oklch(71.0% 0.131 126.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

524441

415053

Analogous

534147

524441

534D41

Triadic

524441

415344

444153

Split-Comp.

524441

41534D

414753

Tetradic

524441

475341

415053

4D4153

Contrast Matrix WCAG 2.1 Contrast

524441	9C328A	EA6554	CCA78D	8CB050
—	1.4 Fail	2.9 Fail	4.2 AA Large	3.7 AA Large
1.4 Fail	—	2.0 Fail	2.9 Fail	2.6 Fail
2.9 Fail	2.0 Fail	—	1.5 Fail	1.3 Fail
4.2 AA Large	2.9 Fail	1.5 Fail	—	1.1 Fail
3.7 AA Large	2.6 Fail	1.3 Fail	1.1 Fail	—

White BG

9.3AAA

6.5AA

3.2AA Large

2.2Fail

2.5Fail

Black BG

2.3Fail

3.2AA Large

6.5AA

9.5AAA

8.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4C4C42

6E6D75

B0AF58

BCBC93

9C9C67

Deuteranopia

4D4E42

747C70

B8C259

BEC195

9A976D

Tritanopia

514242

976460

E35B5C

CA9899

8E7A7E

Achromatopsia

484848

5C5C5C

8B8B8B

AFAFAF

9A9A9A

Shades & Tints Shades & Tints

#524441

Dark

Light

#9C328A

Dark

Light

#EA6554

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #524441;
  --color-2: #9c328a;
  --color-3: #ea6554;
  --color-4: #cca78d;
  --color-5: #8cb050;
}

SCSS

$color-1: #524441;
$color-2: #9c328a;
$color-3: #ea6554;
$color-4: #cca78d;
$color-5: #8cb050;

TAILWIND

colors: {
  'brand-1': '#524441',
  'brand-2': '#9c328a',
  'brand-3': '#ea6554',
  'brand-4': '#cca78d',
  'brand-5': '#8cb050',
}

RGB Array

[82, 68, 65], [156, 50, 138], [234, 101, 84], [204, 167, 141], [140, 176, 80]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #524441, #9C328A, #EA6554, #CCA78D, #8CB050 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: #524441; --color-2: #9c328a; --color-3: #ea6554; --color-4: #cca78d; --color-5: #8cb050. 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 summer-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