#C7E092 + #88AABB + #98B7B1 + #A7C5A6 + #DEF482 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C7E092

Willow Green · Khaki · Apple Green

HEX

#C7E092

RGB

rgb(199, 224, 146)

HSL

hsl(79, 56%, 73%)

HSB

hsb(79, 35%, 88%)

CMYK

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

Oklch

oklch(87.0% 0.105 123.0)

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

#88AABB

Sky Blue · DarkGray · Cobalt Blue

HEX

#88AABB

RGB

rgb(136, 170, 187)

HSL

hsl(200, 27%, 63%)

HSB

hsb(200, 27%, 73%)

CMYK

cmyk(27%, 9%, 0%, 27%)

Oklch

oklch(71.9% 0.045 229.8)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#98B7B1

Jade · DarkGray · Lake Green

HEX

#98B7B1

RGB

rgb(152, 183, 177)

HSL

hsl(168, 18%, 66%)

HSB

hsb(168, 17%, 72%)

CMYK

cmyk(17%, 0%, 3%, 28%)

Oklch

oklch(75.5% 0.035 182.3)

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

#A7C5A6

Celadon · DarkGray · Apple Green

HEX

#A7C5A6

RGB

rgb(167, 197, 166)

HSL

hsl(118, 21%, 71%)

HSB

hsb(118, 16%, 77%)

CMYK

cmyk(15%, 0%, 16%, 23%)

Oklch

oklch(79.3% 0.054 144.2)

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

#DEF482

Willow Green · Khaki · Apple Green

HEX

#DEF482

RGB

rgb(222, 244, 130)

HSL

hsl(72, 84%, 73%)

HSB

hsb(72, 47%, 96%)

CMYK

cmyk(9%, 0%, 47%, 4%)

Oklch

oklch(92.7% 0.142 118.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C7E092

AC94E1

Analogous

E1D394

C7E092

A2E194

Triadic

C7E092

94C8E1

E194C8

Split-Comp.

C7E092

94A2E1

D394E1

Tetradic

C7E092

94E1D3

AC94E1

E194A2

Contrast Matrix WCAG 2.1 Contrast

C7E092	88AABB	98B7B1	A7C5A6	DEF482
—	1.7 Fail	1.5 Fail	1.3 Fail	1.2 Fail
1.7 Fail	—	1.1 Fail	1.3 Fail	2.0 Fail
1.5 Fail	1.1 Fail	—	1.1 Fail	1.8 Fail
1.3 Fail	1.3 Fail	1.1 Fail	—	1.6 Fail
1.2 Fail	2.0 Fail	1.8 Fail	1.6 Fail	—

White BG

1.4Fail

2.5Fail

2.2Fail

1.9Fail

1.2Fail

Black BG

14.5AAA

8.5AAA

9.7AAA

11.2AAA

17.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D2D2A5

9797B7

A5A6B2

B4B4AE

E8E89E

Deuteranopia

D0CFA9

9592B6

A4A1B3

B2B0AF

E6E5A4

Tritanopia

C8B4B7

8AB4B3

9AB4B4

A9B3B5

DFB3B8

Achromatopsia

D0D0D0

A2A2A2

ADADAD

B8B8B8

E0E0E0

Shades & Tints Shades & Tints

#C7E092

Dark

Light

#88AABB

Dark

Light

#98B7B1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c7e092;
  --color-2: #88aabb;
  --color-3: #98b7b1;
  --color-4: #a7c5a6;
  --color-5: #def482;
}

SCSS

$color-1: #c7e092;
$color-2: #88aabb;
$color-3: #98b7b1;
$color-4: #a7c5a6;
$color-5: #def482;

TAILWIND

colors: {
  'brand-1': '#c7e092',
  'brand-2': '#88aabb',
  'brand-3': '#98b7b1',
  'brand-4': '#a7c5a6',
  'brand-5': '#def482',
}

RGB Array

[199, 224, 146], [136, 170, 187], [152, 183, 177], [167, 197, 166], [222, 244, 130]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C7E092, #88AABB, #98B7B1, #A7C5A6, #DEF482 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: #c7e092; --color-2: #88aabb; --color-3: #98b7b1; --color-4: #a7c5a6; --color-5: #def482. 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