← Back to Editor

#BDAD89 · #32886B · #468046 · #286610 · #2D3027

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 LibraryData Visualization

Color Details Color Details

#BDAD89

Ginger · Tan · Sunflower

HEX
#BDAD89
RGB
rgb(189, 173, 137)
HSL
hsl(42, 28%, 64%)
HSB
hsb(42, 28%, 74%)
CMYK
cmyk(0%, 8%, 28%, 26%)
Oklch
oklch(75.2% 0.052 86.8)

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

#32886B

Mineral Blue · SeaGreen · Mint Ice

HEX
#32886B
RGB
rgb(50, 136, 107)
HSL
hsl(160, 46%, 36%)
HSB
hsb(160, 63%, 53%)
CMYK
cmyk(63%, 0%, 21%, 47%)
Oklch
oklch(56.7% 0.094 167.4)

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

#468046

Celadon · SeaGreen · Forest Green

HEX
#468046
RGB
rgb(70, 128, 70)
HSL
hsl(120, 29%, 39%)
HSB
hsb(120, 45%, 50%)
CMYK
cmyk(45%, 0%, 45%, 50%)
Oklch
oklch(54.5% 0.107 143.9)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#286610

Pine Green · ForestGreen · Forest Green

HEX
#286610
RGB
rgb(40, 102, 16)
HSL
hsl(103, 73%, 23%)
HSB
hsb(103, 84%, 40%)
CMYK
cmyk(61%, 0%, 84%, 60%)
Oklch
oklch(45.2% 0.132 139.0)

Traditional「Pine Green」· Paint「Forest Green」· Creative Blush Sunrise

#2D3027

Grass Green · DarkSlateGray · Dark Green

HEX
#2D3027
RGB
rgb(45, 48, 39)
HSL
hsl(80, 10%, 17%)
HSB
hsb(80, 19%, 19%)
CMYK
cmyk(6%, 0%, 19%, 81%)
Oklch
oklch(30.3% 0.016 122.4)

Traditional「Grass Green」· Paint「Dark Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BDAD89
8999BD

Analogous

BD9489
BDAD89
B3BD89

Triadic

BDAD89
89BDAD
AD89BD

Split-Comp.

BDAD89
89B3BD
9489BD

Tetradic

BDAD89
89BD94
8999BD
BD89B3

Contrast Matrix WCAG 2.1 Contrast

BDAD89
32886B
468046
286610
2D3027
—
2.0
Fail
2.1
Fail
3.2
AA Large
6.1
AA
2.0
Fail
—
1.1
Fail
1.6
Fail
3.1
AA Large
2.1
Fail
1.1
Fail
—
1.5
Fail
2.8
Fail
3.2
AA Large
1.6
Fail
1.5
Fail
—
1.9
Fail
6.1
AA
3.1
AA Large
2.8
Fail
1.9
Fail
—
White BG
2.2Fail
4.3AA Large
4.7AA
7.0AAA
13.4AAA
Black BG
9.5AAA
4.9AA
4.4AA Large
3.0Fail
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B692
575872
5F6054
434325
2E2E29

Deuteranopia

B7B894
524C74
5C5757
3F3B2A
2E2E2A

Tritanopia

BC999A
367879
495F62
2B3539
2D2B2B

Achromatopsia

AEAEAE
6B6B6B
686868
4A4A4A
2E2E2E

Shades & Tints Shades & Tints

#BDAD89

Dark
Light

#32886B

Dark
Light

#468046

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bdad89;
  --color-2: #32886b;
  --color-3: #468046;
  --color-4: #286610;
  --color-5: #2d3027;
}

SCSS

$color-1: #bdad89;
$color-2: #32886b;
$color-3: #468046;
$color-4: #286610;
$color-5: #2d3027;

TAILWIND

colors: {
  'brand-1': '#bdad89',
  'brand-2': '#32886b',
  'brand-3': '#468046',
  'brand-4': '#286610',
  'brand-5': '#2d3027',
}

RGB Array

[189, 173, 137], [50, 136, 107], [70, 128, 70], [40, 102, 16], [45, 48, 39]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #BDAD89, #32886B, #468046, #286610, #2D3027 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #bdad89; --color-2: #32886b; --color-3: #468046; --color-4: #286610; --color-5: #2d3027. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 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