#77D147 + #61B89B + #A281B8 + #D950C9 + #FC269F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#77D147

Emerald · LimeGreen · Olive Green

HEX

#77D147

RGB

rgb(119, 209, 71)

HSL

hsl(99, 60%, 55%)

HSB

hsb(99, 66%, 82%)

CMYK

cmyk(43%, 0%, 66%, 18%)

Oklch

oklch(77.7% 0.193 136.6)

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

#61B89B

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#61B89B

RGB

rgb(97, 184, 155)

HSL

hsl(160, 38%, 55%)

HSB

hsb(160, 47%, 72%)

CMYK

cmyk(47%, 0%, 16%, 28%)

Oklch

oklch(72.0% 0.095 169.7)

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

#A281B8

Lilac · DarkGray · Lilac Purple

HEX

#A281B8

RGB

rgb(162, 129, 184)

HSL

hsl(276, 28%, 61%)

HSB

hsb(276, 30%, 72%)

CMYK

cmyk(12%, 30%, 0%, 28%)

Oklch

oklch(65.4% 0.088 311.3)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#D950C9

Rose Purple · MediumOrchid · Violet

HEX

#D950C9

RGB

rgb(217, 80, 201)

HSL

hsl(307, 64%, 58%)

HSB

hsb(307, 63%, 85%)

CMYK

cmyk(0%, 63%, 7%, 15%)

Oklch

oklch(65.6% 0.217 332.7)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#FC269F

Rose Purple · DeepPink · Rose Pink

HEX

#FC269F

RGB

rgb(252, 38, 159)

HSL

hsl(326, 97%, 57%)

HSB

hsb(326, 85%, 99%)

CMYK

cmyk(0%, 85%, 37%, 1%)

Oklch

oklch(66.0% 0.256 353.2)

Traditional「Rose Purple」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

77D147

A147D1

Analogous

BCD147

77D147

47D15C

Triadic

77D147

4778D1

D14778

Split-Comp.

77D147

5C47D1

D147BC

Tetradic

77D147

47BCD1

A147D1

D15C47

Contrast Matrix WCAG 2.1 Contrast

77D147	61B89B	A281B8	D950C9	FC269F
—	1.2 Fail	1.7 Fail	1.9 Fail	1.9 Fail
1.2 Fail	—	1.4 Fail	1.5 Fail	1.5 Fail
1.7 Fail	1.4 Fail	—	1.1 Fail	1.1 Fail
1.9 Fail	1.5 Fail	1.1 Fail	—	1.0 Fail
1.9 Fail	1.5 Fail	1.1 Fail	1.0 Fail	—

White BG

1.9Fail

2.4Fail

3.3AA Large

3.5AA Large

Black BG

11.0AAA

8.8AAA

6.4AA

5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9E9F68

8787A2

9493AB

9E9CAC

9F9D82

Deuteranopia

999270

827BA4

9698A7

A6B0A5

ACBC7B

Tritanopia

7C8389

65A8A9

A0A09E

D29590

F16B66

Achromatopsia

A6A6A6

9B9B9B

919191

878787

747474

Shades & Tints Shades & Tints

#77D147

Dark

Light

#61B89B

Dark

Light

#A281B8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #77d147;
  --color-2: #61b89b;
  --color-3: #a281b8;
  --color-4: #d950c9;
  --color-5: #fc269f;
}

SCSS

$color-1: #77d147;
$color-2: #61b89b;
$color-3: #a281b8;
$color-4: #d950c9;
$color-5: #fc269f;

TAILWIND

colors: {
  'brand-1': '#77d147',
  'brand-2': '#61b89b',
  'brand-3': '#a281b8',
  'brand-4': '#d950c9',
  'brand-5': '#fc269f',
}

RGB Array

[119, 209, 71], [97, 184, 155], [162, 129, 184], [217, 80, 201], [252, 38, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #77D147, #61B89B, #A281B8, #D950C9, #FC269F 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: #77d147; --color-2: #61b89b; --color-3: #a281b8; --color-4: #d950c9; --color-5: #fc269f. 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