← Back to Editor

#E04B00 · #7F608F · #68879C · #7DB8A1 · #D4CFA5

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

#E04B00

Tangerine · OrangeRed · Amber Brown

HEX
#E04B00
RGB
rgb(224, 75, 0)
HSL
hsl(20, 100%, 44%)
HSB
hsb(20, 100%, 88%)
CMYK
cmyk(0%, 67%, 100%, 12%)
Oklch
oklch(61.4% 0.196 39.2)

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

#7F608F

Dark Plum · Gray · Violet

HEX
#7F608F
RGB
rgb(127, 96, 143)
HSL
hsl(280, 20%, 47%)
HSB
hsb(280, 33%, 56%)
CMYK
cmyk(11%, 33%, 0%, 44%)
Oklch
oklch(53.8% 0.080 313.8)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

#68879C

Slate Blue · LightSlateGray · Navy Blue

HEX
#68879C
RGB
rgb(104, 135, 156)
HSL
hsl(204, 21%, 51%)
HSB
hsb(204, 33%, 61%)
CMYK
cmyk(33%, 13%, 0%, 39%)
Oklch
oklch(60.7% 0.048 238.2)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#7DB8A1

Jade · DarkSeaGreen · Apple Green

HEX
#7DB8A1
RGB
rgb(125, 184, 161)
HSL
hsl(157, 29%, 61%)
HSB
hsb(157, 32%, 72%)
CMYK
cmyk(32%, 0%, 13%, 28%)
Oklch
oklch(73.5% 0.070 168.1)

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

#D4CFA5

Fresh Green · Silver · Sunflower

HEX
#D4CFA5
RGB
rgb(212, 207, 165)
HSL
hsl(54, 35%, 74%)
HSB
hsb(54, 22%, 83%)
CMYK
cmyk(0%, 2%, 22%, 17%)
Oklch
oklch(84.8% 0.056 101.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E04B00
0096E0

Analogous

E00025
E04B00
E0BB00

Triadic

E04B00
00E04B
4B00E0

Split-Comp.

E04B00
00E0BB
0025E0

Tetradic

E04B00
25E000
0096E0
BB00E0

Contrast Matrix WCAG 2.1 Contrast

E04B00
7F608F
68879C
7DB8A1
D4CFA5
—
1.3
Fail
1.1
Fail
1.8
Fail
2.6
Fail
1.3
Fail
—
1.4
Fail
2.3
Fail
3.3
AA Large
1.1
Fail
1.4
Fail
—
1.7
Fail
2.4
Fail
1.8
Fail
2.3
Fail
1.7
Fail
—
1.4
Fail
2.6
Fail
3.3
AA Large
2.4
Fail
1.4
Fail
—
White BG
4.1AA Large
5.3AA
3.8AA Large
2.3Fail
1.6Fail
Black BG
5.2AA
4.0AA Large
5.5AA
9.2AAA
13.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9F9E12
727184
757697
9797A7
D2D2AF

Deuteranopia

A8B317
737681
747196
938FA8
D2D2B2

Tritanopia

D92024
7D7B79
6A9392
80ABAC
D4B7B9

Achromatopsia

6F6F6F
6F6F6F
808080
A4A4A4
CCCCCC

Shades & Tints Shades & Tints

#E04B00

Dark
Light

#7F608F

Dark
Light

#68879C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e04b00;
  --color-2: #7f608f;
  --color-3: #68879c;
  --color-4: #7db8a1;
  --color-5: #d4cfa5;
}

SCSS

$color-1: #e04b00;
$color-2: #7f608f;
$color-3: #68879c;
$color-4: #7db8a1;
$color-5: #d4cfa5;

TAILWIND

colors: {
  'brand-1': '#e04b00',
  'brand-2': '#7f608f',
  'brand-3': '#68879c',
  'brand-4': '#7db8a1',
  'brand-5': '#d4cfa5',
}

RGB Array

[224, 75, 0], [127, 96, 143], [104, 135, 156], [125, 184, 161], [212, 207, 165]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E04B00, #7F608F, #68879C, #7DB8A1, #D4CFA5 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: #e04b00; --color-2: #7f608f; --color-3: #68879c; --color-4: #7db8a1; --color-5: #d4cfa5. 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