#4F7663 + #78B173 + #AFE999 + #A0D656 + #557C58 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#4F7663

Mineral Blue · DimGray · Forest Green

HEX

#4F7663

RGB

rgb(79, 118, 99)

HSL

hsl(151, 20%, 39%)

HSB

hsb(151, 33%, 46%)

CMYK

cmyk(33%, 0%, 16%, 54%)

Oklch

oklch(53.1% 0.053 162.8)

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

#78B173

Celadon · DarkSeaGreen · Olive Green

HEX

#78B173

RGB

rgb(120, 177, 115)

HSL

hsl(115, 28%, 57%)

HSB

hsb(115, 35%, 69%)

CMYK

cmyk(32%, 0%, 35%, 31%)

Oklch

oklch(70.5% 0.107 142.5)

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

#AFE999

Emerald · LightGreen · Apple Green

HEX

#AFE999

RGB

rgb(175, 233, 153)

HSL

hsl(103, 65%, 76%)

HSB

hsb(103, 34%, 91%)

CMYK

cmyk(25%, 0%, 34%, 9%)

Oklch

oklch(87.5% 0.122 137.4)

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

#A0D656

Grass Green · GreenYellow · Olive Green

HEX

#A0D656

RGB

rgb(160, 214, 86)

HSL

hsl(85, 61%, 59%)

HSB

hsb(85, 60%, 84%)

CMYK

cmyk(25%, 0%, 60%, 16%)

Oklch

oklch(81.3% 0.168 128.9)

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

#557C58

Celadon · DimGray · Olive Green

HEX

#557C58

RGB

rgb(85, 124, 88)

HSL

hsl(125, 19%, 41%)

HSB

hsb(125, 31%, 49%)

CMYK

cmyk(31%, 0%, 29%, 51%)

Oklch

oklch(54.7% 0.071 146.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4F7663

775063

Analogous

507750

4F7663

507777

Triadic

4F7663

645077

776450

Split-Comp.

4F7663

775077

775050

Tetradic

4F7663

505077

775063

777750

Contrast Matrix WCAG 2.1 Contrast

4F7663	78B173	AFE999	A0D656	557C58
—	2.0 Fail	3.6 AA Large	3.0 Fail	1.1 Fail
2.0 Fail	—	1.8 Fail	1.5 Fail	1.9 Fail
3.6 AA Large	1.8 Fail	—	1.2 Fail	3.4 AA Large
3.0 Fail	1.5 Fail	1.2 Fail	—	2.8 Fail
1.1 Fail	1.9 Fail	3.4 AA Large	2.8 Fail	—

White BG

5.1AA

2.5Fail

1.4Fail

1.7Fail

4.8AA

Black BG

4.1AA Large

8.3AAA

14.9AAA

12.2AAA

4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

606068

919182

C8C9AC

B7B875

666661

Deuteranopia

5E5B69

8D8986

C5C0B1

B4B07C

646163

Tritanopia

516B6C

7B8E90

B2BCBF

A38D93

576869

Achromatopsia

686868

999999

CFCFCF

B7B7B7

6C6C6C

Shades & Tints Shades & Tints

#4F7663

Dark

Light

#78B173

Dark

Light

#AFE999

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4f7663;
  --color-2: #78b173;
  --color-3: #afe999;
  --color-4: #a0d656;
  --color-5: #557c58;
}

SCSS

$color-1: #4f7663;
$color-2: #78b173;
$color-3: #afe999;
$color-4: #a0d656;
$color-5: #557c58;

TAILWIND

colors: {
  'brand-1': '#4f7663',
  'brand-2': '#78b173',
  'brand-3': '#afe999',
  'brand-4': '#a0d656',
  'brand-5': '#557c58',
}

RGB Array

[79, 118, 99], [120, 177, 115], [175, 233, 153], [160, 214, 86], [85, 124, 88]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4F7663, #78B173, #AFE999, #A0D656, #557C58 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: #4f7663; --color-2: #78b173; --color-3: #afe999; --color-4: #a0d656; --color-5: #557c58. 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