← Back to Editor

#DFD1B7 · #DC8F7D · #DF5950 · #483C3E · #4D6A7C

summer

A 5-color summer palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#DFD1B7

Goose Yellow · Wheat · Peach Orange

HEX
#DFD1B7
RGB
rgb(223, 209, 183)
HSL
hsl(39, 38%, 80%)
HSB
hsb(39, 18%, 87%)
CMYK
cmyk(0%, 6%, 18%, 13%)
Oklch
oklch(86.5% 0.038 83.0)

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

#DC8F7D

Peach Pink · DarkSalmon · Coral Red

HEX
#DC8F7D
RGB
rgb(220, 143, 125)
HSL
hsl(11, 58%, 68%)
HSB
hsb(11, 43%, 86%)
CMYK
cmyk(0%, 35%, 43%, 14%)
Oklch
oklch(72.4% 0.098 33.8)

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

#DF5950

Vermilion · Tomato · Passion Red

HEX
#DF5950
RGB
rgb(223, 89, 80)
HSL
hsl(4, 69%, 59%)
HSB
hsb(4, 64%, 87%)
CMYK
cmyk(0%, 60%, 64%, 13%)
Oklch
oklch(63.6% 0.169 26.8)

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

#483C3E

Crimson · DarkSlateGray · Charcoal

HEX
#483C3E
RGB
rgb(72, 60, 62)
HSL
hsl(350, 9%, 26%)
HSB
hsb(350, 17%, 28%)
CMYK
cmyk(0%, 17%, 14%, 72%)
Oklch
oklch(36.9% 0.017 6.6)

Traditional「Crimson」· Paint「Charcoal」· Creative Midnight Shadow

#4D6A7C

Slate Blue · DimGray · Prussian Blue

HEX
#4D6A7C
RGB
rgb(77, 106, 124)
HSL
hsl(203, 23%, 39%)
HSB
hsb(203, 38%, 49%)
CMYK
cmyk(38%, 15%, 0%, 51%)
Oklch
oklch(50.9% 0.044 236.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DFD1B7
B9C6DF

Analogous

DFBEB9
DFD1B7
DADFB9

Triadic

DFD1B7
B9DFD2
D2B9DF

Split-Comp.

DFD1B7
B9DADF
BEB9DF

Tetradic

DFD1B7
B9DFBE
B9C6DF
DFB9DA

Contrast Matrix WCAG 2.1 Contrast

DFD1B7
DC8F7D
DF5950
483C3E
4D6A7C
—
1.7
Fail
2.5
Fail
7.0
AAA
3.8
AA Large
1.7
Fail
—
1.5
Fail
4.2
AA Large
2.3
Fail
2.5
Fail
1.5
Fail
—
2.9
Fail
1.5
Fail
7.0
AAA
4.2
AA Large
2.9
Fail
—
1.8
Fail
3.8
AA Large
2.3
Fail
1.5
Fail
1.8
Fail
—
White BG
1.5Fail
2.5Fail
3.7AA Large
10.5AAA
5.7AA
Black BG
13.9AAA
8.3AAA
5.7AA
2.0Fail
3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

D9D9BD
BBBA81
A5A452
43433E
5A5A78

Deuteranopia

DADBBF
BFC582
ADB753
44443D
585677

Tritanopia

DEC2C3
D88586
D85454
473D3D
4E7473

Achromatopsia

D2D2D2
A4A4A4
808080
404040
636363

Shades & Tints Shades & Tints

#DFD1B7

Dark
Light

#DC8F7D

Dark
Light

#DF5950

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dfd1b7;
  --color-2: #dc8f7d;
  --color-3: #df5950;
  --color-4: #483c3e;
  --color-5: #4d6a7c;
}

SCSS

$color-1: #dfd1b7;
$color-2: #dc8f7d;
$color-3: #df5950;
$color-4: #483c3e;
$color-5: #4d6a7c;

TAILWIND

colors: {
  'brand-1': '#dfd1b7',
  'brand-2': '#dc8f7d',
  'brand-3': '#df5950',
  'brand-4': '#483c3e',
  'brand-5': '#4d6a7c',
}

RGB Array

[223, 209, 183], [220, 143, 125], [223, 89, 80], [72, 60, 62], [77, 106, 124]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #DFD1B7, #DC8F7D, #DF5950, #483C3E, #4D6A7C 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: #dfd1b7; --color-2: #dc8f7d; --color-3: #df5950; --color-4: #483c3e; --color-5: #4d6a7c. 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