← Back to Editor

#83856F · #EDC7A1 · #D99689 · #D04F77 · #FCBD65

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

#83856F

Autumn Sage · Gray · Warm Gray

HEX
#83856F
RGB
rgb(131, 133, 111)
HSL
hsl(65, 9%, 48%)
HSB
hsb(65, 17%, 52%)
CMYK
cmyk(2%, 0%, 17%, 48%)
Oklch
oklch(60.9% 0.032 111.6)

Traditional「Autumn Sage」· Paint「Warm Gray」· Creative Urban Concrete

#EDC7A1

Goose Yellow · Wheat · Peach Orange

HEX
#EDC7A1
RGB
rgb(237, 199, 161)
HSL
hsl(30, 68%, 78%)
HSB
hsb(30, 32%, 93%)
CMYK
cmyk(0%, 16%, 32%, 7%)
Oklch
oklch(85.3% 0.066 66.7)

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

#D99689

Peach Pink · DarkSalmon · Coral Red

HEX
#D99689
RGB
rgb(217, 150, 137)
HSL
hsl(10, 51%, 69%)
HSB
hsb(10, 37%, 85%)
CMYK
cmyk(0%, 31%, 37%, 15%)
Oklch
oklch(73.6% 0.084 31.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#D04F77

Dark Violet · LightCoral · Rose Pink

HEX
#D04F77
RGB
rgb(208, 79, 119)
HSL
hsl(341, 58%, 56%)
HSB
hsb(341, 62%, 82%)
CMYK
cmyk(0%, 62%, 43%, 18%)
Oklch
oklch(61.0% 0.166 4.2)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#FCBD65

Ginger · SandyBrown · Warm Sun

HEX
#FCBD65
RGB
rgb(252, 189, 101)
HSL
hsl(35, 96%, 69%)
HSB
hsb(35, 60%, 99%)
CMYK
cmyk(0%, 25%, 60%, 1%)
Oklch
oklch(83.9% 0.128 73.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

83856F
716F85

Analogous

857C6F
83856F
79856F

Triadic

83856F
6F8485
856F84

Split-Comp.

83856F
6F7985
7C6F85

Tetradic

83856F
6F857C
716F85
856F79

Contrast Matrix WCAG 2.1 Contrast

83856F
EDC7A1
D99689
D04F77
FCBD65
—
2.4
Fail
1.6
Fail
1.1
Fail
2.3
Fail
2.4
Fail
—
1.5
Fail
2.6
Fail
1.1
Fail
1.6
Fail
1.5
Fail
—
1.7
Fail
1.5
Fail
1.1
Fail
2.6
Fail
1.7
Fail
—
2.5
Fail
2.3
Fail
1.1
Fail
1.5
Fail
2.5
Fail
—
White BG
3.8AA Large
1.6Fail
2.4Fail
4.1AA Large
1.7Fail
Black BG
5.5AA
13.3AAA
8.7AAA
5.1AA
12.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

848474
DDDCAA
BCBB8C
98976D
E1E07A

Deuteranopia

848476
DFE2AC
C0C58D
A0A96B
E4E97F

Tritanopia

837979
EBB1B3
D68F8F
CA6664
F98B8F

Achromatopsia

828282
CECECE
A9A9A9
7A7A7A
C6C6C6

Shades & Tints Shades & Tints

#83856F

Dark
Light

#EDC7A1

Dark
Light

#D99689

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #83856f;
  --color-2: #edc7a1;
  --color-3: #d99689;
  --color-4: #d04f77;
  --color-5: #fcbd65;
}

SCSS

$color-1: #83856f;
$color-2: #edc7a1;
$color-3: #d99689;
$color-4: #d04f77;
$color-5: #fcbd65;

TAILWIND

colors: {
  'brand-1': '#83856f',
  'brand-2': '#edc7a1',
  'brand-3': '#d99689',
  'brand-4': '#d04f77',
  'brand-5': '#fcbd65',
}

RGB Array

[131, 133, 111], [237, 199, 161], [217, 150, 137], [208, 79, 119], [252, 189, 101]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #83856F, #EDC7A1, #D99689, #D04F77, #FCBD65 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: #83856f; --color-2: #edc7a1; --color-3: #d99689; --color-4: #d04f77; --color-5: #fcbd65. 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