← Back to Editor

#3D3727 · #FFE70F · #7FEB9B · #8C996A · #DFED8E

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

Color Details Color Details

#3D3727

Ochre · DarkSlateGray · Amber Gold

HEX
#3D3727
RGB
rgb(61, 55, 39)
HSL
hsl(44, 22%, 20%)
HSB
hsb(44, 36%, 24%)
CMYK
cmyk(0%, 10%, 36%, 76%)
Oklch
oklch(33.8% 0.028 89.9)

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

#FFE70F

Autumn Sage · Gold · Sunflower

HEX
#FFE70F
RGB
rgb(255, 231, 15)
HSL
hsl(54, 100%, 53%)
HSB
hsb(54, 94%, 100%)
CMYK
cmyk(0%, 9%, 94%, 0%)
Oklch
oklch(91.9% 0.191 101.7)

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

#7FEB9B

Emerald · LightGreen · Apple Green

HEX
#7FEB9B
RGB
rgb(127, 235, 155)
HSL
hsl(136, 73%, 71%)
HSB
hsb(136, 46%, 92%)
CMYK
cmyk(46%, 0%, 34%, 8%)
Oklch
oklch(85.5% 0.150 150.6)

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

#8C996A

Grass Green · Gray · Olive Green

HEX
#8C996A
RGB
rgb(140, 153, 106)
HSL
hsl(77, 19%, 51%)
HSB
hsb(77, 31%, 60%)
CMYK
cmyk(8%, 0%, 31%, 40%)
Oklch
oklch(66.0% 0.068 120.8)

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

#DFED8E

Fresh Green · Khaki · Sunflower

HEX
#DFED8E
RGB
rgb(223, 237, 142)
HSL
hsl(69, 73%, 74%)
HSB
hsb(69, 40%, 93%)
CMYK
cmyk(6%, 0%, 40%, 7%)
Oklch
oklch(91.5% 0.120 115.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3D3727
282E3E

Analogous

3E2D28
3D3727
393E28

Triadic

3D3727
283E38
38283E

Split-Comp.

3D3727
28393E
2D283E

Tetradic

3D3727
283E2D
282E3E
3E2839

Contrast Matrix WCAG 2.1 Contrast

3D3727
FFE70F
7FEB9B
8C996A
DFED8E
—
9.4
AAA
8.0
AAA
3.9
AA Large
9.4
AAA
9.4
AAA
—
1.2
Fail
2.4
Fail
1.0
Fail
8.0
AAA
1.2
Fail
—
2.1
Fail
1.2
Fail
3.9
AA Large
2.4
Fail
2.1
Fail
—
2.4
Fail
9.4
AAA
1.0
Fail
1.2
Fail
2.4
Fail
—
White BG
11.8AAA
1.3Fail
1.5Fail
3.1AA Large
1.3Fail
Black BG
1.8Fail
16.7AAA
14.3AAA
6.9AA
16.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3A3A2B
F5F443
AEAFAE
929275
E5E5A5

Deuteranopia

3B3B2C
F6F850
A89FB3
919078
E4E3AB

Tritanopia

3D2E2F
FE6D76
84BEC1
8D7E80
E0B7BB

Achromatopsia

373737
D6D6D6
C2C2C2
909090
DEDEDE

Shades & Tints Shades & Tints

#3D3727

Dark
Light

#FFE70F

Dark
Light

#7FEB9B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3d3727;
  --color-2: #ffe70f;
  --color-3: #7feb9b;
  --color-4: #8c996a;
  --color-5: #dfed8e;
}

SCSS

$color-1: #3d3727;
$color-2: #ffe70f;
$color-3: #7feb9b;
$color-4: #8c996a;
$color-5: #dfed8e;

TAILWIND

colors: {
  'brand-1': '#3d3727',
  'brand-2': '#ffe70f',
  'brand-3': '#7feb9b',
  'brand-4': '#8c996a',
  'brand-5': '#dfed8e',
}

RGB Array

[61, 55, 39], [255, 231, 15], [127, 235, 155], [140, 153, 106], [223, 237, 142]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #3D3727, #FFE70F, #7FEB9B, #8C996A, #DFED8E is ideal for: 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: #3d3727; --color-2: #ffe70f; --color-3: #7feb9b; --color-4: #8c996a; --color-5: #dfed8e. 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 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