#D8FFA4 + #C6E49F + #B2C697 + #979F8E + #746B83 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D8FFA4

Willow Green · Khaki · Mint Green

HEX

#D8FFA4

RGB

rgb(216, 255, 164)

HSL

hsl(86, 100%, 82%)

HSB

hsb(86, 36%, 100%)

CMYK

cmyk(15%, 0%, 36%, 0%)

Oklch

oklch(95.2% 0.123 127.4)

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

#C6E49F

Willow Green · Khaki · Apple Green

HEX

#C6E49F

RGB

rgb(198, 228, 159)

HSL

hsl(86, 56%, 76%)

HSB

hsb(86, 30%, 89%)

CMYK

cmyk(13%, 0%, 30%, 11%)

Oklch

oklch(88.0% 0.096 127.4)

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

#B2C697

Willow Green · DarkGray · Apple Green

HEX

#B2C697

RGB

rgb(178, 198, 151)

HSL

hsl(86, 29%, 68%)

HSB

hsb(86, 24%, 78%)

CMYK

cmyk(10%, 0%, 24%, 22%)

Oklch

oklch(79.9% 0.068 126.6)

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

#979F8E

Grass Green · DarkSeaGreen · Silver Sand

HEX

#979F8E

RGB

rgb(151, 159, 142)

HSL

hsl(88, 8%, 59%)

HSB

hsb(88, 11%, 62%)

CMYK

cmyk(5%, 0%, 11%, 38%)

Oklch

oklch(69.1% 0.026 127.7)

Traditional「Grass Green」· Paint「Silver Sand」· Creative Urban Concrete

#746B83

Deep Indigo · Gray · Violet

HEX

#746B83

RGB

rgb(116, 107, 131)

HSL

hsl(263, 10%, 47%)

HSB

hsb(263, 18%, 51%)

CMYK

cmyk(11%, 18%, 0%, 49%)

Oklch

oklch(54.5% 0.038 302.2)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8FFA4

CBA3FF

Analogous

FFF9A3

D8FFA4

A9FFA3

Triadic

D8FFA4

A3D7FF

FFA3D7

Split-Comp.

D8FFA4

A3A9FF

F9A3FF

Tetradic

D8FFA4

A3FFF9

CBA3FF

FFA3A9

Contrast Matrix WCAG 2.1 Contrast

D8FFA4	C6E49F	B2C697	979F8E	746B83
—	1.3 Fail	1.6 Fail	2.4 Fail	4.5 AA Large
1.3 Fail	—	1.3 Fail	2.0 Fail	3.6 AA Large
1.6 Fail	1.3 Fail	—	1.5 Fail	2.7 Fail
2.4 Fail	2.0 Fail	1.5 Fail	—	1.8 Fail
4.5 AA Large	3.6 AA Large	2.7 Fail	1.8 Fail	—

White BG

1.1Fail

1.4Fail

1.8Fail

2.7Fail

5.0AA

Black BG

18.8AAA

15.0AAA

11.4AAA

7.7AAA

4.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E9E9BA

D3D3B0

BBBBA2

9A9B92

70707D

Deuteranopia

E7E4BF

D1CFB4

BAB8A5

9A9993

71717C

Tritanopia

DACBCF

C8BDC0

B3ABAD

979596

747978

Achromatopsia

E9E9E9

D3D3D3

BBBBBB

9B9B9B

707070

Shades & Tints Shades & Tints

#D8FFA4

Dark

Light

#C6E49F

Dark

Light

#B2C697

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8ffa4;
  --color-2: #c6e49f;
  --color-3: #b2c697;
  --color-4: #979f8e;
  --color-5: #746b83;
}

SCSS

$color-1: #d8ffa4;
$color-2: #c6e49f;
$color-3: #b2c697;
$color-4: #979f8e;
$color-5: #746b83;

TAILWIND

colors: {
  'brand-1': '#d8ffa4',
  'brand-2': '#c6e49f',
  'brand-3': '#b2c697',
  'brand-4': '#979f8e',
  'brand-5': '#746b83',
}

RGB Array

[216, 255, 164], [198, 228, 159], [178, 198, 151], [151, 159, 142], [116, 107, 131]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D8FFA4, #C6E49F, #B2C697, #979F8E, #746B83 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: #d8ffa4; --color-2: #c6e49f; --color-3: #b2c697; --color-4: #979f8e; --color-5: #746b83. 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