← Back to Editor

#ED7E7E · #CF7B57 · #A19F7F · #8FBFA7 · #C7C4AB

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#ED7E7E

Peach Pink · LightCoral · Coral Red

HEX
#ED7E7E
RGB
rgb(237, 126, 126)
HSL
hsl(0, 76%, 71%)
HSB
hsb(0, 47%, 93%)
CMYK
cmyk(0%, 47%, 47%, 7%)
Oklch
oklch(71.7% 0.137 21.0)

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

#CF7B57

Tangerine · Coral · Warm Sun

HEX
#CF7B57
RGB
rgb(207, 123, 87)
HSL
hsl(18, 56%, 58%)
HSB
hsb(18, 58%, 81%)
CMYK
cmyk(0%, 41%, 58%, 19%)
Oklch
oklch(66.6% 0.116 43.6)

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

#A19F7F

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#A19F7F
RGB
rgb(161, 159, 127)
HSL
hsl(56, 15%, 56%)
HSB
hsb(56, 21%, 63%)
CMYK
cmyk(0%, 1%, 21%, 37%)
Oklch
oklch(69.6% 0.045 104.5)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#8FBFA7

Jade · DarkSeaGreen · Apple Green

HEX
#8FBFA7
RGB
rgb(143, 191, 167)
HSL
hsl(150, 27%, 65%)
HSB
hsb(150, 25%, 75%)
CMYK
cmyk(25%, 0%, 13%, 25%)
Oklch
oklch(76.4% 0.061 162.8)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#C7C4AB

Fresh Green · Silver · Sunflower

HEX
#C7C4AB
RGB
rgb(199, 196, 171)
HSL
hsl(54, 20%, 73%)
HSB
hsb(54, 14%, 78%)
CMYK
cmyk(0%, 2%, 14%, 22%)
Oklch
oklch(81.6% 0.034 101.5)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ED7E7E
7DEDED

Analogous

ED7DB5
ED7E7E
EDB57D

Triadic

ED7E7E
7DED7D
7D7DED

Split-Comp.

ED7E7E
7DEDB5
7DB5ED

Tetradic

ED7E7E
B5ED7D
7DEDED
B57DED

Contrast Matrix WCAG 2.1 Contrast

ED7E7E
CF7B57
A19F7F
8FBFA7
C7C4AB
—
1.2
Fail
1.0
Fail
1.3
Fail
1.5
Fail
1.2
Fail
—
1.2
Fail
1.5
Fail
1.8
Fail
1.0
Fail
1.2
Fail
—
1.3
Fail
1.5
Fail
1.3
Fail
1.5
Fail
1.3
Fail
—
1.2
Fail
1.5
Fail
1.8
Fail
1.5
Fail
1.2
Fail
—
White BG
2.7Fail
3.2AA Large
2.7Fail
2.1Fail
1.8Fail
Black BG
7.9AAA
6.6AA
7.8AAA
10.2AAA
11.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BDBC7E
ABAA60
A0A087
A4A4AD
C6C6B1

Deuteranopia

C3CC7E
B0B662
A0A089
A19DAE
C6C6B3

Tritanopia

E77E7E
CB6768
A18D8E
91B1B2
C7B6B7

Achromatopsia

9F9F9F
909090
9C9C9C
AEAEAE
C2C2C2

Shades & Tints Shades & Tints

#ED7E7E

Dark
Light

#CF7B57

Dark
Light

#A19F7F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ed7e7e;
  --color-2: #cf7b57;
  --color-3: #a19f7f;
  --color-4: #8fbfa7;
  --color-5: #c7c4ab;
}

SCSS

$color-1: #ed7e7e;
$color-2: #cf7b57;
$color-3: #a19f7f;
$color-4: #8fbfa7;
$color-5: #c7c4ab;

TAILWIND

colors: {
  'brand-1': '#ed7e7e',
  'brand-2': '#cf7b57',
  'brand-3': '#a19f7f',
  'brand-4': '#8fbfa7',
  'brand-5': '#c7c4ab',
}

RGB Array

[237, 126, 126], [207, 123, 87], [161, 159, 127], [143, 191, 167], [199, 196, 171]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ED7E7E, #CF7B57, #A19F7F, #8FBFA7, #C7C4AB 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: #ed7e7e; --color-2: #cf7b57; --color-3: #a19f7f; --color-4: #8fbfa7; --color-5: #c7c4ab. 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