#52B385 + #7FC674 + #ABD967 + #C5D491 + #DB4B4D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#52B385

Mineral Blue · MediumSeaGreen · Olive Green

HEX

#52B385

RGB

rgb(82, 179, 133)

HSL

hsl(152, 39%, 51%)

HSB

hsb(152, 54%, 70%)

CMYK

cmyk(54%, 0%, 26%, 30%)

Oklch

oklch(69.6% 0.115 160.6)

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

#7FC674

Celadon · DarkSeaGreen · Apple Green

HEX

#7FC674

RGB

rgb(127, 198, 116)

HSL

hsl(112, 42%, 62%)

HSB

hsb(112, 41%, 78%)

CMYK

cmyk(36%, 0%, 41%, 22%)

Oklch

oklch(76.0% 0.134 141.1)

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

#ABD967

Willow Green · LightGreen · Apple Green

HEX

#ABD967

RGB

rgb(171, 217, 103)

HSL

hsl(84, 60%, 63%)

HSB

hsb(84, 53%, 85%)

CMYK

cmyk(21%, 0%, 53%, 15%)

Oklch

oklch(82.9% 0.152 127.6)

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

#C5D491

Willow Green · Tan · Apple Green

HEX

#C5D491

RGB

rgb(197, 212, 145)

HSL

hsl(73, 44%, 70%)

HSB

hsb(73, 32%, 83%)

CMYK

cmyk(7%, 0%, 32%, 17%)

Oklch

oklch(84.2% 0.090 118.6)

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

#DB4B4D

Vermilion · Tomato · Passion Red

HEX

#DB4B4D

RGB

rgb(219, 75, 77)

HSL

hsl(359, 67%, 58%)

HSB

hsb(359, 66%, 86%)

CMYK

cmyk(0%, 66%, 65%, 14%)

Oklch

oklch(61.3% 0.180 23.4)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

52B385

B3517F

Analogous

51B355

52B385

51B0B3

Triadic

52B385

8551B3

B38551

Split-Comp.

52B385

B351B0

B35551

Tetradic

52B385

5551B3

B3517F

B0B351

Contrast Matrix WCAG 2.1 Contrast

52B385	7FC674	ABD967	C5D491	DB4B4D
—	1.3 Fail	1.6 Fail	1.6 Fail	1.6 Fail
1.3 Fail	—	1.3 Fail	1.3 Fail	2.0 Fail
1.6 Fail	1.3 Fail	—	1.0 Fail	2.5 Fail
1.6 Fail	1.3 Fail	1.0 Fail	—	2.6 Fail
1.6 Fail	2.0 Fail	2.5 Fail	2.6 Fail	—

White BG

2.6Fail

2.1Fail

1.6Fail

4.1AA Large

Black BG

8.1AAA

10.2AAA

12.9AAA

13.2AAA

5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7C7D90

9E9E88

BFBF83

CBCCA1

9D9B4D

Deuteranopia

766F93

9A948D

BCB989

CBC9A5

A5B04C

Tritanopia

57999B

83989B

AD989D

C6AEB1

D44C4C

Achromatopsia

919191

A7A7A7

BEBEBE

C8C8C8

767676

Shades & Tints Shades & Tints

#52B385

Dark

Light

#7FC674

Dark

Light

#ABD967

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #52b385;
  --color-2: #7fc674;
  --color-3: #abd967;
  --color-4: #c5d491;
  --color-5: #db4b4d;
}

SCSS

$color-1: #52b385;
$color-2: #7fc674;
$color-3: #abd967;
$color-4: #c5d491;
$color-5: #db4b4d;

TAILWIND

colors: {
  'brand-1': '#52b385',
  'brand-2': '#7fc674',
  'brand-3': '#abd967',
  'brand-4': '#c5d491',
  'brand-5': '#db4b4d',
}

RGB Array

[82, 179, 133], [127, 198, 116], [171, 217, 103], [197, 212, 145], [219, 75, 77]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #52B385, #7FC674, #ABD967, #C5D491, #DB4B4D 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: #52b385; --color-2: #7fc674; --color-3: #abd967; --color-4: #c5d491; --color-5: #db4b4d. 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