← Back to Editor

#E78333 · #D5670E · #75594A · #BABE41 · #798562

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

#E78333

Tangerine · Coral · Warm Sun

HEX
#E78333
RGB
rgb(231, 131, 51)
HSL
hsl(27, 79%, 55%)
HSB
hsb(27, 78%, 91%)
CMYK
cmyk(0%, 43%, 78%, 9%)
Oklch
oklch(70.6% 0.152 55.0)

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

#D5670E

Tangerine · Chocolate · Amber Brown

HEX
#D5670E
RGB
rgb(213, 103, 14)
HSL
hsl(27, 88%, 45%)
HSB
hsb(27, 93%, 84%)
CMYK
cmyk(0%, 52%, 93%, 16%)
Oklch
oklch(63.5% 0.162 50.6)

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

#75594A

Tangerine · DimGray · Amber Brown

HEX
#75594A
RGB
rgb(117, 89, 74)
HSL
hsl(21, 23%, 37%)
HSB
hsb(21, 37%, 46%)
CMYK
cmyk(0%, 24%, 37%, 54%)
Oklch
oklch(48.9% 0.044 49.5)

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

#BABE41

Autumn Sage · GoldenRod · Honey Gold

HEX
#BABE41
RGB
rgb(186, 190, 65)
HSL
hsl(62, 49%, 50%)
HSB
hsb(62, 66%, 75%)
CMYK
cmyk(2%, 0%, 66%, 25%)
Oklch
oklch(77.5% 0.145 111.1)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#798562

Grass Green · Gray · Olive Green

HEX
#798562
RGB
rgb(121, 133, 98)
HSL
hsl(81, 15%, 45%)
HSB
hsb(81, 26%, 52%)
CMYK
cmyk(9%, 0%, 26%, 48%)
Oklch
oklch(59.7% 0.053 123.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E78333
3295E7

Analogous

E7323B
E78333
E7DE32

Triadic

E78333
32E783
8332E7

Split-Comp.

E78333
32E7DE
323BE7

Tetradic

E78333
3BE732
3295E7
DE32E7

Contrast Matrix WCAG 2.1 Contrast

E78333
D5670E
75594A
BABE41
798562
—
1.3
Fail
2.3
Fail
1.4
Fail
1.4
Fail
1.3
Fail
—
1.8
Fail
1.8
Fail
1.1
Fail
2.3
Fail
1.8
Fail
—
3.2
AA Large
1.6
Fail
1.4
Fail
1.8
Fail
3.2
AA Large
—
2.0
Fail
1.4
Fail
1.1
Fail
1.6
Fail
2.0
Fail
—
White BG
2.7Fail
3.6AA Large
6.4AA
2.0Fail
3.9AA Large
Black BG
7.7AAA
5.8AA
3.3AA Large
10.5AAA
5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BCBB46
A5A424
69694E
BCBC5F
7E7E6A

Deuteranopia

C2C94B
ACB429
6B6D4F
BCBB67
7E7D6D

Tritanopia

E25659
D03538
745051
BA777C
7A7173

Achromatopsia

989898
7E7E7E
606060
AFAFAF
7D7D7D

Shades & Tints Shades & Tints

#E78333

Dark
Light

#D5670E

Dark
Light

#75594A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e78333;
  --color-2: #d5670e;
  --color-3: #75594a;
  --color-4: #babe41;
  --color-5: #798562;
}

SCSS

$color-1: #e78333;
$color-2: #d5670e;
$color-3: #75594a;
$color-4: #babe41;
$color-5: #798562;

TAILWIND

colors: {
  'brand-1': '#e78333',
  'brand-2': '#d5670e',
  'brand-3': '#75594a',
  'brand-4': '#babe41',
  'brand-5': '#798562',
}

RGB Array

[231, 131, 51], [213, 103, 14], [117, 89, 74], [186, 190, 65], [121, 133, 98]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E78333, #D5670E, #75594A, #BABE41, #798562 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: #e78333; --color-2: #d5670e; --color-3: #75594a; --color-4: #babe41; --color-5: #798562. 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