#709581 + #8FBFA6 + #A6DEC0 + #C3FFBF + #EFFFD1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryClean

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#709581

Celadon · SlateGray · Olive Green

HEX

#709581

RGB

rgb(112, 149, 129)

HSL

hsl(148, 15%, 51%)

HSB

hsb(148, 25%, 58%)

CMYK

cmyk(25%, 0%, 13%, 42%)

Oklch

oklch(63.6% 0.051 160.9)

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

#8FBFA6

Celadon · DarkSeaGreen · Apple Green

HEX

#8FBFA6

RGB

rgb(143, 191, 166)

HSL

hsl(149, 27%, 65%)

HSB

hsb(149, 25%, 75%)

CMYK

cmyk(25%, 0%, 13%, 25%)

Oklch

oklch(76.3% 0.062 161.8)

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

#A6DEC0

Celadon · LightBlue · Apple Green

HEX

#A6DEC0

RGB

rgb(166, 222, 192)

HSL

hsl(148, 46%, 76%)

HSB

hsb(148, 25%, 87%)

CMYK

cmyk(25%, 0%, 14%, 13%)

Oklch

oklch(85.4% 0.071 161.0)

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

#C3FFBF

Emerald · LightGray · Mint Green

HEX

#C3FFBF

RGB

rgb(195, 255, 191)

HSL

hsl(116, 100%, 87%)

HSB

hsb(116, 25%, 100%)

CMYK

cmyk(24%, 0%, 25%, 0%)

Oklch

oklch(94.3% 0.104 143.1)

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

#EFFFD1

Willow Green · Beige · Mint Green

HEX

#EFFFD1

RGB

rgb(239, 255, 209)

HSL

hsl(81, 100%, 91%)

HSB

hsb(81, 18%, 100%)

CMYK

cmyk(6%, 0%, 18%, 0%)

Oklch

oklch(97.7% 0.062 123.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

709581

956F83

Analogous

71956F

709581

6F9594

Triadic

709581

816F95

95816F

Split-Comp.

709581

946F95

956F71

Tetradic

709581

6F7195

956F83

95946F

Contrast Matrix WCAG 2.1 Contrast

709581	8FBFA6	A6DEC0	C3FFBF	EFFFD1
—	1.6 Fail	2.2 Fail	2.9 Fail	3.2 AA Large
1.6 Fail	—	1.4 Fail	1.8 Fail	2.0 Fail
2.2 Fail	1.4 Fail	—	1.3 Fail	1.4 Fail
2.9 Fail	1.8 Fail	1.3 Fail	—	1.1 Fail
3.2 AA Large	2.0 Fail	1.4 Fail	1.1 Fail	—

White BG

3.3AA Large

2.1Fail

1.5Fail

1.1Fail

Black BG

6.3AA

10.2AAA

13.8AAA

18.4AAA

19.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

808086

A4A4AC

BEBFC7

DDDECE

F6F6DC

Deuteranopia

7E7B87

A19DAE

BBB7C9

DAD5D2

F5F4DF

Tritanopia

728A8B

91B1B2

A9CDCE

C6DBDD

F0E5E7

Achromatopsia

888888

AEAEAE

CACACA

E6E6E6

F5F5F5

Shades & Tints Shades & Tints

#709581

Dark

Light

#8FBFA6

Dark

Light

#A6DEC0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #709581;
  --color-2: #8fbfa6;
  --color-3: #a6dec0;
  --color-4: #c3ffbf;
  --color-5: #efffd1;
}

SCSS

$color-1: #709581;
$color-2: #8fbfa6;
$color-3: #a6dec0;
$color-4: #c3ffbf;
$color-5: #efffd1;

TAILWIND

colors: {
  'brand-1': '#709581',
  'brand-2': '#8fbfa6',
  'brand-3': '#a6dec0',
  'brand-4': '#c3ffbf',
  'brand-5': '#efffd1',
}

RGB Array

[112, 149, 129], [143, 191, 166], [166, 222, 192], [195, 255, 191], [239, 255, 209]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #709581, #8FBFA6, #A6DEC0, #C3FFBF, #EFFFD1 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: #709581; --color-2: #8fbfa6; --color-3: #a6dec0; --color-4: #c3ffbf; --color-5: #efffd1. 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