#6EB981 + #F7F499 + #6BA077 + #F5FBD5 + #A4D295 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#6EB981

Celadon · DarkSeaGreen · Olive Green

HEX

#6EB981

RGB

rgb(110, 185, 129)

HSL

hsl(135, 35%, 58%)

HSB

hsb(135, 41%, 73%)

CMYK

cmyk(41%, 0%, 30%, 27%)

Oklch

oklch(72.2% 0.111 150.9)

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

#F7F499

Fresh Green · Khaki · Lemon Cream

HEX

#F7F499

RGB

rgb(247, 244, 153)

HSL

hsl(58, 85%, 78%)

HSB

hsb(58, 38%, 97%)

CMYK

cmyk(0%, 1%, 38%, 3%)

Oklch

oklch(95.0% 0.113 106.7)

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

#6BA077

Celadon · Gray · Olive Green

HEX

#6BA077

RGB

rgb(107, 160, 119)

HSL

hsl(134, 22%, 52%)

HSB

hsb(134, 33%, 63%)

CMYK

cmyk(33%, 0%, 26%, 37%)

Oklch

oklch(65.7% 0.083 150.7)

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

#F5FBD5

Fresh Green · Beige · Lemon Cream

HEX

#F5FBD5

RGB

rgb(245, 251, 213)

HSL

hsl(69, 83%, 91%)

HSB

hsb(69, 15%, 98%)

CMYK

cmyk(2%, 0%, 15%, 2%)

Oklch

oklch(97.4% 0.050 114.6)

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

#A4D295

Celadon · DarkSeaGreen · Apple Green

HEX

#A4D295

RGB

rgb(164, 210, 149)

HSL

hsl(105, 40%, 70%)

HSB

hsb(105, 29%, 82%)

CMYK

cmyk(22%, 0%, 29%, 18%)

Oklch

oklch(81.6% 0.096 138.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6EB981

B96EA7

Analogous

81B96E

6EB981

6EB9A7

Triadic

6EB981

816EB9

B9816E

Split-Comp.

6EB981

A76EB9

B96E81

Tetradic

6EB981

6E81B9

B96EA7

B9A76E

Contrast Matrix WCAG 2.1 Contrast

6EB981	F7F499	6BA077	F5FBD5	A4D295
—	2.1 Fail	1.3 Fail	2.2 Fail	1.4 Fail
2.1 Fail	—	2.7 Fail	1.1 Fail	1.5 Fail
1.3 Fail	2.7 Fail	—	2.8 Fail	1.8 Fail
2.2 Fail	1.1 Fail	2.8 Fail	—	1.6 Fail
1.4 Fail	1.5 Fail	1.8 Fail	1.6 Fail	—

White BG

2.4Fail

1.1Fail

3.0AA Large

1.1Fail

1.7Fail

Black BG

8.9AAA

18.4AAA

6.9AA

19.6AAA

12.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8F8F

F6F6AF

828281

F8F8DE

B8B8A4

Deuteranopia

8A8592

F6F6B4

7F7B83

F7F7E0

B5B2A7

Tritanopia

72999C

F7C0C4

6E898A

F5E5E7

A6AFB2

Achromatopsia

9C9C9C

EBEBEB

8B8B8B

F5F5F5

BDBDBD

Shades & Tints Shades & Tints

#6EB981

Dark

Light

#F7F499

Dark

Light

#6BA077

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6eb981;
  --color-2: #f7f499;
  --color-3: #6ba077;
  --color-4: #f5fbd5;
  --color-5: #a4d295;
}

SCSS

$color-1: #6eb981;
$color-2: #f7f499;
$color-3: #6ba077;
$color-4: #f5fbd5;
$color-5: #a4d295;

TAILWIND

colors: {
  'brand-1': '#6eb981',
  'brand-2': '#f7f499',
  'brand-3': '#6ba077',
  'brand-4': '#f5fbd5',
  'brand-5': '#a4d295',
}

RGB Array

[110, 185, 129], [247, 244, 153], [107, 160, 119], [245, 251, 213], [164, 210, 149]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #6EB981, #F7F499, #6BA077, #F5FBD5, #A4D295 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: #6eb981; --color-2: #f7f499; --color-3: #6ba077; --color-4: #f5fbd5; --color-5: #a4d295. 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