← Back to Editor

#FF7076 · #DE8E6C · #B6A46C · #7CB070 · #4EB193

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

#FF7076

Peach Pink · Salmon · Coral Red

HEX
#FF7076
RGB
rgb(255, 112, 118)
HSL
hsl(357, 100%, 72%)
HSB
hsb(357, 56%, 100%)
CMYK
cmyk(0%, 56%, 54%, 0%)
Oklch
oklch(72.0% 0.175 20.0)

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

#DE8E6C

Apricot · DarkSalmon · Warm Sun

HEX
#DE8E6C
RGB
rgb(222, 142, 108)
HSL
hsl(18, 63%, 65%)
HSB
hsb(18, 51%, 87%)
CMYK
cmyk(0%, 36%, 51%, 13%)
Oklch
oklch(72.1% 0.109 43.7)

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

#B6A46C

Ginger · Tan · Sunflower

HEX
#B6A46C
RGB
rgb(182, 164, 108)
HSL
hsl(45, 34%, 57%)
HSB
hsb(45, 41%, 71%)
CMYK
cmyk(0%, 10%, 41%, 29%)
Oklch
oklch(72.1% 0.077 92.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#7CB070

Celadon · DarkSeaGreen · Olive Green

HEX
#7CB070
RGB
rgb(124, 176, 112)
HSL
hsl(109, 29%, 56%)
HSB
hsb(109, 36%, 69%)
CMYK
cmyk(30%, 0%, 36%, 31%)
Oklch
oklch(70.4% 0.106 139.8)

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

#4EB193

Mineral Blue · CadetBlue · Mint Ice

HEX
#4EB193
RGB
rgb(78, 177, 147)
HSL
hsl(162, 39%, 50%)
HSB
hsb(162, 56%, 69%)
CMYK
cmyk(56%, 0%, 17%, 31%)
Oklch
oklch(69.3% 0.104 170.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF7076
70FFF8

Analogous

FF70BF
FF7076
FFB070

Triadic

FF7076
77FF70
7077FF

Split-Comp.

FF7076
70FFB0
70BFFF

Tetradic

FF7076
BFFF70
70FFF8
B070FF

Contrast Matrix WCAG 2.1 Contrast

FF7076
DE8E6C
B6A46C
7CB070
4EB193
—
1.0
Fail
1.1
Fail
1.1
Fail
1.0
Fail
1.0
Fail
—
1.0
Fail
1.0
Fail
1.0
Fail
1.1
Fail
1.0
Fail
—
1.0
Fail
1.1
Fail
1.1
Fail
1.0
Fail
1.0
Fail
—
1.0
Fail
1.0
Fail
1.0
Fail
1.1
Fail
1.0
Fail
—
White BG
2.7Fail
2.6Fail
2.5Fail
2.5Fail
2.6Fail
Black BG
7.8AAA
8.2AAA
8.5AAA
8.3AAA
8.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C1C075
BBBB74
AEAE7A
93937F
797A9A

Deuteranopia

C9D474
C0C676
AFB17D
908C83
736C9C

Tritanopia

F87373
DA7B7C
B58487
7F8C8E
53A0A1

Achromatopsia

9B9B9B
A2A2A2
A3A3A3
999999
909090

Shades & Tints Shades & Tints

#FF7076

Dark
Light

#DE8E6C

Dark
Light

#B6A46C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff7076;
  --color-2: #de8e6c;
  --color-3: #b6a46c;
  --color-4: #7cb070;
  --color-5: #4eb193;
}

SCSS

$color-1: #ff7076;
$color-2: #de8e6c;
$color-3: #b6a46c;
$color-4: #7cb070;
$color-5: #4eb193;

TAILWIND

colors: {
  'brand-1': '#ff7076',
  'brand-2': '#de8e6c',
  'brand-3': '#b6a46c',
  'brand-4': '#7cb070',
  'brand-5': '#4eb193',
}

RGB Array

[255, 112, 118], [222, 142, 108], [182, 164, 108], [124, 176, 112], [78, 177, 147]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF7076, #DE8E6C, #B6A46C, #7CB070, #4EB193 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: #ff7076; --color-2: #de8e6c; --color-3: #b6a46c; --color-4: #7cb070; --color-5: #4eb193. 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