← Back to Editor

#DCDB9B · #D8B14A · #D96D12 · #8F5A0E · #8ED6A8

summer

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#DCDB9B

Fresh Green · Khaki · Sunflower

HEX
#DCDB9B
RGB
rgb(220, 219, 155)
HSL
hsl(59, 48%, 74%)
HSB
hsb(59, 30%, 86%)
CMYK
cmyk(0%, 0%, 30%, 14%)
Oklch
oklch(87.7% 0.083 107.2)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#D8B14A

Ginger · SandyBrown · Sunflower

HEX
#D8B14A
RGB
rgb(216, 177, 74)
HSL
hsl(44, 65%, 57%)
HSB
hsb(44, 66%, 85%)
CMYK
cmyk(0%, 18%, 66%, 15%)
Oklch
oklch(77.6% 0.128 88.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#D96D12

Tangerine · Chocolate · Amber Brown

HEX
#D96D12
RGB
rgb(217, 109, 18)
HSL
hsl(27, 85%, 46%)
HSB
hsb(27, 92%, 85%)
CMYK
cmyk(0%, 50%, 92%, 15%)
Oklch
oklch(65.0% 0.162 52.2)

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

#8F5A0E

Ochre · Sienna · Amber Brown

HEX
#8F5A0E
RGB
rgb(143, 90, 14)
HSL
hsl(35, 82%, 31%)
HSB
hsb(35, 90%, 56%)
CMYK
cmyk(0%, 37%, 90%, 44%)
Oklch
oklch(51.5% 0.108 68.5)

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

#8ED6A8

Celadon · LightGreen · Apple Green

HEX
#8ED6A8
RGB
rgb(142, 214, 168)
HSL
hsl(142, 47%, 70%)
HSB
hsb(142, 34%, 84%)
CMYK
cmyk(34%, 0%, 21%, 16%)
Oklch
oklch(81.6% 0.097 155.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DCDB9B
9D9EDD

Analogous

DDBC9D
DCDB9B
BEDD9D

Triadic

DCDB9B
9DDDDB
DB9DDD

Split-Comp.

DCDB9B
9DBEDD
BC9DDD

Tetradic

DCDB9B
9DDDBC
9D9EDD
DD9DBE

Contrast Matrix WCAG 2.1 Contrast

DCDB9B
D8B14A
D96D12
8F5A0E
8ED6A8
—
1.4
Fail
2.4
Fail
4.0
AA Large
1.2
Fail
1.4
Fail
—
1.7
Fail
2.8
Fail
1.2
Fail
2.4
Fail
1.7
Fail
—
1.7
Fail
2.0
Fail
4.0
AA Large
2.8
Fail
1.7
Fail
—
3.4
AA Large
1.2
Fail
1.2
Fail
2.0
Fail
3.4
AA Large
—
White BG
1.4Fail
2.0Fail
3.4AA Large
5.8AA
1.7Fail
Black BG
14.6AAA
10.3AAA
6.1AA
3.6AA Large
12.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDCAA
C7C763
AAA928
787820
ADAEB3

Deuteranopia

DCDCAE
C9CC69
B1B92D
7B7F25
A9A4B6

Tritanopia

DCB7B9
D6777B
D4393D
8C2F32
92BCBE

Achromatopsia

D4D4D4
B1B1B1
838383
616161
BBBBBB

Shades & Tints Shades & Tints

#DCDB9B

Dark
Light

#D8B14A

Dark
Light

#D96D12

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dcdb9b;
  --color-2: #d8b14a;
  --color-3: #d96d12;
  --color-4: #8f5a0e;
  --color-5: #8ed6a8;
}

SCSS

$color-1: #dcdb9b;
$color-2: #d8b14a;
$color-3: #d96d12;
$color-4: #8f5a0e;
$color-5: #8ed6a8;

TAILWIND

colors: {
  'brand-1': '#dcdb9b',
  'brand-2': '#d8b14a',
  'brand-3': '#d96d12',
  'brand-4': '#8f5a0e',
  'brand-5': '#8ed6a8',
}

RGB Array

[220, 219, 155], [216, 177, 74], [217, 109, 18], [143, 90, 14], [142, 214, 168]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #DCDB9B, #D8B14A, #D96D12, #8F5A0E, #8ED6A8 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #dcdb9b; --color-2: #d8b14a; --color-3: #d96d12; --color-4: #8f5a0e; --color-5: #8ed6a8. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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