← Back to Editor

#ECB02E · #FE7650 · #DF616F · #88765E · #759379

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

#ECB02E

Ginger · GoldenRod · Sunflower

HEX
#ECB02E
RGB
rgb(236, 176, 46)
HSL
hsl(41, 83%, 55%)
HSB
hsb(41, 81%, 93%)
CMYK
cmyk(0%, 25%, 81%, 7%)
Oklch
oklch(79.3% 0.151 81.5)

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

#FE7650

Peach Pink · Coral · Coral Red

HEX
#FE7650
RGB
rgb(254, 118, 80)
HSL
hsl(13, 99%, 65%)
HSB
hsb(13, 69%, 100%)
CMYK
cmyk(0%, 54%, 69%, 0%)
Oklch
oklch(72.1% 0.175 36.5)

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

#DF616F

Peach Pink · LightCoral · Coral Red

HEX
#DF616F
RGB
rgb(223, 97, 111)
HSL
hsl(353, 66%, 63%)
HSB
hsb(353, 57%, 87%)
CMYK
cmyk(0%, 57%, 50%, 13%)
Oklch
oklch(65.3% 0.158 15.8)

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

#88765E

Ochre · DimGray · Amber Brown

HEX
#88765E
RGB
rgb(136, 118, 94)
HSL
hsl(34, 18%, 45%)
HSB
hsb(34, 31%, 53%)
CMYK
cmyk(0%, 13%, 31%, 47%)
Oklch
oklch(57.6% 0.042 74.8)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#759379

Celadon · Gray · Olive Green

HEX
#759379
RGB
rgb(117, 147, 121)
HSL
hsl(128, 12%, 52%)
HSB
hsb(128, 20%, 58%)
CMYK
cmyk(20%, 0%, 18%, 42%)
Oklch
oklch(63.3% 0.051 148.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECB02E
2D69EB

Analogous

EB502D
ECB02E
C9EB2D

Triadic

ECB02E
2DEBAF
AF2DEB

Split-Comp.

ECB02E
2DC9EB
502DEB

Tetradic

ECB02E
2DEB50
2D69EB
EB2DC9

Contrast Matrix WCAG 2.1 Contrast

ECB02E
FE7650
DF616F
88765E
759379
—
1.4
Fail
1.8
Fail
2.3
Fail
1.7
Fail
1.4
Fail
—
1.3
Fail
1.7
Fail
1.3
Fail
1.8
Fail
1.3
Fail
—
1.3
Fail
1.0
Fail
2.3
Fail
1.7
Fail
1.3
Fail
—
1.3
Fail
1.7
Fail
1.3
Fail
1.0
Fail
1.3
Fail
—
White BG
1.9Fail
2.7Fail
3.5AA Large
4.4AA Large
3.4AA Large
Black BG
10.8AAA
7.9AAA
6.1AA
4.8AA
6.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D2D14D
C3C259
A8A76C
808064
82827F

Deuteranopia

D6DA55
CBD55B
B0B96B
818365
807E81

Tritanopia

E9666C
F76062
D96968
876869
768485

Achromatopsia

B3B3B3
9A9A9A
888888
797979
878787

Shades & Tints Shades & Tints

#ECB02E

Dark
Light

#FE7650

Dark
Light

#DF616F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ecb02e;
  --color-2: #fe7650;
  --color-3: #df616f;
  --color-4: #88765e;
  --color-5: #759379;
}

SCSS

$color-1: #ecb02e;
$color-2: #fe7650;
$color-3: #df616f;
$color-4: #88765e;
$color-5: #759379;

TAILWIND

colors: {
  'brand-1': '#ecb02e',
  'brand-2': '#fe7650',
  'brand-3': '#df616f',
  'brand-4': '#88765e',
  'brand-5': '#759379',
}

RGB Array

[236, 176, 46], [254, 118, 80], [223, 97, 111], [136, 118, 94], [117, 147, 121]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ECB02E, #FE7650, #DF616F, #88765E, #759379 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: #ecb02e; --color-2: #fe7650; --color-3: #df616f; --color-4: #88765e; --color-5: #759379. 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