#668090 + #886D80 + #CA7686 + #D8F498 + #D2D3C6 · 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

#668090

Slate Blue · SlateGray · Navy Blue

HEX

#668090

RGB

rgb(102, 128, 144)

HSL

hsl(203, 17%, 48%)

HSB

hsb(203, 29%, 56%)

CMYK

cmyk(29%, 11%, 0%, 44%)

Oklch

oklch(58.5% 0.039 235.3)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#886D80

Rose Purple · Gray · Violet

HEX

#886D80

RGB

rgb(136, 109, 128)

HSL

hsl(318, 11%, 48%)

HSB

hsb(318, 20%, 53%)

CMYK

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

Oklch

oklch(56.7% 0.044 337.1)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#CA7686

Peach Pink · LightCoral · Coral Red

HEX

#CA7686

RGB

rgb(202, 118, 134)

HSL

hsl(349, 44%, 63%)

HSB

hsb(349, 42%, 79%)

CMYK

cmyk(0%, 42%, 34%, 21%)

Oklch

oklch(66.2% 0.106 8.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#D8F498

Willow Green · Khaki · Apple Green

HEX

#D8F498

RGB

rgb(216, 244, 152)

HSL

hsl(78, 81%, 78%)

HSB

hsb(78, 38%, 96%)

CMYK

cmyk(11%, 0%, 38%, 4%)

Oklch

oklch(92.6% 0.120 122.6)

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

#D2D3C6

Fresh Green · LightGray · Lemon Cream

HEX

#D2D3C6

RGB

rgb(210, 211, 198)

HSL

hsl(65, 13%, 80%)

HSB

hsb(65, 6%, 83%)

CMYK

cmyk(0%, 0%, 6%, 17%)

Oklch

oklch(86.2% 0.018 110.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

668090

8F7666

Analogous

668F8A

668090

666A8F

Triadic

668090

8F667F

7F8F66

Split-Comp.

668090

8F666A

8F8A66

Tetradic

668090

8A668F

8F7666

6A8F66

Contrast Matrix WCAG 2.1 Contrast

668090	886D80	CA7686	D8F498	D2D3C6
—	1.1 Fail	1.3 Fail	3.4 AA Large	2.7 Fail
1.1 Fail	—	1.4 Fail	3.8 AA Large	3.1 AA Large
1.3 Fail	1.4 Fail	—	2.7 Fail	2.2 Fail
3.4 AA Large	3.8 AA Large	2.7 Fail	—	1.2 Fail
2.7 Fail	3.1 AA Large	2.2 Fail	1.2 Fail	—

White BG

4.2AA Large

4.6AA

3.3AA Large

1.2Fail

1.5Fail

Black BG

5.1AA

4.5AA

6.4AA

17.3AAA

13.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

71718C

7C7C7B

A6A582

E4E4AE

D2D2C9

Deuteranopia

706E8B

7E807A

ABB181

E3E0B4

D2D2CA

Tritanopia

678988

877877

C67F7E

D9C0C4

D2CCCC

Achromatopsia

7A7A7A

777777

919191

E1E1E1

D1D1D1

Shades & Tints Shades & Tints

#668090

Dark

Light

#886D80

Dark

Light

#CA7686

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #668090;
  --color-2: #886d80;
  --color-3: #ca7686;
  --color-4: #d8f498;
  --color-5: #d2d3c6;
}

SCSS

$color-1: #668090;
$color-2: #886d80;
$color-3: #ca7686;
$color-4: #d8f498;
$color-5: #d2d3c6;

TAILWIND

colors: {
  'brand-1': '#668090',
  'brand-2': '#886d80',
  'brand-3': '#ca7686',
  'brand-4': '#d8f498',
  'brand-5': '#d2d3c6',
}

RGB Array

[102, 128, 144], [136, 109, 128], [202, 118, 134], [216, 244, 152], [210, 211, 198]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #668090, #886D80, #CA7686, #D8F498, #D2D3C6 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: #668090; --color-2: #886d80; --color-3: #ca7686; --color-4: #d8f498; --color-5: #d2d3c6. 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