← Back to Editor

#DCC59C · #C2B998 · #A5AB8F · #699C8B · #548B86

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

#DCC59C

Goose Yellow · BurlyWood · Warm Sun

HEX
#DCC59C
RGB
rgb(220, 197, 156)
HSL
hsl(38, 48%, 74%)
HSB
hsb(38, 29%, 86%)
CMYK
cmyk(0%, 10%, 29%, 14%)
Oklch
oklch(83.3% 0.060 81.9)

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

#C2B998

Ginger · Tan · Sunflower

HEX
#C2B998
RGB
rgb(194, 185, 152)
HSL
hsl(47, 26%, 68%)
HSB
hsb(47, 22%, 76%)
CMYK
cmyk(0%, 5%, 22%, 24%)
Oklch
oklch(78.5% 0.046 94.6)

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

#A5AB8F

Willow Green · DarkGray · Apple Green

HEX
#A5AB8F
RGB
rgb(165, 171, 143)
HSL
hsl(73, 14%, 62%)
HSB
hsb(73, 16%, 67%)
CMYK
cmyk(4%, 0%, 16%, 33%)
Oklch
oklch(72.9% 0.040 117.2)

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

#699C8B

Mineral Blue · CadetBlue · Lake Green

HEX
#699C8B
RGB
rgb(105, 156, 139)
HSL
hsl(160, 20%, 51%)
HSB
hsb(160, 33%, 61%)
CMYK
cmyk(33%, 0%, 11%, 39%)
Oklch
oklch(65.2% 0.060 171.5)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#548B86

Mineral Blue · SlateGray · Mint Ice

HEX
#548B86
RGB
rgb(84, 139, 134)
HSL
hsl(175, 25%, 44%)
HSB
hsb(175, 40%, 55%)
CMYK
cmyk(40%, 0%, 4%, 45%)
Oklch
oklch(59.7% 0.059 188.3)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DCC59C
9DB4DD

Analogous

DDA59D
DCC59C
D4DD9D

Triadic

DCC59C
9DDDC5
C59DDD

Split-Comp.

DCC59C
9DD4DD
A59DDD

Tetradic

DCC59C
9DDDA5
9DB4DD
DD9DD4

Contrast Matrix WCAG 2.1 Contrast

DCC59C
C2B998
A5AB8F
699C8B
548B86
—
1.2
Fail
1.4
Fail
1.9
Fail
2.3
Fail
1.2
Fail
—
1.2
Fail
1.6
Fail
2.0
Fail
1.4
Fail
1.2
Fail
—
1.3
Fail
1.6
Fail
1.9
Fail
1.6
Fail
1.3
Fail
—
1.2
Fail
2.3
Fail
2.0
Fail
1.6
Fail
1.2
Fail
—
White BG
1.7Fail
2.0Fail
2.4Fail
3.1AA Large
3.9AA Large
Black BG
12.5AAA
10.7AAA
8.8AAA
6.7AA
5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D2D2A6
BEBEA0
A8A896
7F808F
6C6C87

Deuteranopia

D3D5A8
BFBFA2
A7A797
7C7890
696588

Tritanopia

DBAEAF
C2A6A8
A59B9C
6C9293
578888

Achromatopsia

C7C7C7
B8B8B8
A6A6A6
8B8B8B
7A7A7A

Shades & Tints Shades & Tints

#DCC59C

Dark
Light

#C2B998

Dark
Light

#A5AB8F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dcc59c;
  --color-2: #c2b998;
  --color-3: #a5ab8f;
  --color-4: #699c8b;
  --color-5: #548b86;
}

SCSS

$color-1: #dcc59c;
$color-2: #c2b998;
$color-3: #a5ab8f;
$color-4: #699c8b;
$color-5: #548b86;

TAILWIND

colors: {
  'brand-1': '#dcc59c',
  'brand-2': '#c2b998',
  'brand-3': '#a5ab8f',
  'brand-4': '#699c8b',
  'brand-5': '#548b86',
}

RGB Array

[220, 197, 156], [194, 185, 152], [165, 171, 143], [105, 156, 139], [84, 139, 134]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #DCC59C, #C2B998, #A5AB8F, #699C8B, #548B86 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #dcc59c; --color-2: #c2b998; --color-3: #a5ab8f; --color-4: #699c8b; --color-5: #548b86. 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. Restrained colors convey professionalism and trust. 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