#A7CD2C + #C6CF72 + #E4D0B7 + #B4E2D1 + #84F3EB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A7CD2C

Grass Green · GreenYellow · Olive Green

HEX

#A7CD2C

RGB

rgb(167, 205, 44)

HSL

hsl(74, 65%, 49%)

HSB

hsb(74, 79%, 80%)

CMYK

cmyk(19%, 0%, 79%, 20%)

Oklch

oklch(79.3% 0.181 122.7)

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

#C6CF72

Fresh Green · BurlyWood · Sunflower

HEX

#C6CF72

RGB

rgb(198, 207, 114)

HSL

hsl(66, 49%, 63%)

HSB

hsb(66, 45%, 81%)

CMYK

cmyk(4%, 0%, 45%, 19%)

Oklch

oklch(82.7% 0.118 113.5)

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

#E4D0B7

Goose Yellow · Wheat · Peach Orange

HEX

#E4D0B7

RGB

rgb(228, 208, 183)

HSL

hsl(33, 45%, 81%)

HSB

hsb(33, 20%, 89%)

CMYK

cmyk(0%, 9%, 20%, 11%)

Oklch

oklch(86.8% 0.040 73.4)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#B4E2D1

Jade · LightBlue · Apple Green

HEX

#B4E2D1

RGB

rgb(180, 226, 209)

HSL

hsl(158, 44%, 80%)

HSB

hsb(158, 20%, 89%)

CMYK

cmyk(20%, 0%, 8%, 11%)

Oklch

oklch(87.6% 0.053 170.5)

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

#84F3EB

Jade · SkyBlue · Lake Green

HEX

#84F3EB

RGB

rgb(132, 243, 235)

HSL

hsl(176, 82%, 74%)

HSB

hsb(176, 46%, 95%)

CMYK

cmyk(46%, 0%, 3%, 5%)

Oklch

oklch(89.6% 0.103 189.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A7CD2C

522CCE

Analogous

CEA32C

A7CD2C

57CE2C

Triadic

A7CD2C

2CA8CE

CE2CA8

Split-Comp.

A7CD2C

2C57CE

A32CCE

Tetradic

A7CD2C

2CCEA3

522CCE

CE2C57

Contrast Matrix WCAG 2.1 Contrast

A7CD2C	C6CF72	E4D0B7	B4E2D1	84F3EB
—	1.1 Fail	1.2 Fail	1.3 Fail	1.4 Fail
1.1 Fail	—	1.1 Fail	1.2 Fail	1.3 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.1 Fail
1.3 Fail	1.2 Fail	1.1 Fail	—	1.1 Fail
1.4 Fail	1.3 Fail	1.1 Fail	1.1 Fail	—

White BG

1.8Fail

1.7Fail

1.5Fail

1.4Fail

1.3Fail

Black BG

11.4AAA

12.6AAA

14.0AAA

14.7AAA

16.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B7B853

CACA89

DBDBBD

C8C8D5

B4B5ED

Deuteranopia

B5B25C

C9C98E

DDDEBF

C5C2D6

AEA5ED

Tritanopia

A97278

C69A9E

E3C2C3

B6D8D9

8AEEEF

Achromatopsia

AFAFAF

C2C2C2

D3D3D3

D2D2D2

D1D1D1

Shades & Tints Shades & Tints

#A7CD2C

Dark

Light

#C6CF72

Dark

Light

#E4D0B7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a7cd2c;
  --color-2: #c6cf72;
  --color-3: #e4d0b7;
  --color-4: #b4e2d1;
  --color-5: #84f3eb;
}

SCSS

$color-1: #a7cd2c;
$color-2: #c6cf72;
$color-3: #e4d0b7;
$color-4: #b4e2d1;
$color-5: #84f3eb;

TAILWIND

colors: {
  'brand-1': '#a7cd2c',
  'brand-2': '#c6cf72',
  'brand-3': '#e4d0b7',
  'brand-4': '#b4e2d1',
  'brand-5': '#84f3eb',
}

RGB Array

[167, 205, 44], [198, 207, 114], [228, 208, 183], [180, 226, 209], [132, 243, 235]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A7CD2C, #C6CF72, #E4D0B7, #B4E2D1, #84F3EB 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: #a7cd2c; --color-2: #c6cf72; --color-3: #e4d0b7; --color-4: #b4e2d1; --color-5: #84f3eb. 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