#8FC7A7 + #AFCF95 + #CAD980 + #DEC868 + #FAA973 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8FC7A7

Celadon · DarkSeaGreen · Apple Green

HEX

#8FC7A7

RGB

rgb(143, 199, 167)

HSL

hsl(146, 33%, 67%)

HSB

hsb(146, 28%, 78%)

CMYK

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

Oklch

oklch(78.2% 0.074 159.1)

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

#AFCF95

Celadon · DarkSeaGreen · Apple Green

HEX

#AFCF95

RGB

rgb(175, 207, 149)

HSL

hsl(93, 38%, 70%)

HSB

hsb(93, 28%, 81%)

CMYK

cmyk(15%, 0%, 28%, 19%)

Oklch

oklch(81.6% 0.086 131.6)

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

#CAD980

Willow Green · BurlyWood · Apple Green

HEX

#CAD980

RGB

rgb(202, 217, 128)

HSL

hsl(70, 54%, 68%)

HSB

hsb(70, 41%, 85%)

CMYK

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

Oklch

oklch(85.4% 0.115 116.7)

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

#DEC868

Ginger · BurlyWood · Sunflower

HEX

#DEC868

RGB

rgb(222, 200, 104)

HSL

hsl(49, 64%, 64%)

HSB

hsb(49, 53%, 87%)

CMYK

cmyk(0%, 10%, 53%, 13%)

Oklch

oklch(83.2% 0.119 96.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#FAA973

Apricot · LightSalmon · Warm Sun

HEX

#FAA973

RGB

rgb(250, 169, 115)

HSL

hsl(24, 93%, 72%)

HSB

hsb(24, 54%, 98%)

CMYK

cmyk(0%, 32%, 54%, 2%)

Oklch

oklch(80.2% 0.118 53.9)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8FC7A7

C78FAF

Analogous

93C78F

8FC7A7

8FC7C3

Triadic

8FC7A7

A78FC7

C7A78F

Split-Comp.

8FC7A7

C38FC7

C78F93

Tetradic

8FC7A7

8F93C7

C78FAF

C7C38F

Contrast Matrix WCAG 2.1 Contrast

8FC7A7	AFCF95	CAD980	DEC868	FAA973
—	1.1 Fail	1.3 Fail	1.2 Fail	1.0 Fail
1.1 Fail	—	1.1 Fail	1.0 Fail	1.1 Fail
1.3 Fail	1.1 Fail	—	1.1 Fail	1.3 Fail
1.2 Fail	1.0 Fail	1.1 Fail	—	1.1 Fail
1.0 Fail	1.1 Fail	1.3 Fail	1.1 Fail	—

White BG

1.9Fail

1.7Fail

1.5Fail

1.7Fail

1.9Fail

Black BG

10.9AAA

12.2AAA

13.7AAA

12.6AAA

11.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A8AF

BDBDA3

D0D196

D4D47F

D7D680

Deuteranopia

A4A0B1

BBB9A6

D0CE9B

D6D785

DCE283

Tritanopia

92B5B6

B1AEB1

CBA7AA

DD9296

F68A8D

Achromatopsia

B3B3B3

BFBFBF

CACACA

C4C4C4

BBBBBB

Shades & Tints Shades & Tints

#8FC7A7

Dark

Light

#AFCF95

Dark

Light

#CAD980

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8fc7a7;
  --color-2: #afcf95;
  --color-3: #cad980;
  --color-4: #dec868;
  --color-5: #faa973;
}

SCSS

$color-1: #8fc7a7;
$color-2: #afcf95;
$color-3: #cad980;
$color-4: #dec868;
$color-5: #faa973;

TAILWIND

colors: {
  'brand-1': '#8fc7a7',
  'brand-2': '#afcf95',
  'brand-3': '#cad980',
  'brand-4': '#dec868',
  'brand-5': '#faa973',
}

RGB Array

[143, 199, 167], [175, 207, 149], [202, 217, 128], [222, 200, 104], [250, 169, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8FC7A7, #AFCF95, #CAD980, #DEC868, #FAA973 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: #8fc7a7; --color-2: #afcf95; --color-3: #cad980; --color-4: #dec868; --color-5: #faa973. 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