#7CAF62 + #8FBF77 + #A4CF8E + #C3DFB5 + #DBEFD1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryClean

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#7CAF62

Celadon · DarkSeaGreen · Olive Green

HEX

#7CAF62

RGB

rgb(124, 175, 98)

HSL

hsl(100, 32%, 54%)

HSB

hsb(100, 44%, 69%)

CMYK

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

Oklch

oklch(69.9% 0.119 135.8)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#8FBF77

Celadon · DarkSeaGreen · Apple Green

HEX

#8FBF77

RGB

rgb(143, 191, 119)

HSL

hsl(100, 36%, 61%)

HSB

hsb(100, 38%, 75%)

CMYK

cmyk(25%, 0%, 38%, 25%)

Oklch

oklch(75.3% 0.111 135.7)

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

#A4CF8E

Celadon · DarkSeaGreen · Apple Green

HEX

#A4CF8E

RGB

rgb(164, 207, 142)

HSL

hsl(100, 40%, 68%)

HSB

hsb(100, 31%, 81%)

CMYK

cmyk(21%, 0%, 31%, 19%)

Oklch

oklch(80.8% 0.099 135.4)

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

#C3DFB5

Celadon · Silver · Apple Green

HEX

#C3DFB5

RGB

rgb(195, 223, 181)

HSL

hsl(100, 40%, 79%)

HSB

hsb(100, 19%, 87%)

CMYK

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

Oklch

oklch(87.2% 0.064 135.2)

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

#DBEFD1

Celadon · Beige · Mint Green

HEX

#DBEFD1

RGB

rgb(219, 239, 209)

HSL

hsl(100, 48%, 88%)

HSB

hsb(100, 13%, 94%)

CMYK

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

Oklch

oklch(92.9% 0.045 135.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7CAF62

9664AF

Analogous

A3AF64

7CAF62

64AF71

Triadic

7CAF62

647DAF

AF647D

Split-Comp.

7CAF62

7164AF

AF64A3

Tetradic

7CAF62

64A3AF

9664AF

AF7164

Contrast Matrix WCAG 2.1 Contrast

7CAF62	8FBF77	A4CF8E	C3DFB5	DBEFD1
—	1.2 Fail	1.5 Fail	1.8 Fail	2.1 Fail
1.2 Fail	—	1.2 Fail	1.5 Fail	1.7 Fail
1.5 Fail	1.2 Fail	—	1.2 Fail	1.5 Fail
1.8 Fail	1.5 Fail	1.2 Fail	—	1.2 Fail
2.1 Fail	1.7 Fail	1.5 Fail	1.2 Fail	—

White BG

2.6Fail

2.1Fail

1.8Fail

1.4Fail

1.2Fail

Black BG

8.2AAA

9.9AAA

11.9AAA

14.5AAA

17.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

929375

A4A488

B7B79E

CFCFBF

E4E4D8

Deuteranopia

8F8B79

A19D8D

B4B1A2

CECBC2

E3E1DA

Tritanopia

7F8387

919699

A6AAAD

C4C7C9

DCDEDF

Achromatopsia

979797

A8A8A8

BBBBBB

D2D2D2

E6E6E6

Shades & Tints Shades & Tints

#7CAF62

Dark

Light

#8FBF77

Dark

Light

#A4CF8E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7caf62;
  --color-2: #8fbf77;
  --color-3: #a4cf8e;
  --color-4: #c3dfb5;
  --color-5: #dbefd1;
}

SCSS

$color-1: #7caf62;
$color-2: #8fbf77;
$color-3: #a4cf8e;
$color-4: #c3dfb5;
$color-5: #dbefd1;

TAILWIND

colors: {
  'brand-1': '#7caf62',
  'brand-2': '#8fbf77',
  'brand-3': '#a4cf8e',
  'brand-4': '#c3dfb5',
  'brand-5': '#dbefd1',
}

RGB Array

[124, 175, 98], [143, 191, 119], [164, 207, 142], [195, 223, 181], [219, 239, 209]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7CAF62, #8FBF77, #A4CF8E, #C3DFB5, #DBEFD1 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: #7caf62; --color-2: #8fbf77; --color-3: #a4cf8e; --color-4: #c3dfb5; --color-5: #dbefd1. 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