← Back to Editor

#B4BB49 · #CBBF50 · #E2C357 · #D9CC84 · #D1D5B2

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

#B4BB49

Autumn Sage · GoldenRod · Sunflower

HEX
#B4BB49
RGB
rgb(180, 187, 73)
HSL
hsl(64, 46%, 51%)
HSB
hsb(64, 61%, 73%)
CMYK
cmyk(4%, 0%, 61%, 27%)
Oklch
oklch(76.4% 0.137 112.5)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#CBBF50

Autumn Sage · SandyBrown · Sunflower

HEX
#CBBF50
RGB
rgb(203, 191, 80)
HSL
hsl(54, 54%, 55%)
HSB
hsb(54, 61%, 80%)
CMYK
cmyk(0%, 6%, 61%, 20%)
Oklch
oklch(79.3% 0.132 103.2)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#E2C357

Ginger · SandyBrown · Sunflower

HEX
#E2C357
RGB
rgb(226, 195, 87)
HSL
hsl(47, 71%, 61%)
HSB
hsb(47, 62%, 89%)
CMYK
cmyk(0%, 14%, 62%, 11%)
Oklch
oklch(82.3% 0.131 93.3)

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

#D9CC84

Fresh Green · BurlyWood · Sunflower

HEX
#D9CC84
RGB
rgb(217, 204, 132)
HSL
hsl(51, 53%, 68%)
HSB
hsb(51, 39%, 85%)
CMYK
cmyk(0%, 6%, 39%, 15%)
Oklch
oklch(84.0% 0.093 99.3)

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

#D1D5B2

Fresh Green · Silver · Lemon Cream

HEX
#D1D5B2
RGB
rgb(209, 213, 178)
HSL
hsl(67, 29%, 77%)
HSB
hsb(67, 16%, 84%)
CMYK
cmyk(2%, 0%, 16%, 16%)
Oklch
oklch(86.1% 0.047 112.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B4BB49
5049BC

Analogous

BC8A49
B4BB49
7ABC49

Triadic

B4BB49
49B4BC
BC49B4

Split-Comp.

B4BB49
497ABC
8A49BC

Tetradic

B4BB49
49BC8A
5049BC
BC497A

Contrast Matrix WCAG 2.1 Contrast

B4BB49
CBBF50
E2C357
D9CC84
D1D5B2
—
1.1
Fail
1.2
Fail
1.3
Fail
1.4
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.2
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.1
Fail
1.3
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.4
Fail
1.2
Fail
1.1
Fail
1.1
Fail
—
White BG
2.1Fail
1.9Fail
1.7Fail
1.6Fail
1.5Fail
Black BG
10.1AAA
11.1AAA
12.2AAA
12.9AAA
13.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B7B765
C6C66B
D5D471
D3D395
D3D3BA

Deuteranopia

B7B66B
C7C771
D6D977
D4D59A
D3D2BD

Tritanopia

B47A7F
CA8085
E0868A
D8A3A6
D1C1C3

Achromatopsia

ACACAC
B6B6B6
C0C0C0
C8C8C8
D0D0D0

Shades & Tints Shades & Tints

#B4BB49

Dark
Light

#CBBF50

Dark
Light

#E2C357

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b4bb49;
  --color-2: #cbbf50;
  --color-3: #e2c357;
  --color-4: #d9cc84;
  --color-5: #d1d5b2;
}

SCSS

$color-1: #b4bb49;
$color-2: #cbbf50;
$color-3: #e2c357;
$color-4: #d9cc84;
$color-5: #d1d5b2;

TAILWIND

colors: {
  'brand-1': '#b4bb49',
  'brand-2': '#cbbf50',
  'brand-3': '#e2c357',
  'brand-4': '#d9cc84',
  'brand-5': '#d1d5b2',
}

RGB Array

[180, 187, 73], [203, 191, 80], [226, 195, 87], [217, 204, 132], [209, 213, 178]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #B4BB49, #CBBF50, #E2C357, #D9CC84, #D1D5B2 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: #b4bb49; --color-2: #cbbf50; --color-3: #e2c357; --color-4: #d9cc84; --color-5: #d1d5b2. 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