← Back to Editor

#311B06 · #473B15 · #767C40 · #AEA84A · #FCC338

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

#311B06

Tangerine · Black · Cinnamon

HEX
#311B06
RGB
rgb(49, 27, 6)
HSL
hsl(29, 78%, 11%)
HSB
hsb(29, 88%, 19%)
CMYK
cmyk(0%, 45%, 88%, 81%)
Oklch
oklch(24.7% 0.048 61.5)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#473B15

Ochre · DarkOliveGreen · Amber Gold

HEX
#473B15
RGB
rgb(71, 59, 21)
HSL
hsl(46, 54%, 18%)
HSB
hsb(46, 70%, 28%)
CMYK
cmyk(0%, 17%, 70%, 72%)
Oklch
oklch(35.6% 0.057 91.7)

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

#767C40

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#767C40
RGB
rgb(118, 124, 64)
HSL
hsl(66, 32%, 37%)
HSB
hsb(66, 48%, 49%)
CMYK
cmyk(5%, 0%, 48%, 51%)
Oklch
oklch(56.7% 0.083 113.8)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#AEA84A

Autumn Sage · GoldenRod · Honey Gold

HEX
#AEA84A
RGB
rgb(174, 168, 74)
HSL
hsl(56, 40%, 49%)
HSB
hsb(56, 57%, 68%)
CMYK
cmyk(0%, 3%, 57%, 32%)
Oklch
oklch(71.8% 0.116 105.6)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#FCC338

Ginger · SandyBrown · Sunflower

HEX
#FCC338
RGB
rgb(252, 195, 56)
HSL
hsl(43, 97%, 60%)
HSB
hsb(43, 78%, 99%)
CMYK
cmyk(0%, 23%, 78%, 1%)
Oklch
oklch(84.6% 0.158 84.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

311B06
061D32

Analogous

320607
311B06
323106

Triadic

311B06
06321B
1B0632

Split-Comp.

311B06
063231
060732

Tetradic

311B06
073206
061D32
310632

Contrast Matrix WCAG 2.1 Contrast

311B06
473B15
767C40
AEA84A
FCC338
—
1.5
Fail
3.7
AA Large
6.6
AA
10.1
AAA
1.5
Fail
—
2.5
Fail
4.5
AA Large
6.8
AA
3.7
AA Large
2.5
Fail
—
1.8
Fail
2.8
Fail
6.6
AA
4.5
AA Large
1.8
Fail
—
1.5
Fail
10.1
AAA
6.8
AA
2.8
Fail
1.5
Fail
—
White BG
16.3AAA
11.0AAA
4.4AA Large
2.5Fail
1.6Fail
Black BG
1.3Fail
1.9Fail
4.7AA
8.5AAA
13.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

27270B
42421E
79794F
ABAB61
E3E35A

Deuteranopia

292A0C
434320
787852
ACAC66
E7EB62

Tritanopia

300F10
462527
765A5D
AE7377
F9747A

Achromatopsia

1F1F1F
3A3A3A
737373
9F9F9F
C4C4C4

Shades & Tints Shades & Tints

#311B06

Dark
Light

#473B15

Dark
Light

#767C40

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #311b06;
  --color-2: #473b15;
  --color-3: #767c40;
  --color-4: #aea84a;
  --color-5: #fcc338;
}

SCSS

$color-1: #311b06;
$color-2: #473b15;
$color-3: #767c40;
$color-4: #aea84a;
$color-5: #fcc338;

TAILWIND

colors: {
  'brand-1': '#311b06',
  'brand-2': '#473b15',
  'brand-3': '#767c40',
  'brand-4': '#aea84a',
  'brand-5': '#fcc338',
}

RGB Array

[49, 27, 6], [71, 59, 21], [118, 124, 64], [174, 168, 74], [252, 195, 56]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #311B06, #473B15, #767C40, #AEA84A, #FCC338 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, 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: #311b06; --color-2: #473b15; --color-3: #767c40; --color-4: #aea84a; --color-5: #fcc338. 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 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