#5C8F88 + #73AD84 + #C6D5AC + #FFE0A7 + #EB3355 · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#5C8F88

Mineral Blue · SlateGray · Mint Ice

HEX

#5C8F88

RGB

rgb(92, 143, 136)

HSL

hsl(172, 22%, 46%)

HSB

hsb(172, 36%, 56%)

CMYK

cmyk(36%, 0%, 5%, 44%)

Oklch

oklch(61.2% 0.056 185.0)

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

#73AD84

Celadon · DarkSeaGreen · Olive Green

HEX

#73AD84

RGB

rgb(115, 173, 132)

HSL

hsl(138, 26%, 56%)

HSB

hsb(138, 34%, 68%)

CMYK

cmyk(34%, 0%, 24%, 32%)

Oklch

oklch(69.6% 0.086 153.0)

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

#C6D5AC

Willow Green · Silver · Apple Green

HEX

#C6D5AC

RGB

rgb(198, 213, 172)

HSL

hsl(82, 33%, 75%)

HSB

hsb(82, 19%, 84%)

CMYK

cmyk(7%, 0%, 19%, 16%)

Oklch

oklch(85.1% 0.057 124.0)

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

#FFE0A7

Goose Yellow · Wheat · Peach Orange

HEX

#FFE0A7

RGB

rgb(255, 224, 167)

HSL

hsl(39, 100%, 83%)

HSB

hsb(39, 35%, 100%)

CMYK

cmyk(0%, 12%, 35%, 0%)

Oklch

oklch(91.9% 0.080 82.5)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#EB3355

Vermilion · Crimson · Passion Red

HEX

#EB3355

RGB

rgb(235, 51, 85)

HSL

hsl(349, 82%, 56%)

HSB

hsb(349, 78%, 92%)

CMYK

cmyk(0%, 78%, 64%, 8%)

Oklch

oklch(61.9% 0.217 16.8)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5C8F88

8F5B62

Analogous

5B8F6E

5C8F88

5B7C8F

Triadic

5C8F88

885B8F

8F885B

Split-Comp.

5C8F88

8F5B7C

8F6E5B

Tetradic

5C8F88

6E5B8F

8F5B62

7C8F5B

Contrast Matrix WCAG 2.1 Contrast

5C8F88	73AD84	C6D5AC	FFE0A7	EB3355
—	1.4 Fail	2.4 Fail	2.9 Fail	1.1 Fail
1.4 Fail	—	1.7 Fail	2.0 Fail	1.6 Fail
2.4 Fail	1.7 Fail	—	1.2 Fail	2.6 Fail
2.9 Fail	2.0 Fail	1.2 Fail	—	3.2 AA Large
1.1 Fail	1.6 Fail	2.6 Fail	3.2 AA Large	—

White BG

3.7AA Large

2.6Fail

1.6Fail

1.3Fail

4.1AA Large

Black BG

5.7AA

8.0AAA

13.5AAA

16.5AAA

5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

72738A

8C8D8E

CCCDB6

F2F1B5

9B9A4D

Deuteranopia

6F6B8A

898490

CCCBB8

F3F6B8

A6B44B

Tritanopia

5F8B8B

769697

C7BEBF

FDC0C2

E24645

Achromatopsia

7F7F7F

979797

CCCCCC

E3E3E3

6E6E6E

Shades & Tints Shades & Tints

#5C8F88

Dark

Light

#73AD84

Dark

Light

#C6D5AC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5c8f88;
  --color-2: #73ad84;
  --color-3: #c6d5ac;
  --color-4: #ffe0a7;
  --color-5: #eb3355;
}

SCSS

$color-1: #5c8f88;
$color-2: #73ad84;
$color-3: #c6d5ac;
$color-4: #ffe0a7;
$color-5: #eb3355;

TAILWIND

colors: {
  'brand-1': '#5c8f88',
  'brand-2': '#73ad84',
  'brand-3': '#c6d5ac',
  'brand-4': '#ffe0a7',
  'brand-5': '#eb3355',
}

RGB Array

[92, 143, 136], [115, 173, 132], [198, 213, 172], [255, 224, 167], [235, 51, 85]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #5C8F88, #73AD84, #C6D5AC, #FFE0A7, #EB3355 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: #5c8f88; --color-2: #73ad84; --color-3: #c6d5ac; --color-4: #ffe0a7; --color-5: #eb3355. 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