#524C78 + #9F4C68 + #DA565B + #EF895B + #F8D25B · skin - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#524C78

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX

#524C78

RGB

rgb(82, 76, 120)

HSL

hsl(248, 22%, 38%)

HSB

hsb(248, 37%, 47%)

CMYK

cmyk(32%, 37%, 0%, 53%)

Oklch

oklch(44.2% 0.072 289.4)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#9F4C68

Dark Violet · Sienna · Camellia

HEX

#9F4C68

RGB

rgb(159, 76, 104)

HSL

hsl(340, 35%, 46%)

HSB

hsb(340, 52%, 62%)

CMYK

cmyk(0%, 52%, 35%, 38%)

Oklch

oklch(52.8% 0.114 0.4)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#DA565B

Vermilion · Tomato · Passion Red

HEX

#DA565B

RGB

rgb(218, 86, 91)

HSL

hsl(358, 64%, 60%)

HSB

hsb(358, 61%, 85%)

CMYK

cmyk(0%, 61%, 58%, 15%)

Oklch

oklch(62.7% 0.166 21.0)

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

#EF895B

Apricot · Coral · Warm Sun

HEX

#EF895B

RGB

rgb(239, 137, 91)

HSL

hsl(19, 82%, 65%)

HSB

hsb(19, 62%, 94%)

CMYK

cmyk(0%, 43%, 62%, 6%)

Oklch

oklch(73.1% 0.139 44.3)

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

#F8D25B

Ginger · SandyBrown · Sunflower

HEX

#F8D25B

RGB

rgb(248, 210, 91)

HSL

hsl(45, 92%, 66%)

HSB

hsb(45, 63%, 97%)

CMYK

cmyk(0%, 15%, 63%, 3%)

Oklch

oklch(87.4% 0.142 91.4)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

524C78

71764C

Analogous

4C5B76

524C78

674C76

Triadic

524C78

76514C

4C7651

Split-Comp.

524C78

76674C

5B764C

Tetradic

524C78

764C5B

71764C

4C7667

Contrast Matrix WCAG 2.1 Contrast

524C78	9F4C68	DA565B	EF895B	F8D25B
—	1.4 Fail	2.1 Fail	3.2 AA Large	5.4 AA
1.4 Fail	—	1.5 Fail	2.3 Fail	3.9 AA Large
2.1 Fail	1.5 Fail	—	1.5 Fail	2.6 Fail
3.2 AA Large	2.3 Fail	1.5 Fail	—	1.7 Fail
5.4 AA	3.9 AA Large	2.6 Fail	1.7 Fail	—

White BG

7.9AAA

5.7AA

3.8AA Large

2.5Fail

1.5Fail

Black BG

2.7Fail

3.7AA Large

5.5AA

8.4AAA

14.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4F4F6D

7B7A61

A1A05A

C3C266

E8E778

Deuteranopia

50506B

808660

A9B25A

C9D069

EAED7F

Tritanopia

526563

9B5C5B

D35959

EA6F71

F68F94

Achromatopsia

535353

686868

7E7E7E

A2A2A2

D0D0D0

Shades & Tints Shades & Tints

#524C78

Dark

Light

#9F4C68

Dark

Light

#DA565B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #524c78;
  --color-2: #9f4c68;
  --color-3: #da565b;
  --color-4: #ef895b;
  --color-5: #f8d25b;
}

SCSS

$color-1: #524c78;
$color-2: #9f4c68;
$color-3: #da565b;
$color-4: #ef895b;
$color-5: #f8d25b;

TAILWIND

colors: {
  'brand-1': '#524c78',
  'brand-2': '#9f4c68',
  'brand-3': '#da565b',
  'brand-4': '#ef895b',
  'brand-5': '#f8d25b',
}

RGB Array

[82, 76, 120], [159, 76, 104], [218, 86, 91], [239, 137, 91], [248, 210, 91]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This skin-style palette of #524C78, #9F4C68, #DA565B, #EF895B, #F8D25B 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: #524c78; --color-2: #9f4c68; --color-3: #da565b; --color-4: #ef895b; --color-5: #f8d25b. 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 skin-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