← Back to Editor

#DAC46F · #C1A13A · #87735A · #726384 · #5D517F

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 Library

Color Details Color Details

#DAC46F

Ginger · BurlyWood · Sunflower

HEX
#DAC46F
RGB
rgb(218, 196, 111)
HSL
hsl(48, 59%, 65%)
HSB
hsb(48, 49%, 85%)
CMYK
cmyk(0%, 10%, 49%, 15%)
Oklch
oklch(82.1% 0.108 95.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#C1A13A

Ochre · GoldenRod · Honey Gold

HEX
#C1A13A
RGB
rgb(193, 161, 58)
HSL
hsl(46, 54%, 49%)
HSB
hsb(46, 70%, 76%)
CMYK
cmyk(0%, 17%, 70%, 24%)
Oklch
oklch(71.9% 0.125 91.4)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#87735A

Ochre · DimGray · Amber Brown

HEX
#87735A
RGB
rgb(135, 115, 90)
HSL
hsl(33, 20%, 44%)
HSB
hsb(33, 33%, 53%)
CMYK
cmyk(0%, 15%, 33%, 47%)
Oklch
oklch(56.8% 0.044 72.9)

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

#726384

Deep Indigo · DimGray · Violet

HEX
#726384
RGB
rgb(114, 99, 132)
HSL
hsl(267, 14%, 45%)
HSB
hsb(267, 25%, 52%)
CMYK
cmyk(14%, 25%, 0%, 48%)
Oklch
oklch(52.6% 0.054 305.3)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

#5D517F

Deep Indigo · DarkSlateBlue · Navy Blue

HEX
#5D517F
RGB
rgb(93, 81, 127)
HSL
hsl(256, 22%, 41%)
HSB
hsb(256, 36%, 50%)
CMYK
cmyk(27%, 36%, 0%, 50%)
Oklch
oklch(46.6% 0.074 295.4)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DAC46F
7186DA

Analogous

DA9171
DAC46F
BBDA71

Triadic

DAC46F
71DAC5
C571DA

Split-Comp.

DAC46F
71BBDA
9171DA

Tetradic

DAC46F
71DA91
7186DA
DA71BB

Contrast Matrix WCAG 2.1 Contrast

DAC46F
C1A13A
87735A
726384
5D517F
—
1.4
Fail
2.6
Fail
3.2
AA Large
4.1
AA Large
1.4
Fail
—
1.8
Fail
2.2
Fail
2.9
Fail
2.6
Fail
1.8
Fail
—
1.2
Fail
1.6
Fail
3.2
AA Large
2.2
Fail
1.2
Fail
—
1.3
Fail
4.1
AA Large
2.9
Fail
1.6
Fail
1.3
Fail
—
White BG
1.7Fail
2.5Fail
4.5AA
5.5AA
7.1AAA
Black BG
12.1AAA
8.4AAA
4.6AA
3.8AA Large
2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D0D084
B3B353
7E7E60
6C6B7C
585874

Deuteranopia

D2D389
B5B759
808162
6C6E7A
595971

Tritanopia

D99497
BF676B
866566
717674
5C6B69

Achromatopsia

C1C1C1
9F9F9F
767676
6B6B6B
5A5A5A

Shades & Tints Shades & Tints

#DAC46F

Dark
Light

#C1A13A

Dark
Light

#87735A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dac46f;
  --color-2: #c1a13a;
  --color-3: #87735a;
  --color-4: #726384;
  --color-5: #5d517f;
}

SCSS

$color-1: #dac46f;
$color-2: #c1a13a;
$color-3: #87735a;
$color-4: #726384;
$color-5: #5d517f;

TAILWIND

colors: {
  'brand-1': '#dac46f',
  'brand-2': '#c1a13a',
  'brand-3': '#87735a',
  'brand-4': '#726384',
  'brand-5': '#5d517f',
}

RGB Array

[218, 196, 111], [193, 161, 58], [135, 115, 90], [114, 99, 132], [93, 81, 127]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #DAC46F, #C1A13A, #87735A, #726384, #5D517F 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: #dac46f; --color-2: #c1a13a; --color-3: #87735a; --color-4: #726384; --color-5: #5d517f. 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