← Back to Editor

#BDB095 · #C3B281 · #DC9F77 · #F18478 · #3F6B75

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

#BDB095

Ginger · Tan · Sunflower

HEX
#BDB095
RGB
rgb(189, 176, 149)
HSL
hsl(40, 23%, 66%)
HSB
hsb(40, 21%, 74%)
CMYK
cmyk(0%, 7%, 21%, 26%)
Oklch
oklch(76.1% 0.040 85.3)

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

#C3B281

Ginger · Tan · Sunflower

HEX
#C3B281
RGB
rgb(195, 178, 129)
HSL
hsl(45, 35%, 64%)
HSB
hsb(45, 34%, 76%)
CMYK
cmyk(0%, 9%, 34%, 24%)
Oklch
oklch(76.6% 0.068 91.2)

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

#DC9F77

Apricot · DarkSalmon · Warm Sun

HEX
#DC9F77
RGB
rgb(220, 159, 119)
HSL
hsl(24, 59%, 66%)
HSB
hsb(24, 46%, 86%)
CMYK
cmyk(0%, 28%, 46%, 14%)
Oklch
oklch(75.2% 0.091 54.1)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#F18478

Peach Pink · LightCoral · Coral Red

HEX
#F18478
RGB
rgb(241, 132, 120)
HSL
hsl(6, 81%, 71%)
HSB
hsb(6, 50%, 95%)
CMYK
cmyk(0%, 45%, 50%, 5%)
Oklch
oklch(73.0% 0.136 27.4)

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

#3F6B75

Slate Blue · DimGray · Mint Ice

HEX
#3F6B75
RGB
rgb(63, 107, 117)
HSL
hsl(191, 30%, 35%)
HSB
hsb(191, 46%, 46%)
CMYK
cmyk(46%, 9%, 0%, 54%)
Oklch
oklch(50.0% 0.051 213.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BDB095
94A2BC

Analogous

BC9B94
BDB095
B6BC94

Triadic

BDB095
94BCAF
AF94BC

Split-Comp.

BDB095
94B6BC
9B94BC

Tetradic

BDB095
94BC9B
94A2BC
BC94B6

Contrast Matrix WCAG 2.1 Contrast

BDB095
C3B281
DC9F77
F18478
3F6B75
—
1.0
Fail
1.1
Fail
1.2
Fail
2.7
Fail
1.0
Fail
—
1.1
Fail
1.2
Fail
2.8
Fail
1.1
Fail
1.1
Fail
—
1.1
Fail
2.6
Fail
1.2
Fail
1.2
Fail
1.1
Fail
—
2.3
Fail
2.7
Fail
2.8
Fail
2.6
Fail
2.3
Fail
—
White BG
2.1Fail
2.1Fail
2.3Fail
2.5Fail
5.9AA
Black BG
9.8AAA
10.0AAA
9.3AAA
8.3AAA
3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B7B79C
BCBB8D
C2C181
C2C17B
525273

Deuteranopia

B8B99D
BDBE90
C5CA83
C8D07C
504C72

Tritanopia

BCA1A2
C29698
D9888A
EC7D7E
417170

Achromatopsia

B1B1B1
B1B1B1
ADADAD
A3A3A3
5F5F5F

Shades & Tints Shades & Tints

#BDB095

Dark
Light

#C3B281

Dark
Light

#DC9F77

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bdb095;
  --color-2: #c3b281;
  --color-3: #dc9f77;
  --color-4: #f18478;
  --color-5: #3f6b75;
}

SCSS

$color-1: #bdb095;
$color-2: #c3b281;
$color-3: #dc9f77;
$color-4: #f18478;
$color-5: #3f6b75;

TAILWIND

colors: {
  'brand-1': '#bdb095',
  'brand-2': '#c3b281',
  'brand-3': '#dc9f77',
  'brand-4': '#f18478',
  'brand-5': '#3f6b75',
}

RGB Array

[189, 176, 149], [195, 178, 129], [220, 159, 119], [241, 132, 120], [63, 107, 117]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #BDB095, #C3B281, #DC9F77, #F18478, #3F6B75 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: #bdb095; --color-2: #c3b281; --color-3: #dc9f77; --color-4: #f18478; --color-5: #3f6b75. 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