#D7E495 + #BEDF9A + #89BEAE + #708EA5 + #7A6497 · 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

#D7E495

Willow Green · Khaki · Apple Green

HEX

#D7E495

RGB

rgb(215, 228, 149)

HSL

hsl(70, 59%, 74%)

HSB

hsb(70, 35%, 89%)

CMYK

cmyk(6%, 0%, 35%, 11%)

Oklch

oklch(89.1% 0.102 116.1)

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

#BEDF9A

Willow Green · Silver · Apple Green

HEX

#BEDF9A

RGB

rgb(190, 223, 154)

HSL

hsl(89, 52%, 74%)

HSB

hsb(89, 31%, 87%)

CMYK

cmyk(15%, 0%, 31%, 13%)

Oklch

oklch(86.3% 0.098 129.0)

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

#89BEAE

Jade · DarkSeaGreen · Lake Green

HEX

#89BEAE

RGB

rgb(137, 190, 174)

HSL

hsl(162, 29%, 64%)

HSB

hsb(162, 28%, 75%)

CMYK

cmyk(28%, 0%, 8%, 25%)

Oklch

oklch(76.0% 0.060 174.0)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#708EA5

Slate Blue · LightSlateGray · Navy Blue

HEX

#708EA5

RGB

rgb(112, 142, 165)

HSL

hsl(206, 23%, 54%)

HSB

hsb(206, 32%, 65%)

CMYK

cmyk(32%, 14%, 0%, 35%)

Oklch

oklch(63.2% 0.049 241.5)

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

#7A6497

Deep Indigo · SlateGray · Violet

HEX

#7A6497

RGB

rgb(122, 100, 151)

HSL

hsl(266, 20%, 49%)

HSB

hsb(266, 34%, 59%)

CMYK

cmyk(19%, 34%, 0%, 41%)

Oklch

oklch(54.5% 0.081 303.6)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D7E495

A396E4

Analogous

E4CA96

D7E495

B0E496

Triadic

D7E495

96D7E4

E496D7

Split-Comp.

D7E495

96B0E4

CA96E4

Tetradic

D7E495

96E4CA

A396E4

E496B0

Contrast Matrix WCAG 2.1 Contrast

D7E495	BEDF9A	89BEAE	708EA5	7A6497
—	1.1 Fail	1.5 Fail	2.5 Fail	3.8 AA Large
1.1 Fail	—	1.4 Fail	2.3 Fail	3.5 AA Large
1.5 Fail	1.4 Fail	—	1.6 Fail	2.5 Fail
2.5 Fail	2.3 Fail	1.6 Fail	—	1.5 Fail
3.8 AA Large	3.5 AA Large	2.5 Fail	1.5 Fail	—

White BG

1.4Fail

1.5Fail

2.1Fail

3.4AA Large

5.1AA

Black BG

15.4AAA

14.2AAA

10.0AAA

6.1AA

4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDDA8

CCCDAB

A0A0B2

7D7D9F

70708B

Deuteranopia

DCDBAD

CAC8AF

9D99B3

7B799E

727388

Tritanopia

D8B7BB

C0B8BB

8CB5B6

719B9A

79817F

Achromatopsia

D7D7D7

CDCDCD

ACACAC

888888

707070

Shades & Tints Shades & Tints

#D7E495

Dark

Light

#BEDF9A

Dark

Light

#89BEAE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d7e495;
  --color-2: #bedf9a;
  --color-3: #89beae;
  --color-4: #708ea5;
  --color-5: #7a6497;
}

SCSS

$color-1: #d7e495;
$color-2: #bedf9a;
$color-3: #89beae;
$color-4: #708ea5;
$color-5: #7a6497;

TAILWIND

colors: {
  'brand-1': '#d7e495',
  'brand-2': '#bedf9a',
  'brand-3': '#89beae',
  'brand-4': '#708ea5',
  'brand-5': '#7a6497',
}

RGB Array

[215, 228, 149], [190, 223, 154], [137, 190, 174], [112, 142, 165], [122, 100, 151]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #D7E495, #BEDF9A, #89BEAE, #708EA5, #7A6497 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: #d7e495; --color-2: #bedf9a; --color-3: #89beae; --color-4: #708ea5; --color-5: #7a6497. 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