← Back to Editor

#9C7233 · #544363 · #D2B199 · #E6CAA0 · #D7C0A5

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

#9C7233

Ochre · Sienna · Amber Brown

HEX
#9C7233
RGB
rgb(156, 114, 51)
HSL
hsl(36, 51%, 41%)
HSB
hsb(36, 67%, 61%)
CMYK
cmyk(0%, 27%, 67%, 39%)
Oklch
oklch(58.2% 0.096 74.8)

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

#544363

Dark Plum · DarkSlateBlue · Eggplant

HEX
#544363
RGB
rgb(84, 67, 99)
HSL
hsl(272, 19%, 33%)
HSB
hsb(272, 32%, 39%)
CMYK
cmyk(15%, 32%, 0%, 61%)
Oklch
oklch(41.4% 0.056 308.3)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#D2B199

Apricot · Tan · Warm Sun

HEX
#D2B199
RGB
rgb(210, 177, 153)
HSL
hsl(25, 39%, 71%)
HSB
hsb(25, 27%, 82%)
CMYK
cmyk(0%, 16%, 27%, 18%)
Oklch
oklch(78.3% 0.051 57.9)

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

#E6CAA0

Goose Yellow · Wheat · Peach Orange

HEX
#E6CAA0
RGB
rgb(230, 202, 160)
HSL
hsl(36, 58%, 76%)
HSB
hsb(36, 30%, 90%)
CMYK
cmyk(0%, 12%, 30%, 10%)
Oklch
oklch(85.2% 0.064 77.8)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#D7C0A5

Goose Yellow · Tan · Warm Sun

HEX
#D7C0A5
RGB
rgb(215, 192, 165)
HSL
hsl(32, 38%, 75%)
HSB
hsb(32, 23%, 84%)
CMYK
cmyk(0%, 11%, 23%, 16%)
Oklch
oklch(82.0% 0.045 71.6)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9C7233
335E9E

Analogous

9E3E33
9C7233
939E33

Triadic

9C7233
339E73
73339E

Split-Comp.

9C7233
33939E
3E339E

Tetradic

9C7233
339E3E
335E9E
9E3393

Contrast Matrix WCAG 2.1 Contrast

9C7233
544363
D2B199
E6CAA0
D7C0A5
—
2.1
Fail
2.2
Fail
2.7
Fail
2.5
Fail
2.1
Fail
—
4.4
AA Large
5.6
AA
5.1
AA
2.2
Fail
4.4
AA Large
—
1.3
Fail
1.1
Fail
2.7
Fail
5.6
AA
1.3
Fail
—
1.1
Fail
2.5
Fail
5.1
AA
1.1
Fail
1.1
Fail
—
White BG
4.3AA Large
8.9AAA
2.0Fail
1.6Fail
1.8Fail
Black BG
4.9AA
2.4Fail
10.5AAA
13.3AAA
12.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A8942
4D4C5B
C4C39F
DADAAA
CDCDAC

Deuteranopia

8C8F46
4E4F59
C6C8A0
DCDEAD
CED0AD

Tritanopia

9A4E51
535554
D0A3A4
E5B2B4
D6B1B2

Achromatopsia

777777
4C4C4C
B8B8B8
CECECE
C4C4C4

Shades & Tints Shades & Tints

#9C7233

Dark
Light

#544363

Dark
Light

#D2B199

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9c7233;
  --color-2: #544363;
  --color-3: #d2b199;
  --color-4: #e6caa0;
  --color-5: #d7c0a5;
}

SCSS

$color-1: #9c7233;
$color-2: #544363;
$color-3: #d2b199;
$color-4: #e6caa0;
$color-5: #d7c0a5;

TAILWIND

colors: {
  'brand-1': '#9c7233',
  'brand-2': '#544363',
  'brand-3': '#d2b199',
  'brand-4': '#e6caa0',
  'brand-5': '#d7c0a5',
}

RGB Array

[156, 114, 51], [84, 67, 99], [210, 177, 153], [230, 202, 160], [215, 192, 165]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #9C7233, #544363, #D2B199, #E6CAA0, #D7C0A5 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: #9c7233; --color-2: #544363; --color-3: #d2b199; --color-4: #e6caa0; --color-5: #d7c0a5. 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