#8E7176 + #6A9B9F + #6FB8CB + #AAD8E5 + #FAD4C1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8E7176

Crimson · Gray · Passion Red

HEX

#8E7176

RGB

rgb(142, 113, 118)

HSL

hsl(350, 11%, 50%)

HSB

hsb(350, 20%, 56%)

CMYK

cmyk(0%, 20%, 17%, 44%)

Oklch

oklch(57.8% 0.037 6.7)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#6A9B9F

Slate Blue · CadetBlue · Lake Green

HEX

#6A9B9F

RGB

rgb(106, 155, 159)

HSL

hsl(185, 22%, 52%)

HSB

hsb(185, 33%, 62%)

CMYK

cmyk(33%, 3%, 0%, 38%)

Oklch

oklch(65.6% 0.053 202.4)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#6FB8CB

Sky Blue · MediumAquaMarine · Lake Green

HEX

#6FB8CB

RGB

rgb(111, 184, 203)

HSL

hsl(192, 47%, 62%)

HSB

hsb(192, 45%, 80%)

CMYK

cmyk(45%, 9%, 0%, 20%)

Oklch

oklch(74.2% 0.078 216.3)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#AAD8E5

Sky Blue · LightBlue · Glacier Blue

HEX

#AAD8E5

RGB

rgb(170, 216, 229)

HSL

hsl(193, 53%, 78%)

HSB

hsb(193, 26%, 90%)

CMYK

cmyk(26%, 6%, 0%, 10%)

Oklch

oklch(85.4% 0.051 216.9)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#FAD4C1

Apricot · Bisque · Peach Orange

HEX

#FAD4C1

RGB

rgb(250, 212, 193)

HSL

hsl(20, 85%, 87%)

HSB

hsb(20, 23%, 98%)

CMYK

cmyk(0%, 15%, 23%, 2%)

Oklch

oklch(89.7% 0.050 48.1)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8E7176

718E89

Analogous

8E7184

8E7176

8E7B71

Triadic

8E7176

768E71

71768E

Split-Comp.

8E7176

718E7B

71848E

Tetradic

8E7176

848E71

718E89

7B718E

Contrast Matrix WCAG 2.1 Contrast

8E7176	6A9B9F	6FB8CB	AAD8E5	FAD4C1
—	1.4 Fail	2.0 Fail	2.9 Fail	3.2 AA Large
1.4 Fail	—	1.4 Fail	2.0 Fail	2.2 Fail
2.0 Fail	1.4 Fail	—	1.5 Fail	1.6 Fail
2.9 Fail	2.0 Fail	1.5 Fail	—	1.1 Fail
3.2 AA Large	2.2 Fail	1.6 Fail	1.1 Fail	—

White BG

4.4AA Large

3.1AA Large

2.2Fail

1.5Fail

1.4Fail

Black BG

4.8AA

6.8AA

9.4AAA

13.7AAA

15.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

818175

7F809E

8F8FC6

BEBEE2

EAE9C6

Deuteranopia

838575

7C799E

8A85C5

BBB8E1

ECEFC7

Tritanopia

8D7474

6C9D9D

73C3C2

ACDFDF

F8C9CA

Achromatopsia

7A7A7A

8D8D8D

A4A4A4

CCCCCC

DDDDDD

Shades & Tints Shades & Tints

#8E7176

Dark

Light

#6A9B9F

Dark

Light

#6FB8CB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8e7176;
  --color-2: #6a9b9f;
  --color-3: #6fb8cb;
  --color-4: #aad8e5;
  --color-5: #fad4c1;
}

SCSS

$color-1: #8e7176;
$color-2: #6a9b9f;
$color-3: #6fb8cb;
$color-4: #aad8e5;
$color-5: #fad4c1;

TAILWIND

colors: {
  'brand-1': '#8e7176',
  'brand-2': '#6a9b9f',
  'brand-3': '#6fb8cb',
  'brand-4': '#aad8e5',
  'brand-5': '#fad4c1',
}

RGB Array

[142, 113, 118], [106, 155, 159], [111, 184, 203], [170, 216, 229], [250, 212, 193]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8E7176, #6A9B9F, #6FB8CB, #AAD8E5, #FAD4C1 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: #8e7176; --color-2: #6a9b9f; --color-3: #6fb8cb; --color-4: #aad8e5; --color-5: #fad4c1. 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