← Back to Editor

#C78B8F · #DE6F76 · #ED3C47 · #574E4E · #3BE1ED

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#C78B8F

Peach Pink · DarkSalmon · Coral Red

HEX
#C78B8F
RGB
rgb(199, 139, 143)
HSL
hsl(356, 35%, 66%)
HSB
hsb(356, 30%, 78%)
CMYK
cmyk(0%, 30%, 28%, 22%)
Oklch
oklch(69.7% 0.074 14.7)

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

#DE6F76

Peach Pink · LightCoral · Coral Red

HEX
#DE6F76
RGB
rgb(222, 111, 118)
HSL
hsl(356, 63%, 65%)
HSB
hsb(356, 50%, 87%)
CMYK
cmyk(0%, 50%, 47%, 13%)
Oklch
oklch(67.3% 0.139 17.6)

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

#ED3C47

Vermilion · Tomato · Passion Red

HEX
#ED3C47
RGB
rgb(237, 60, 71)
HSL
hsl(356, 83%, 58%)
HSB
hsb(356, 75%, 93%)
CMYK
cmyk(0%, 75%, 70%, 7%)
Oklch
oklch(62.7% 0.212 22.8)

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

#574E4E

Ink Gray · DarkSlateGray · Charcoal

HEX
#574E4E
RGB
rgb(87, 78, 78)
HSL
hsl(0, 5%, 32%)
HSB
hsb(0, 10%, 34%)
CMYK
cmyk(0%, 10%, 10%, 66%)
Oklch
oklch(43.3% 0.012 17.6)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#3BE1ED

Lake Blue · Turquoise · Lake Green

HEX
#3BE1ED
RGB
rgb(59, 225, 237)
HSL
hsl(184, 83%, 58%)
HSB
hsb(184, 75%, 93%)
CMYK
cmyk(75%, 5%, 0%, 7%)
Oklch
oklch(83.3% 0.130 202.4)

Traditional「Lake Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C78B8F
8AC7C3

Analogous

C78AAC
C78B8F
C7A48A

Triadic

C78B8F
8EC78A
8A8EC7

Split-Comp.

C78B8F
8AC7A4
8AACC7

Tetradic

C78B8F
ACC78A
8AC7C3
A48AC7

Contrast Matrix WCAG 2.1 Contrast

C78B8F
DE6F76
ED3C47
574E4E
3BE1ED
—
1.1
Fail
1.4
Fail
2.9
Fail
1.8
Fail
1.1
Fail
—
1.2
Fail
2.5
Fail
2.0
Fail
1.4
Fail
1.2
Fail
—
2.0
Fail
2.5
Fail
2.9
Fail
2.5
Fail
2.0
Fail
—
5.1
AA
1.8
Fail
2.0
Fail
2.5
Fail
5.1
AA
—
White BG
2.8Fail
3.2AA Large
3.9AA Large
8.1AAA
1.6Fail
Black BG
7.5AAA
6.6AA
5.3AA
2.6Fail
13.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ADAC8E
AEAD74
A09F44
53534E
8384EA

Deuteranopia

B1B58E
B4BD74
ABB844
54544E
796DE9

Tritanopia

C48D8D
D87373
E44242
574E4E
43E8E7

Achromatopsia

9D9D9D
919191
727272
515151
B1B1B1

Shades & Tints Shades & Tints

#C78B8F

Dark
Light

#DE6F76

Dark
Light

#ED3C47

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c78b8f;
  --color-2: #de6f76;
  --color-3: #ed3c47;
  --color-4: #574e4e;
  --color-5: #3be1ed;
}

SCSS

$color-1: #c78b8f;
$color-2: #de6f76;
$color-3: #ed3c47;
$color-4: #574e4e;
$color-5: #3be1ed;

TAILWIND

colors: {
  'brand-1': '#c78b8f',
  'brand-2': '#de6f76',
  'brand-3': '#ed3c47',
  'brand-4': '#574e4e',
  'brand-5': '#3be1ed',
}

RGB Array

[199, 139, 143], [222, 111, 118], [237, 60, 71], [87, 78, 78], [59, 225, 237]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C78B8F, #DE6F76, #ED3C47, #574E4E, #3BE1ED 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: #c78b8f; --color-2: #de6f76; --color-3: #ed3c47; --color-4: #574e4e; --color-5: #3be1ed. 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