#8FAAA2 + #98AF64 + #A2B339 + #ABB701 + #FC1E80 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#8FAAA2

Jade · DarkSeaGreen · Lake Green

HEX

#8FAAA2

RGB

rgb(143, 170, 162)

HSL

hsl(162, 14%, 61%)

HSB

hsb(162, 16%, 67%)

CMYK

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

Oklch

oklch(71.5% 0.032 175.5)

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

#98AF64

Grass Green · DarkSeaGreen · Olive Green

HEX

#98AF64

RGB

rgb(152, 175, 100)

HSL

hsl(78, 32%, 54%)

HSB

hsb(78, 43%, 69%)

CMYK

cmyk(13%, 0%, 43%, 31%)

Oklch

oklch(71.9% 0.104 122.9)

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

#A2B339

Autumn Sage · GoldenRod · Honey Gold

HEX

#A2B339

RGB

rgb(162, 179, 57)

HSL

hsl(68, 52%, 46%)

HSB

hsb(68, 68%, 70%)

CMYK

cmyk(9%, 0%, 68%, 30%)

Oklch

oklch(73.1% 0.145 117.0)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#ABB701

Autumn Sage · DarkGoldenRod · Honey Gold

HEX

#ABB701

RGB

rgb(171, 183, 1)

HSL

hsl(64, 99%, 36%)

HSB

hsb(64, 99%, 72%)

CMYK

cmyk(7%, 0%, 99%, 28%)

Oklch

oklch(74.5% 0.168 114.4)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#FC1E80

Dark Violet · DeepPink · Rose Pink

HEX

#FC1E80

RGB

rgb(252, 30, 128)

HSL

hsl(334, 97%, 55%)

HSB

hsb(334, 88%, 99%)

CMYK

cmyk(0%, 88%, 49%, 1%)

Oklch

oklch(64.7% 0.249 2.8)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8FAAA2

A98E96

Analogous

8EA993

8FAAA2

8EA4A9

Triadic

8FAAA2

A18EA9

A9A18E

Split-Comp.

8FAAA2

A98EA4

A9938E

Tetradic

8FAAA2

938EA9

A98E96

A4A98E

Contrast Matrix WCAG 2.1 Contrast

8FAAA2	98AF64	A2B339	ABB701	FC1E80
—	1.0 Fail	1.1 Fail	1.1 Fail	1.5 Fail
1.0 Fail	—	1.0 Fail	1.1 Fail	1.5 Fail
1.1 Fail	1.0 Fail	—	1.1 Fail	1.6 Fail
1.1 Fail	1.1 Fail	1.1 Fail	—	1.7 Fail
1.5 Fail	1.5 Fail	1.6 Fail	1.7 Fail	—

White BG

2.5Fail

2.4Fail

2.3Fail

2.2Fail

3.7AA Large

Black BG

8.4AAA

8.7AAA

9.0AAA

9.5AAA

5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9B9BA4

A2A276

A9AA57

B0B02D

9C9A68

Deuteranopia

9997A4

A19F7B

A8A75E

B0AF38

A9B963

Tritanopia

90A5A6

998488

A36E73

AC5057

F15651

Achromatopsia

A1A1A1

A0A0A0

9F9F9F

6C6C6C

Shades & Tints Shades & Tints

#8FAAA2

Dark

Light

#98AF64

Dark

Light

#A2B339

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8faaa2;
  --color-2: #98af64;
  --color-3: #a2b339;
  --color-4: #abb701;
  --color-5: #fc1e80;
}

SCSS

$color-1: #8faaa2;
$color-2: #98af64;
$color-3: #a2b339;
$color-4: #abb701;
$color-5: #fc1e80;

TAILWIND

colors: {
  'brand-1': '#8faaa2',
  'brand-2': '#98af64',
  'brand-3': '#a2b339',
  'brand-4': '#abb701',
  'brand-5': '#fc1e80',
}

RGB Array

[143, 170, 162], [152, 175, 100], [162, 179, 57], [171, 183, 1], [252, 30, 128]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8FAAA2, #98AF64, #A2B339, #ABB701, #FC1E80 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: #8faaa2; --color-2: #98af64; --color-3: #a2b339; --color-4: #abb701; --color-5: #fc1e80. 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