#EFDD9B + #C3DE9B + #7BDC97 + #5BCC96 + #25A68A · 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

#EFDD9B

Goose Yellow · Khaki · Lemon Cream

HEX

#EFDD9B

RGB

rgb(239, 221, 155)

HSL

hsl(47, 72%, 77%)

HSB

hsb(47, 35%, 94%)

CMYK

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

Oklch

oklch(89.7% 0.086 94.7)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#C3DE9B

Willow Green · Tan · Apple Green

HEX

#C3DE9B

RGB

rgb(195, 222, 155)

HSL

hsl(84, 50%, 74%)

HSB

hsb(84, 30%, 87%)

CMYK

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

Oklch

oklch(86.4% 0.093 126.1)

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

#7BDC97

Emerald · LightGreen · Apple Green

HEX

#7BDC97

RGB

rgb(123, 220, 151)

HSL

hsl(137, 58%, 67%)

HSB

hsb(137, 44%, 86%)

CMYK

cmyk(44%, 0%, 31%, 14%)

Oklch

oklch(81.7% 0.135 151.8)

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

#5BCC96

Mineral Blue · MediumAquaMarine · Olive Green

HEX

#5BCC96

RGB

rgb(91, 204, 150)

HSL

hsl(151, 53%, 58%)

HSB

hsb(151, 55%, 80%)

CMYK

cmyk(55%, 0%, 26%, 20%)

Oklch

oklch(76.5% 0.131 160.2)

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

#25A68A

Mineral Blue · LightSeaGreen · Mint Ice

HEX

#25A68A

RGB

rgb(37, 166, 138)

HSL

hsl(167, 64%, 40%)

HSB

hsb(167, 78%, 65%)

CMYK

cmyk(78%, 0%, 17%, 35%)

Oklch

oklch(65.1% 0.115 173.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EFDD9B

9AACEF

Analogous

EFB29A

EFDD9B

D7EF9A

Triadic

EFDD9B

9AEFDC

DC9AEF

Split-Comp.

EFDD9B

9AD7EF

B29AEF

Tetradic

EFDD9B

9AEFB2

9AACEF

EF9AD7

Contrast Matrix WCAG 2.1 Contrast

EFDD9B	C3DE9B	7BDC97	5BCC96	25A68A
—	1.1 Fail	1.2 Fail	1.5 Fail	2.2 Fail
1.1 Fail	—	1.1 Fail	1.4 Fail	2.1 Fail
1.2 Fail	1.1 Fail	—	1.2 Fail	1.8 Fail
1.5 Fail	1.4 Fail	1.2 Fail	—	1.5 Fail
2.2 Fail	2.1 Fail	1.8 Fail	1.5 Fail	—

White BG

1.4Fail

1.5Fail

1.7Fail

2.0Fail

3.0AA Large

Black BG

15.5AAA

14.2AAA

12.5AAA

10.5AAA

6.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E7E7AB

CFCFAB

A5A6A8

8C8DA3

5D5E91

Deuteranopia

E8EAAF

CDCBAF

9F98AC

857DA6

554C92

Tritanopia

EEB8BA

C4B8BB

80B5B8

61ADB0

2B9697

Achromatopsia

DBDBDB

CECECE

B7B7B7

A4A4A4

7C7C7C

Shades & Tints Shades & Tints

#EFDD9B

Dark

Light

#C3DE9B

Dark

Light

#7BDC97

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #efdd9b;
  --color-2: #c3de9b;
  --color-3: #7bdc97;
  --color-4: #5bcc96;
  --color-5: #25a68a;
}

SCSS

$color-1: #efdd9b;
$color-2: #c3de9b;
$color-3: #7bdc97;
$color-4: #5bcc96;
$color-5: #25a68a;

TAILWIND

colors: {
  'brand-1': '#efdd9b',
  'brand-2': '#c3de9b',
  'brand-3': '#7bdc97',
  'brand-4': '#5bcc96',
  'brand-5': '#25a68a',
}

RGB Array

[239, 221, 155], [195, 222, 155], [123, 220, 151], [91, 204, 150], [37, 166, 138]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #EFDD9B, #C3DE9B, #7BDC97, #5BCC96, #25A68A 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: #efdd9b; --color-2: #c3de9b; --color-3: #7bdc97; --color-4: #5bcc96; --color-5: #25a68a. 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