#807070 + #9A8FC8 + #8DBDEB + #A5E6C8 + #D9F5B5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#807070

Ink Gray · Gray · Warm Gray

HEX

#807070

RGB

rgb(128, 112, 112)

HSL

hsl(0, 7%, 47%)

HSB

hsb(0, 13%, 50%)

CMYK

cmyk(0%, 13%, 13%, 50%)

Oklch

oklch(56.0% 0.020 17.8)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#9A8FC8

Wisteria · DarkGray · Cobalt Blue

HEX

#9A8FC8

RGB

rgb(154, 143, 200)

HSL

hsl(252, 34%, 67%)

HSB

hsb(252, 28%, 78%)

CMYK

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

Oklch

oklch(68.1% 0.084 292.9)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#8DBDEB

Sky Blue · SkyBlue · Cobalt Blue

HEX

#8DBDEB

RGB

rgb(141, 189, 235)

HSL

hsl(209, 70%, 74%)

HSB

hsb(209, 40%, 92%)

CMYK

cmyk(40%, 20%, 0%, 8%)

Oklch

oklch(78.1% 0.083 247.9)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#A5E6C8

Jade · LightBlue · Apple Green

HEX

#A5E6C8

RGB

rgb(165, 230, 200)

HSL

hsl(152, 57%, 77%)

HSB

hsb(152, 28%, 90%)

CMYK

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

Oklch

oklch(87.3% 0.078 164.4)

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

#D9F5B5

Willow Green · Wheat · Mint Green

HEX

#D9F5B5

RGB

rgb(217, 245, 181)

HSL

hsl(86, 76%, 84%)

HSB

hsb(86, 26%, 96%)

CMYK

cmyk(11%, 0%, 26%, 4%)

Oklch

oklch(93.4% 0.089 127.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

807070

6F8080

Analogous

806F78

807070

80786F

Triadic

807070

6F806F

6F6F80

Split-Comp.

807070

6F8078

6F7880

Tetradic

807070

78806F

6F8080

786F80

Contrast Matrix WCAG 2.1 Contrast

807070	9A8FC8	8DBDEB	A5E6C8	D9F5B5
—	1.6 Fail	2.4 Fail	3.3 AA Large	4.0 AA Large
1.6 Fail	—	1.5 Fail	2.1 Fail	2.5 Fail
2.4 Fail	1.5 Fail	—	1.4 Fail	1.7 Fail
3.3 AA Large	2.1 Fail	1.4 Fail	—	1.2 Fail
4.0 AA Large	2.5 Fail	1.7 Fail	1.2 Fail	—

White BG

4.7AA

2.9Fail

2.0Fail

1.4Fail

1.2Fail

Black BG

4.5AA Large

7.1AAA

10.6AAA

14.8AAA

17.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

797970

9595BA

A2A2E0

C1C2CF

E5E5C4

Deuteranopia

7A7B70

9697B7

9F9BDD

BDB9D1

E4E1C8

Tritanopia

7F7070

99AFAD

8FD7D5

A8D5D6

DAD1D3

Achromatopsia

757575

999999

B4B4B4

CFCFCF

E5E5E5

Shades & Tints Shades & Tints

#807070

Dark

Light

#9A8FC8

Dark

Light

#8DBDEB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #807070;
  --color-2: #9a8fc8;
  --color-3: #8dbdeb;
  --color-4: #a5e6c8;
  --color-5: #d9f5b5;
}

SCSS

$color-1: #807070;
$color-2: #9a8fc8;
$color-3: #8dbdeb;
$color-4: #a5e6c8;
$color-5: #d9f5b5;

TAILWIND

colors: {
  'brand-1': '#807070',
  'brand-2': '#9a8fc8',
  'brand-3': '#8dbdeb',
  'brand-4': '#a5e6c8',
  'brand-5': '#d9f5b5',
}

RGB Array

[128, 112, 112], [154, 143, 200], [141, 189, 235], [165, 230, 200], [217, 245, 181]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #807070, #9A8FC8, #8DBDEB, #A5E6C8, #D9F5B5 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: #807070; --color-2: #9a8fc8; --color-3: #8dbdeb; --color-4: #a5e6c8; --color-5: #d9f5b5. 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