#62ABA0 + #86C76C + #C0CC26 + #CCF3A8 + #72BE9F · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#62ABA0

Mineral Blue · CadetBlue · Lake Green

HEX

#62ABA0

RGB

rgb(98, 171, 160)

HSL

hsl(171, 30%, 53%)

HSB

hsb(171, 43%, 67%)

CMYK

cmyk(43%, 0%, 6%, 33%)

Oklch

oklch(69.0% 0.075 183.3)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#86C76C

Celadon · DarkSeaGreen · Olive Green

HEX

#86C76C

RGB

rgb(134, 199, 108)

HSL

hsl(103, 45%, 60%)

HSB

hsb(103, 46%, 78%)

CMYK

cmyk(33%, 0%, 46%, 22%)

Oklch

oklch(76.5% 0.140 137.3)

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

#C0CC26

Autumn Sage · GoldenRod · Honey Gold

HEX

#C0CC26

RGB

rgb(192, 204, 38)

HSL

hsl(64, 69%, 47%)

HSB

hsb(64, 81%, 80%)

CMYK

cmyk(6%, 0%, 81%, 20%)

Oklch

oklch(80.9% 0.173 114.1)

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

#CCF3A8

Emerald · Wheat · Mint Green

HEX

#CCF3A8

RGB

rgb(204, 243, 168)

HSL

hsl(91, 76%, 81%)

HSB

hsb(91, 31%, 95%)

CMYK

cmyk(16%, 0%, 31%, 5%)

Oklch

oklch(91.8% 0.106 130.6)

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

#72BE9F

Mineral Blue · MediumAquaMarine · Olive Green

HEX

#72BE9F

RGB

rgb(114, 190, 159)

HSL

hsl(156, 37%, 60%)

HSB

hsb(156, 40%, 75%)

CMYK

cmyk(40%, 0%, 16%, 25%)

Oklch

oklch(74.3% 0.089 166.1)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

62ABA0

AB636E

Analogous

63AB7C

62ABA0

6392AB

Triadic

62ABA0

A063AB

ABA063

Split-Comp.

62ABA0

AB6392

AB7C63

Tetradic

62ABA0

7C63AB

AB636E

92AB63

Contrast Matrix WCAG 2.1 Contrast

62ABA0	86C76C	C0CC26	CCF3A8	72BE9F
—	1.3 Fail	1.5 Fail	2.2 Fail	1.2 Fail
1.3 Fail	—	1.1 Fail	1.6 Fail	1.1 Fail
1.5 Fail	1.1 Fail	—	1.4 Fail	1.2 Fail
2.2 Fail	1.6 Fail	1.4 Fail	—	1.8 Fail
1.2 Fail	1.1 Fail	1.2 Fail	1.8 Fail	—

White BG

2.7Fail

2.0Fail

1.8Fail

1.2Fail

2.2Fail

Black BG

7.9AAA

10.4AAA

11.9AAA

17.0AAA

9.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8282A3

A2A382

C5C54E

DDDDBA

9394A7

Deuteranopia

7D78A3

9E9A87

C5C458

DBD8BF

8F89A8

Tritanopia

66A5A5

899397

C16E75

CEC8CC

76ACAE

Achromatopsia

949494

A9A9A9

B5B5B5

DFDFDF

A4A4A4

Shades & Tints Shades & Tints

#62ABA0

Dark

Light

#86C76C

Dark

Light

#C0CC26

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #62aba0;
  --color-2: #86c76c;
  --color-3: #c0cc26;
  --color-4: #ccf3a8;
  --color-5: #72be9f;
}

SCSS

$color-1: #62aba0;
$color-2: #86c76c;
$color-3: #c0cc26;
$color-4: #ccf3a8;
$color-5: #72be9f;

TAILWIND

colors: {
  'brand-1': '#62aba0',
  'brand-2': '#86c76c',
  'brand-3': '#c0cc26',
  'brand-4': '#ccf3a8',
  'brand-5': '#72be9f',
}

RGB Array

[98, 171, 160], [134, 199, 108], [192, 204, 38], [204, 243, 168], [114, 190, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #62ABA0, #86C76C, #C0CC26, #CCF3A8, #72BE9F 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: #62aba0; --color-2: #86c76c; --color-3: #c0cc26; --color-4: #ccf3a8; --color-5: #72be9f. 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