#668186 + #519998 + #53B39C + #9ED087 + #CCD479 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#668186

Slate Blue · SlateGray · Mint Ice

HEX

#668186

RGB

rgb(102, 129, 134)

HSL

hsl(189, 14%, 46%)

HSB

hsb(189, 24%, 53%)

CMYK

cmyk(24%, 4%, 0%, 47%)

Oklch

oklch(58.4% 0.032 210.1)

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

#519998

Mineral Blue · CadetBlue · Mint Ice

HEX

#519998

RGB

rgb(81, 153, 152)

HSL

hsl(179, 31%, 46%)

HSB

hsb(179, 47%, 60%)

CMYK

cmyk(47%, 0%, 1%, 40%)

Oklch

oklch(63.6% 0.072 194.3)

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

#53B39C

Mineral Blue · CadetBlue · Lake Green

HEX

#53B39C

RGB

rgb(83, 179, 156)

HSL

hsl(166, 39%, 51%)

HSB

hsb(166, 54%, 70%)

CMYK

cmyk(54%, 0%, 13%, 30%)

Oklch

oklch(70.2% 0.098 175.4)

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

#9ED087

Celadon · DarkSeaGreen · Apple Green

HEX

#9ED087

RGB

rgb(158, 208, 135)

HSL

hsl(101, 44%, 67%)

HSB

hsb(101, 35%, 82%)

CMYK

cmyk(24%, 0%, 35%, 18%)

Oklch

oklch(80.5% 0.112 136.2)

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

#CCD479

Fresh Green · BurlyWood · Sunflower

HEX

#CCD479

RGB

rgb(204, 212, 121)

HSL

hsl(65, 51%, 65%)

HSB

hsb(65, 43%, 83%)

CMYK

cmyk(4%, 0%, 43%, 17%)

Oklch

oklch(84.4% 0.115 113.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

668186

866A65

Analogous

65867A

668186

657086

Triadic

668186

866581

818665

Split-Comp.

668186

866570

867A65

Tetradic

668186

7A6586

866A65

708665

Contrast Matrix WCAG 2.1 Contrast

668186	519998	53B39C	9ED087	CCD479
—	1.3 Fail	1.6 Fail	2.3 Fail	2.6 Fail
1.3 Fail	—	1.3 Fail	1.9 Fail	2.1 Fail
1.6 Fail	1.3 Fail	—	1.4 Fail	1.6 Fail
2.3 Fail	1.9 Fail	1.4 Fail	—	1.1 Fail
2.6 Fail	2.1 Fail	1.6 Fail	1.1 Fail	—

White BG

4.2AA Large

3.3AA Large

2.5Fail

1.8Fail

1.6Fail

Black BG

5.0AA

6.4AA

8.3AAA

11.8AAA

13.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

727285

707198

7D7DA2

B4B499

CFD08F

Deuteranopia

706E85

6C6798

7770A3

B1AD9D

CFCE94

Tritanopia

678484

559898

58A6A7

A1A7AA

CCA0A4

Achromatopsia

797979

838383

949494

B9B9B9

C7C7C7

Shades & Tints Shades & Tints

#668186

Dark

Light

#519998

Dark

Light

#53B39C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #668186;
  --color-2: #519998;
  --color-3: #53b39c;
  --color-4: #9ed087;
  --color-5: #ccd479;
}

SCSS

$color-1: #668186;
$color-2: #519998;
$color-3: #53b39c;
$color-4: #9ed087;
$color-5: #ccd479;

TAILWIND

colors: {
  'brand-1': '#668186',
  'brand-2': '#519998',
  'brand-3': '#53b39c',
  'brand-4': '#9ed087',
  'brand-5': '#ccd479',
}

RGB Array

[102, 129, 134], [81, 153, 152], [83, 179, 156], [158, 208, 135], [204, 212, 121]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #668186, #519998, #53B39C, #9ED087, #CCD479 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: #668186; --color-2: #519998; --color-3: #53b39c; --color-4: #9ed087; --color-5: #ccd479. 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 general-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