← Back to Editor

#E57035 · #B97F61 · #8D8D8E · #619CBA · #35AAE6

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

#E57035

Tangerine · Chocolate · Warm Sun

HEX
#E57035
RGB
rgb(229, 112, 53)
HSL
hsl(20, 77%, 55%)
HSB
hsb(20, 77%, 90%)
CMYK
cmyk(0%, 51%, 77%, 10%)
Oklch
oklch(67.4% 0.162 44.9)

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

#B97F61

Tangerine · DarkSalmon · Warm Sun

HEX
#B97F61
RGB
rgb(185, 127, 97)
HSL
hsl(20, 39%, 55%)
HSB
hsb(20, 48%, 73%)
CMYK
cmyk(0%, 31%, 48%, 27%)
Oklch
oklch(64.8% 0.084 48.1)

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

#8D8D8E

Ash · Gray · Warm Gray

HEX
#8D8D8E
RGB
rgb(141, 141, 142)
HSL
hsl(240, 0%, 55%)
HSB
hsb(240, 1%, 56%)
CMYK
cmyk(1%, 1%, 0%, 44%)
Oklch
oklch(64.4% 0.001 286.4)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#619CBA

Slate Blue · CadetBlue · Navy Blue

HEX
#619CBA
RGB
rgb(97, 156, 186)
HSL
hsl(200, 39%, 55%)
HSB
hsb(200, 48%, 73%)
CMYK
cmyk(48%, 16%, 0%, 27%)
Oklch
oklch(66.4% 0.076 231.6)

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

#35AAE6

Lake Blue · DodgerBlue · Navy Blue

HEX
#35AAE6
RGB
rgb(53, 170, 230)
HSL
hsl(200, 78%, 55%)
HSB
hsb(200, 77%, 90%)
CMYK
cmyk(77%, 26%, 0%, 10%)
Oklch
oklch(70.0% 0.133 236.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E57035
34AAE5

Analogous

E53451
E57035
E5C734

Triadic

E57035
34E56F
6F34E5

Split-Comp.

E57035
34E5C7
3451E5

Tetradic

E57035
51E534
34AAE5
C734E5

Contrast Matrix WCAG 2.1 Contrast

E57035
B97F61
8D8D8E
619CBA
35AAE6
—
1.1
Fail
1.1
Fail
1.0
Fail
1.2
Fail
1.1
Fail
—
1.0
Fail
1.1
Fail
1.3
Fail
1.1
Fail
1.0
Fail
—
1.1
Fail
1.3
Fail
1.0
Fail
1.1
Fail
1.1
Fail
—
1.2
Fail
1.2
Fail
1.3
Fail
1.3
Fail
1.2
Fail
—
White BG
3.1AA Large
3.3AA Large
3.3AA Large
3.0AA Large
2.6Fail
Black BG
6.7AA
6.3AA
6.3AA
7.0AA
8.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B2B143
A09F68
8D8D8E
7B7BB3
6869D7

Deuteranopia

B9C247
A3A86A
8D8D8E
7773B1
6158D4

Tritanopia

DF4F51
B66E6F
8D8E8E
64ADAC
3BCCCA

Achromatopsia

8C8C8C
8D8D8D
8D8D8D
8E8E8E
8E8E8E

Shades & Tints Shades & Tints

#E57035

Dark
Light

#B97F61

Dark
Light

#8D8D8E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e57035;
  --color-2: #b97f61;
  --color-3: #8d8d8e;
  --color-4: #619cba;
  --color-5: #35aae6;
}

SCSS

$color-1: #e57035;
$color-2: #b97f61;
$color-3: #8d8d8e;
$color-4: #619cba;
$color-5: #35aae6;

TAILWIND

colors: {
  'brand-1': '#e57035',
  'brand-2': '#b97f61',
  'brand-3': '#8d8d8e',
  'brand-4': '#619cba',
  'brand-5': '#35aae6',
}

RGB Array

[229, 112, 53], [185, 127, 97], [141, 141, 142], [97, 156, 186], [53, 170, 230]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E57035, #B97F61, #8D8D8E, #619CBA, #35AAE6 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: #e57035; --color-2: #b97f61; --color-3: #8d8d8e; --color-4: #619cba; --color-5: #35aae6. 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