← Back to Editor

#ED7809 · #BA683B · #86576D · #644D8F · #3E41B4

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

#ED7809

Tangerine · Chocolate · Amber Brown

HEX
#ED7809
RGB
rgb(237, 120, 9)
HSL
hsl(29, 93%, 48%)
HSB
hsb(29, 96%, 93%)
CMYK
cmyk(0%, 49%, 96%, 7%)
Oklch
oklch(69.5% 0.174 53.2)

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

#BA683B

Tangerine · Sienna · Amber Brown

HEX
#BA683B
RGB
rgb(186, 104, 59)
HSL
hsl(21, 52%, 48%)
HSB
hsb(21, 68%, 73%)
CMYK
cmyk(0%, 44%, 68%, 27%)
Oklch
oklch(60.2% 0.121 47.9)

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

#86576D

Dark Violet · DimGray · Camellia

HEX
#86576D
RGB
rgb(134, 87, 109)
HSL
hsl(332, 21%, 43%)
HSB
hsb(332, 35%, 53%)
CMYK
cmyk(0%, 35%, 19%, 47%)
Oklch
oklch(51.5% 0.069 350.2)

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

#644D8F

Deep Indigo · DarkSlateBlue · Violet

HEX
#644D8F
RGB
rgb(100, 77, 143)
HSL
hsl(261, 30%, 43%)
HSB
hsb(261, 46%, 56%)
CMYK
cmyk(30%, 46%, 0%, 44%)
Oklch
oklch(47.4% 0.106 298.4)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

#3E41B4

Indigo · DarkSlateBlue · Navy Blue

HEX
#3E41B4
RGB
rgb(62, 65, 180)
HSL
hsl(238, 49%, 47%)
HSB
hsb(238, 66%, 71%)
CMYK
cmyk(66%, 64%, 0%, 29%)
Oklch
oklch(44.7% 0.178 275.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ED7809
097EEC

Analogous

EC090C
ED7809
ECE809

Triadic

ED7809
09EC77
7709EC

Split-Comp.

ED7809
09ECE8
090CEC

Tetradic

ED7809
0CEC09
097EEC
E809EC

Contrast Matrix WCAG 2.1 Contrast

ED7809
BA683B
86576D
644D8F
3E41B4
—
1.4
Fail
2.0
Fail
2.4
Fail
2.8
Fail
1.4
Fail
—
1.4
Fail
1.7
Fail
2.0
Fail
2.0
Fail
1.4
Fail
—
1.2
Fail
1.4
Fail
2.4
Fail
1.7
Fail
1.2
Fail
—
1.1
Fail
2.8
Fail
2.0
Fail
1.4
Fail
1.1
Fail
—
White BG
2.9Fail
4.1AA Large
5.8AA
7.0AA
8.0AAA
Black BG
7.3AAA
5.1AA
3.6AA Large
3.0AA Large
2.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BAB924
969646
727168
5A5A7F
3F3F98

Deuteranopia

C1CA2A
9BA149
747866
5B5D7B
3F3F92

Tritanopia

E7393E
B64E50
846363
637270
3E827D

Achromatopsia

8E8E8E
7B7B7B
686868
5B5B5B
4D4D4D

Shades & Tints Shades & Tints

#ED7809

Dark
Light

#BA683B

Dark
Light

#86576D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ed7809;
  --color-2: #ba683b;
  --color-3: #86576d;
  --color-4: #644d8f;
  --color-5: #3e41b4;
}

SCSS

$color-1: #ed7809;
$color-2: #ba683b;
$color-3: #86576d;
$color-4: #644d8f;
$color-5: #3e41b4;

TAILWIND

colors: {
  'brand-1': '#ed7809',
  'brand-2': '#ba683b',
  'brand-3': '#86576d',
  'brand-4': '#644d8f',
  'brand-5': '#3e41b4',
}

RGB Array

[237, 120, 9], [186, 104, 59], [134, 87, 109], [100, 77, 143], [62, 65, 180]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ED7809, #BA683B, #86576D, #644D8F, #3E41B4 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: #ed7809; --color-2: #ba683b; --color-3: #86576d; --color-4: #644d8f; --color-5: #3e41b4. 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