← Back to Editor

#DA5A37 · #E39F56 · #888052 · #6B755C · #49403B

summer

A 5-color summer 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

#DA5A37

Vermilion · Chocolate · Passion Red

HEX
#DA5A37
RGB
rgb(218, 90, 55)
HSL
hsl(13, 69%, 54%)
HSB
hsb(13, 75%, 85%)
CMYK
cmyk(0%, 59%, 75%, 15%)
Oklch
oklch(62.6% 0.169 36.1)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#E39F56

Ginger · SandyBrown · Warm Sun

HEX
#E39F56
RGB
rgb(227, 159, 86)
HSL
hsl(31, 72%, 61%)
HSB
hsb(31, 62%, 89%)
CMYK
cmyk(0%, 30%, 62%, 11%)
Oklch
oklch(75.4% 0.121 66.1)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#888052

Autumn Sage · DimGray · Honey Gold

HEX
#888052
RGB
rgb(136, 128, 82)
HSL
hsl(51, 25%, 43%)
HSB
hsb(51, 40%, 53%)
CMYK
cmyk(0%, 6%, 40%, 47%)
Oklch
oklch(59.6% 0.065 99.6)

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

#6B755C

Grass Green · DimGray · Olive Green

HEX
#6B755C
RGB
rgb(107, 117, 92)
HSL
hsl(84, 12%, 41%)
HSB
hsb(84, 21%, 46%)
CMYK
cmyk(9%, 0%, 21%, 54%)
Oklch
oklch(54.7% 0.039 125.4)

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

#49403B

Tangerine · DarkSlateGray · Amber Brown

HEX
#49403B
RGB
rgb(73, 64, 59)
HSL
hsl(21, 11%, 26%)
HSB
hsb(21, 19%, 29%)
CMYK
cmyk(0%, 12%, 19%, 71%)
Oklch
oklch(37.9% 0.015 51.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DA5A37
39B8DB

Analogous

DB3967
DA5A37
DBAD39

Triadic

DA5A37
39DB5C
5C39DB

Split-Comp.

DA5A37
39DBAD
3967DB

Tetradic

DA5A37
67DB39
39B8DB
AD39DB

Contrast Matrix WCAG 2.1 Contrast

DA5A37
E39F56
888052
6B755C
49403B
—
1.7
Fail
1.0
Fail
1.3
Fail
2.6
Fail
1.7
Fail
—
1.8
Fail
2.2
Fail
4.5
AA
1.0
Fail
1.8
Fail
—
1.2
Fail
2.5
Fail
1.3
Fail
2.2
Fail
1.2
Fail
—
2.1
Fail
2.6
Fail
4.5
AA
2.5
Fail
2.1
Fail
—
White BG
3.8AA Large
2.2Fail
4.0AA Large
4.9AA
10.1AAA
Black BG
5.5AA
9.4AAA
5.3AA
4.3AA Large
2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A3A13F
C6C568
85845D
6F6F62
45453C

Deuteranopia

AAB442
CACF6C
858660
6F6E64
46463D

Tritanopia

D44648
E07679
886668
6B6768
493D3D

Achromatopsia

7C7C7C
ABABAB
7D7D7D
6F6F6F
424242

Shades & Tints Shades & Tints

#DA5A37

Dark
Light

#E39F56

Dark
Light

#888052

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #da5a37;
  --color-2: #e39f56;
  --color-3: #888052;
  --color-4: #6b755c;
  --color-5: #49403b;
}

SCSS

$color-1: #da5a37;
$color-2: #e39f56;
$color-3: #888052;
$color-4: #6b755c;
$color-5: #49403b;

TAILWIND

colors: {
  'brand-1': '#da5a37',
  'brand-2': '#e39f56',
  'brand-3': '#888052',
  'brand-4': '#6b755c',
  'brand-5': '#49403b',
}

RGB Array

[218, 90, 55], [227, 159, 86], [136, 128, 82], [107, 117, 92], [73, 64, 59]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #DA5A37, #E39F56, #888052, #6B755C, #49403B 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: #da5a37; --color-2: #e39f56; --color-3: #888052; --color-4: #6b755c; --color-5: #49403b. 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 summer-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