#D9DD93 + #BFDEB4 + #96DDBB + #59D6D2 + #87AAA6 · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D9DD93

Fresh Green · Khaki · Sunflower

HEX

#D9DD93

RGB

rgb(217, 221, 147)

HSL

hsl(63, 52%, 72%)

HSB

hsb(63, 33%, 87%)

CMYK

cmyk(2%, 0%, 33%, 13%)

Oklch

oklch(87.7% 0.095 110.8)

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

#BFDEB4

Celadon · Silver · Apple Green

HEX

#BFDEB4

RGB

rgb(191, 222, 180)

HSL

hsl(104, 39%, 79%)

HSB

hsb(104, 19%, 87%)

CMYK

cmyk(14%, 0%, 19%, 13%)

Oklch

oklch(86.7% 0.066 137.5)

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

#96DDBB

Jade · LightGreen · Apple Green

HEX

#96DDBB

RGB

rgb(150, 221, 187)

HSL

hsl(151, 51%, 73%)

HSB

hsb(151, 32%, 87%)

CMYK

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

Oklch

oklch(84.1% 0.086 163.1)

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

#59D6D2

Mineral Blue · MediumTurquoise · Lake Green

HEX

#59D6D2

RGB

rgb(89, 214, 210)

HSL

hsl(178, 60%, 59%)

HSB

hsb(178, 58%, 84%)

CMYK

cmyk(58%, 0%, 2%, 16%)

Oklch

oklch(80.6% 0.110 192.3)

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

#87AAA6

Mineral Blue · DarkSeaGreen · Lake Green

HEX

#87AAA6

RGB

rgb(135, 170, 166)

HSL

hsl(173, 17%, 60%)

HSB

hsb(173, 21%, 67%)

CMYK

cmyk(21%, 0%, 2%, 33%)

Oklch

oklch(71.1% 0.039 187.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D9DD93

9692DD

Analogous

DDBB92

D9DD93

B4DD92

Triadic

D9DD93

92D9DD

DD92D9

Split-Comp.

D9DD93

92B4DD

BB92DD

Tetradic

D9DD93

92DDBB

9692DD

DD92B4

Contrast Matrix WCAG 2.1 Contrast

D9DD93	BFDEB4	96DDBB	59D6D2	87AAA6
—	1.0 Fail	1.1 Fail	1.2 Fail	1.8 Fail
1.0 Fail	—	1.1 Fail	1.2 Fail	1.7 Fail
1.1 Fail	1.1 Fail	—	1.1 Fail	1.6 Fail
1.2 Fail	1.2 Fail	1.1 Fail	—	1.4 Fail
1.8 Fail	1.7 Fail	1.6 Fail	1.4 Fail	—

White BG

1.4Fail

1.5Fail

1.6Fail

1.8Fail

2.5Fail

Black BG

14.7AAA

14.3AAA

13.4AAA

12.0AAA

8.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DBDBA5

CCCDBE

B5B5C3

8F90D3

9696A7

Deuteranopia

DBDAA9

CBC8C1

B1ABC5

887FD3

9492A7

Tritanopia

D9B3B6

C1C6C8

9ACACB

5FD4D4

89A8A8

Achromatopsia

D3D3D3

D0D0D0

C4C4C4

B0B0B0

9F9F9F

Shades & Tints Shades & Tints

#D9DD93

Dark

Light

#BFDEB4

Dark

Light

#96DDBB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d9dd93;
  --color-2: #bfdeb4;
  --color-3: #96ddbb;
  --color-4: #59d6d2;
  --color-5: #87aaa6;
}

SCSS

$color-1: #d9dd93;
$color-2: #bfdeb4;
$color-3: #96ddbb;
$color-4: #59d6d2;
$color-5: #87aaa6;

TAILWIND

colors: {
  'brand-1': '#d9dd93',
  'brand-2': '#bfdeb4',
  'brand-3': '#96ddbb',
  'brand-4': '#59d6d2',
  'brand-5': '#87aaa6',
}

RGB Array

[217, 221, 147], [191, 222, 180], [150, 221, 187], [89, 214, 210], [135, 170, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #D9DD93, #BFDEB4, #96DDBB, #59D6D2, #87AAA6 is ideal for: health products, baby brands, fresh-style blogs. 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: #d9dd93; --color-2: #bfdeb4; --color-3: #96ddbb; --color-4: #59d6d2; --color-5: #87aaa6. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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