#DFF7AB + #B5D783 + #98A770 + #56A381 + #7A8171 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#DFF7AB

Willow Green · Wheat · Mint Green

HEX

#DFF7AB

RGB

rgb(223, 247, 171)

HSL

hsl(79, 83%, 82%)

HSB

hsb(79, 31%, 97%)

CMYK

cmyk(10%, 0%, 31%, 3%)

Oklch

oklch(94.1% 0.101 122.6)

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

#B5D783

Willow Green · LightGreen · Apple Green

HEX

#B5D783

RGB

rgb(181, 215, 131)

HSL

hsl(84, 51%, 68%)

HSB

hsb(84, 39%, 84%)

CMYK

cmyk(16%, 0%, 39%, 16%)

Oklch

oklch(83.5% 0.116 126.7)

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

#98A770

Grass Green · DarkSeaGreen · Olive Green

HEX

#98A770

RGB

rgb(152, 167, 112)

HSL

hsl(76, 24%, 55%)

HSB

hsb(76, 33%, 65%)

CMYK

cmyk(9%, 0%, 33%, 35%)

Oklch

oklch(70.3% 0.078 120.8)

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

#56A381

Mineral Blue · CadetBlue · Olive Green

HEX

#56A381

RGB

rgb(86, 163, 129)

HSL

hsl(154, 31%, 49%)

HSB

hsb(154, 47%, 64%)

CMYK

cmyk(47%, 0%, 21%, 36%)

Oklch

oklch(65.6% 0.093 163.3)

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

#7A8171

Ink Gray · Gray · Warm Gray

HEX

#7A8171

RGB

rgb(122, 129, 113)

HSL

hsl(86, 7%, 47%)

HSB

hsb(86, 12%, 51%)

CMYK

cmyk(5%, 0%, 12%, 49%)

Oklch

oklch(59.3% 0.025 126.5)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DFF7AB

C3ABF7

Analogous

F7E9AB

DFF7AB

B9F7AB

Triadic

DFF7AB

ABDFF7

F7ABDF

Split-Comp.

DFF7AB

ABB9F7

E9ABF7

Tetradic

DFF7AB

ABF7E9

C3ABF7

F7ABB9

Contrast Matrix WCAG 2.1 Contrast

DFF7AB	B5D783	98A770	56A381	7A8171
—	1.4 Fail	2.2 Fail	2.6 Fail	3.5 AA Large
1.4 Fail	—	1.6 Fail	1.9 Fail	2.5 Fail
2.2 Fail	1.6 Fail	—	1.2 Fail	1.6 Fail
2.6 Fail	1.9 Fail	1.2 Fail	—	1.3 Fail
3.5 AA Large	2.5 Fail	1.6 Fail	1.3 Fail	—

White BG

1.2Fail

1.6Fail

2.6Fail

3.0AA Large

4.0AA Large

Black BG

18.0AAA

13.0AAA

8.1AAA

7.0AA

5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E9EABD

C4C497

9E9F7D

777889

7D7D75

Deuteranopia

E8E6C2

C2BF9C

9E9D81

736D8B

7D7C76

Tritanopia

E0CCCF

B7A7AB

99888A

5A9091

7A7879

Achromatopsia

E7E7E7

C3C3C3

9C9C9C

888888

7D7D7D

Shades & Tints Shades & Tints

#DFF7AB

Dark

Light

#B5D783

Dark

Light

#98A770

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dff7ab;
  --color-2: #b5d783;
  --color-3: #98a770;
  --color-4: #56a381;
  --color-5: #7a8171;
}

SCSS

$color-1: #dff7ab;
$color-2: #b5d783;
$color-3: #98a770;
$color-4: #56a381;
$color-5: #7a8171;

TAILWIND

colors: {
  'brand-1': '#dff7ab',
  'brand-2': '#b5d783',
  'brand-3': '#98a770',
  'brand-4': '#56a381',
  'brand-5': '#7a8171',
}

RGB Array

[223, 247, 171], [181, 215, 131], [152, 167, 112], [86, 163, 129], [122, 129, 113]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DFF7AB, #B5D783, #98A770, #56A381, #7A8171 is ideal for: corporate websites, product showcases, portfolios. 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: #dff7ab; --color-2: #b5d783; --color-3: #98a770; --color-4: #56a381; --color-5: #7a8171. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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