#578D8F + #F7818D + #FFD79B + #BA5C76 + #C38182 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#578D8F

Slate Blue · CadetBlue · Mint Ice

HEX

#578D8F

RGB

rgb(87, 141, 143)

HSL

hsl(182, 24%, 45%)

HSB

hsb(182, 39%, 56%)

CMYK

cmyk(39%, 1%, 0%, 44%)

Oklch

oklch(60.7% 0.057 198.8)

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

#F7818D

Peach Pink · LightCoral · Coral Red

HEX

#F7818D

RGB

rgb(247, 129, 141)

HSL

hsl(354, 88%, 74%)

HSB

hsb(354, 48%, 97%)

CMYK

cmyk(0%, 48%, 43%, 3%)

Oklch

oklch(73.8% 0.144 14.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#FFD79B

Goose Yellow · Khaki · Peach Orange

HEX

#FFD79B

RGB

rgb(255, 215, 155)

HSL

hsl(36, 100%, 80%)

HSB

hsb(36, 39%, 100%)

CMYK

cmyk(0%, 16%, 39%, 0%)

Oklch

oklch(90.0% 0.088 77.4)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#BA5C76

Dark Violet · LightCoral · Rose Pink

HEX

#BA5C76

RGB

rgb(186, 92, 118)

HSL

hsl(343, 41%, 55%)

HSB

hsb(343, 51%, 73%)

CMYK

cmyk(0%, 51%, 37%, 27%)

Oklch

oklch(59.5% 0.124 4.0)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#C38182

Peach Pink · DarkSalmon · Coral Red

HEX

#C38182

RGB

rgb(195, 129, 130)

HSL

hsl(359, 35%, 64%)

HSB

hsb(359, 34%, 76%)

CMYK

cmyk(0%, 34%, 33%, 24%)

Oklch

oklch(67.1% 0.082 18.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

578D8F

8E5957

Analogous

578E75

578D8F

57718E

Triadic

578D8F

8E578C

8C8E57

Split-Comp.

578D8F

8E5771

8E7557

Tetradic

578D8F

75578E

8E5957

718E57

Contrast Matrix WCAG 2.1 Contrast

578D8F	F7818D	FFD79B	BA5C76	C38182
—	1.5 Fail	2.8 Fail	1.1 Fail	1.2 Fail
1.5 Fail	—	1.8 Fail	1.7 Fail	1.3 Fail
2.8 Fail	1.8 Fail	—	3.2 AA Large	2.3 Fail
1.1 Fail	1.7 Fail	3.2 AA Large	—	1.4 Fail
1.2 Fail	1.3 Fail	2.3 Fail	1.4 Fail	—

White BG

3.7AA Large

2.5Fail

1.4Fail

4.3AA Large

3.1AA Large

Black BG

5.6AA

8.5AAA

15.4AAA

4.9AA

6.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6E6F8F

C4C38A

EEEDAA

919070

A6A682

Deuteranopia

6B678E

CBD489

F0F3AD

979E6E

AAAF82

Tritanopia

5A8E8E

F18887

FDB5B8

B56B6A

C08282

Achromatopsia

7D7D7D

A6A6A6

DCDCDC

7B7B7B

959595

Shades & Tints Shades & Tints

#578D8F

Dark

Light

#F7818D

Dark

Light

#FFD79B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #578d8f;
  --color-2: #f7818d;
  --color-3: #ffd79b;
  --color-4: #ba5c76;
  --color-5: #c38182;
}

SCSS

$color-1: #578d8f;
$color-2: #f7818d;
$color-3: #ffd79b;
$color-4: #ba5c76;
$color-5: #c38182;

TAILWIND

colors: {
  'brand-1': '#578d8f',
  'brand-2': '#f7818d',
  'brand-3': '#ffd79b',
  'brand-4': '#ba5c76',
  'brand-5': '#c38182',
}

RGB Array

[87, 141, 143], [247, 129, 141], [255, 215, 155], [186, 92, 118], [195, 129, 130]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #578D8F, #F7818D, #FFD79B, #BA5C76, #C38182 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: #578d8f; --color-2: #f7818d; --color-3: #ffd79b; --color-4: #ba5c76; --color-5: #c38182. 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