#7CD0B2 + #58C8A0 + #B2DA9E + #D6DE9A + #FFEF8A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#7CD0B2

Jade · MediumAquaMarine · Apple Green

HEX

#7CD0B2

RGB

rgb(124, 208, 178)

HSL

hsl(159, 47%, 65%)

HSB

hsb(159, 40%, 82%)

CMYK

cmyk(40%, 0%, 14%, 18%)

Oklch

oklch(79.6% 0.093 169.0)

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

#58C8A0

Mineral Blue · MediumAquaMarine · Olive Green

HEX

#58C8A0

RGB

rgb(88, 200, 160)

HSL

hsl(159, 50%, 56%)

HSB

hsb(159, 56%, 78%)

CMYK

cmyk(56%, 0%, 20%, 22%)

Oklch

oklch(75.7% 0.119 166.9)

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

#B2DA9E

Celadon · LightGreen · Apple Green

HEX

#B2DA9E

RGB

rgb(178, 218, 158)

HSL

hsl(100, 45%, 74%)

HSB

hsb(100, 28%, 85%)

CMYK

cmyk(18%, 0%, 28%, 15%)

Oklch

oklch(84.5% 0.091 135.4)

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

#D6DE9A

Fresh Green · Khaki · Sunflower

HEX

#D6DE9A

RGB

rgb(214, 222, 154)

HSL

hsl(67, 51%, 74%)

HSB

hsb(67, 31%, 87%)

CMYK

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

Oklch

oklch(87.8% 0.089 113.7)

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

#FFEF8A

Fresh Green · Khaki · Lemon Cream

HEX

#FFEF8A

RGB

rgb(255, 239, 138)

HSL

hsl(52, 100%, 77%)

HSB

hsb(52, 46%, 100%)

CMYK

cmyk(0%, 6%, 46%, 0%)

Oklch

oklch(94.4% 0.123 100.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7CD0B2

D07C99

Analogous

7CD088

7CD0B2

7CC3D0

Triadic

7CD0B2

B27CD0

D0B27C

Split-Comp.

7CD0B2

D07CC3

D0887C

Tetradic

7CD0B2

887CD0

D07C99

C3D07C

Contrast Matrix WCAG 2.1 Contrast

7CD0B2	58C8A0	B2DA9E	D6DE9A	FFEF8A
—	1.1 Fail	1.2 Fail	1.3 Fail	1.6 Fail
1.1 Fail	—	1.3 Fail	1.5 Fail	1.8 Fail
1.2 Fail	1.3 Fail	—	1.1 Fail	1.3 Fail
1.3 Fail	1.5 Fail	1.1 Fail	—	1.2 Fail
1.6 Fail	1.8 Fail	1.3 Fail	1.2 Fail	—

White BG

1.8Fail

2.1Fail

1.6Fail

1.4Fail

1.2Fail

Black BG

11.5AAA

10.2AAA

13.4AAA

14.8AAA

18.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A0A1B9

888AAA

C3C4AD

D9DAAA

F8F8A2

Deuteranopia

9C95BB

827AAC

C1BEB0

D9D8AE

F9FAA8

Tritanopia

80BFC0

5EB1B3

B4B8BB

D6B7BA

FEB6BA

Achromatopsia

B3B3B3

A2A2A2

C7C7C7

D4D4D4

E8E8E8

Shades & Tints Shades & Tints

#7CD0B2

Dark

Light

#58C8A0

Dark

Light

#B2DA9E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7cd0b2;
  --color-2: #58c8a0;
  --color-3: #b2da9e;
  --color-4: #d6de9a;
  --color-5: #ffef8a;
}

SCSS

$color-1: #7cd0b2;
$color-2: #58c8a0;
$color-3: #b2da9e;
$color-4: #d6de9a;
$color-5: #ffef8a;

TAILWIND

colors: {
  'brand-1': '#7cd0b2',
  'brand-2': '#58c8a0',
  'brand-3': '#b2da9e',
  'brand-4': '#d6de9a',
  'brand-5': '#ffef8a',
}

RGB Array

[124, 208, 178], [88, 200, 160], [178, 218, 158], [214, 222, 154], [255, 239, 138]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7CD0B2, #58C8A0, #B2DA9E, #D6DE9A, #FFEF8A 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: #7cd0b2; --color-2: #58c8a0; --color-3: #b2da9e; --color-4: #d6de9a; --color-5: #ffef8a. 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 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