← Back to Editor

#CD5D2C · #EBE4C6 · #575D1D · #8B9C2F · #B4BC93

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 LibraryData Visualization

Color Details Color Details

#CD5D2C

Tangerine · Chocolate · Amber Brown

HEX
#CD5D2C
RGB
rgb(205, 93, 44)
HSL
hsl(18, 65%, 49%)
HSB
hsb(18, 79%, 80%)
CMYK
cmyk(0%, 55%, 79%, 20%)
Oklch
oklch(61.0% 0.155 42.2)

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

#EBE4C6

Goose Yellow · Bisque · Lemon Cream

HEX
#EBE4C6
RGB
rgb(235, 228, 198)
HSL
hsl(49, 48%, 85%)
HSB
hsb(49, 16%, 92%)
CMYK
cmyk(0%, 3%, 16%, 8%)
Oklch
oklch(91.7% 0.040 96.3)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#575D1D

Autumn Sage · DarkOliveGreen · Amber Gold

HEX
#575D1D
RGB
rgb(87, 93, 29)
HSL
hsl(66, 52%, 24%)
HSB
hsb(66, 69%, 36%)
CMYK
cmyk(6%, 0%, 69%, 64%)
Oklch
oklch(45.9% 0.086 114.4)

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

#8B9C2F

Autumn Sage · Olive · Honey Gold

HEX
#8B9C2F
RGB
rgb(139, 156, 47)
HSL
hsl(69, 54%, 40%)
HSB
hsb(69, 70%, 61%)
CMYK
cmyk(11%, 0%, 70%, 39%)
Oklch
oklch(65.8% 0.133 117.9)

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

#B4BC93

Willow Green · DarkGray · Apple Green

HEX
#B4BC93
RGB
rgb(180, 188, 147)
HSL
hsl(72, 23%, 66%)
HSB
hsb(72, 22%, 74%)
CMYK
cmyk(4%, 0%, 22%, 26%)
Oklch
oklch(77.8% 0.057 116.7)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CD5D2C
2C9DCE

Analogous

CE2C4C
CD5D2C
CEAE2C

Triadic

CD5D2C
2CCE5C
5C2CCE

Split-Comp.

CD5D2C
2CCEAE
2C4CCE

Tetradic

CD5D2C
4CCE2C
2C9DCE
AE2CCE

Contrast Matrix WCAG 2.1 Contrast

CD5D2C
EBE4C6
575D1D
8B9C2F
B4BC93
—
3.2
AA Large
1.7
Fail
1.3
Fail
2.0
Fail
3.2
AA Large
—
5.5
AA
2.4
Fail
1.6
Fail
1.7
Fail
5.5
AA
—
2.3
Fail
3.5
AA Large
1.3
Fail
2.4
Fail
2.3
Fail
—
1.5
Fail
2.0
Fail
1.6
Fail
3.5
AA Large
1.5
Fail
—
White BG
4.0AA Large
1.3Fail
7.0AAA
3.0AA Large
2.0Fail
Black BG
5.2AA
16.4AAA
3.0Fail
6.9AA
10.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9D9B38
E8E8CD
5A5A2C
929349
B7B89D

Deuteranopia

A3AB3B
E8E9CF
595930
919050
B7B69F

Tritanopia

C74143
EBD3D4
57393B
8C5E63
B4A5A6

Achromatopsia

797979
E3E3E3
545454
8A8A8A
B5B5B5

Shades & Tints Shades & Tints

#CD5D2C

Dark
Light

#EBE4C6

Dark
Light

#575D1D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cd5d2c;
  --color-2: #ebe4c6;
  --color-3: #575d1d;
  --color-4: #8b9c2f;
  --color-5: #b4bc93;
}

SCSS

$color-1: #cd5d2c;
$color-2: #ebe4c6;
$color-3: #575d1d;
$color-4: #8b9c2f;
$color-5: #b4bc93;

TAILWIND

colors: {
  'brand-1': '#cd5d2c',
  'brand-2': '#ebe4c6',
  'brand-3': '#575d1d',
  'brand-4': '#8b9c2f',
  'brand-5': '#b4bc93',
}

RGB Array

[205, 93, 44], [235, 228, 198], [87, 93, 29], [139, 156, 47], [180, 188, 147]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #CD5D2C, #EBE4C6, #575D1D, #8B9C2F, #B4BC93 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #cd5d2c; --color-2: #ebe4c6; --color-3: #575d1d; --color-4: #8b9c2f; --color-5: #b4bc93. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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