← Back to Editor

#506647 · #62A871 · #F2BF46 · #704442 · #4A2626

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

#506647

Celadon · DarkOliveGreen · Forest Green

HEX
#506647
RGB
rgb(80, 102, 71)
HSL
hsl(103, 18%, 34%)
HSB
hsb(103, 30%, 40%)
CMYK
cmyk(22%, 0%, 30%, 60%)
Oklch
oklch(48.3% 0.055 136.8)

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

#62A871

Celadon · MediumSeaGreen · Olive Green

HEX
#62A871
RGB
rgb(98, 168, 113)
HSL
hsl(133, 29%, 52%)
HSB
hsb(133, 42%, 66%)
CMYK
cmyk(42%, 0%, 33%, 34%)
Oklch
oklch(67.1% 0.108 149.6)

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

#F2BF46

Ginger · SandyBrown · Sunflower

HEX
#F2BF46
RGB
rgb(242, 191, 70)
HSL
hsl(42, 87%, 61%)
HSB
hsb(42, 71%, 95%)
CMYK
cmyk(0%, 21%, 71%, 5%)
Oklch
oklch(83.0% 0.145 85.2)

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

#704442

Crimson · DarkOliveGreen · Wine Red

HEX
#704442
RGB
rgb(112, 68, 66)
HSL
hsl(3, 26%, 35%)
HSB
hsb(3, 41%, 44%)
CMYK
cmyk(0%, 39%, 41%, 56%)
Oklch
oklch(43.8% 0.061 22.7)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#4A2626

Crimson · DarkSlateGray · Wine Red

HEX
#4A2626
RGB
rgb(74, 38, 38)
HSL
hsl(0, 32%, 22%)
HSB
hsb(0, 49%, 29%)
CMYK
cmyk(0%, 49%, 49%, 71%)
Oklch
oklch(31.7% 0.054 20.6)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

506647
5D4766

Analogous

606647
506647
47664E

Triadic

506647
475066
664750

Split-Comp.

506647
4E4766
664760

Tetradic

506647
476066
5D4766
664E47

Contrast Matrix WCAG 2.1 Contrast

506647
62A871
F2BF46
704442
4A2626
—
2.2
Fail
3.7
AA Large
1.3
Fail
2.1
Fail
2.2
Fail
—
1.7
Fail
2.8
Fail
4.6
AA
3.7
AA Large
1.7
Fail
—
4.7
AA
7.7
AAA
1.3
Fail
2.8
Fail
4.7
AA
—
1.6
Fail
2.1
Fail
4.6
AA
7.7
AAA
1.6
Fail
—
White BG
6.3AA
2.9Fail
1.7Fail
8.1AAA
13.2AAA
Black BG
3.3AA Large
7.4AAA
12.3AAA
2.6Fail
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

5A5A4F
80817E
DCDB63
5D5D42
3A3A26

Deuteranopia

585750
7C7782
DFE36A
606343
3D3F26

Tritanopia

515456
66898B
EF7A7F
6E4343
482626

Achromatopsia

5C5C5C
8D8D8D
C0C0C0
515151
313131

Shades & Tints Shades & Tints

#506647

Dark
Light

#62A871

Dark
Light

#F2BF46

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #506647;
  --color-2: #62a871;
  --color-3: #f2bf46;
  --color-4: #704442;
  --color-5: #4a2626;
}

SCSS

$color-1: #506647;
$color-2: #62a871;
$color-3: #f2bf46;
$color-4: #704442;
$color-5: #4a2626;

TAILWIND

colors: {
  'brand-1': '#506647',
  'brand-2': '#62a871',
  'brand-3': '#f2bf46',
  'brand-4': '#704442',
  'brand-5': '#4a2626',
}

RGB Array

[80, 102, 71], [98, 168, 113], [242, 191, 70], [112, 68, 66], [74, 38, 38]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #506647, #62A871, #F2BF46, #704442, #4A2626 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: #506647; --color-2: #62a871; --color-3: #f2bf46; --color-4: #704442; --color-5: #4a2626. 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