#6B778C + #7A9596 + #93B6AF + #A3D9B1 + #A4F7D4 · pastel - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#6B778C

Indigo · SlateGray · Navy Blue

HEX

#6B778C

RGB

rgb(107, 119, 140)

HSL

hsl(218, 13%, 48%)

HSB

hsb(218, 24%, 55%)

CMYK

cmyk(24%, 15%, 0%, 45%)

Oklch

oklch(56.7% 0.036 261.6)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#7A9596

Slate Blue · LightSlateGray · Lake Green

HEX

#7A9596

RGB

rgb(122, 149, 150)

HSL

hsl(182, 12%, 53%)

HSB

hsb(182, 19%, 59%)

CMYK

cmyk(19%, 1%, 0%, 41%)

Oklch

oklch(64.9% 0.030 199.2)

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

#93B6AF

Jade · DarkGray · Lake Green

HEX

#93B6AF

RGB

rgb(147, 182, 175)

HSL

hsl(168, 19%, 65%)

HSB

hsb(168, 19%, 71%)

CMYK

cmyk(19%, 0%, 4%, 29%)

Oklch

oklch(74.8% 0.039 181.7)

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

#A3D9B1

Celadon · Silver · Apple Green

HEX

#A3D9B1

RGB

rgb(163, 217, 177)

HSL

hsl(136, 42%, 75%)

HSB

hsb(136, 25%, 85%)

CMYK

cmyk(25%, 0%, 18%, 15%)

Oklch

oklch(83.7% 0.079 152.5)

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

#A4F7D4

Jade · LightBlue · Mint Green

HEX

#A4F7D4

RGB

rgb(164, 247, 212)

HSL

hsl(155, 84%, 81%)

HSB

hsb(155, 34%, 97%)

CMYK

cmyk(34%, 0%, 14%, 3%)

Oklch

oklch(91.3% 0.095 166.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6B778C

8A7F6A

Analogous

6A868A

6B778C

6F6A8A

Triadic

6B778C

8A6A76

768A6A

Split-Comp.

6B778C

8A6F6A

868A6A

Tetradic

6B778C

8A6A86

8A7F6A

6A8A6F

Contrast Matrix WCAG 2.1 Contrast

6B778C	7A9596	93B6AF	A3D9B1	A4F7D4
—	1.4 Fail	2.1 Fail	2.8 Fail	3.6 AA Large
1.4 Fail	—	1.5 Fail	2.0 Fail	2.6 Fail
2.1 Fail	1.5 Fail	—	1.4 Fail	1.8 Fail
2.8 Fail	2.0 Fail	1.4 Fail	—	1.3 Fail
3.6 AA Large	2.6 Fail	1.8 Fail	1.3 Fail	—

White BG

4.5AA

3.2AA Large

2.2Fail

1.6Fail

1.2Fail

Black BG

4.6AA

6.6AA

9.6AAA

13.1AAA

16.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

707087

868696

A2A2B1

BABBBB

C8C9DC

Deuteranopia

706F86

848296

A09EB1

B7B3BD

C3BDDE

Tritanopia

6C8382

7B9696

95B2B2

A6C2C4

A8E3E5

Achromatopsia

767676

8D8D8D

ABABAB

C4C4C4

DADADA

Shades & Tints Shades & Tints

#6B778C

Dark

Light

#7A9596

Dark

Light

#93B6AF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6b778c;
  --color-2: #7a9596;
  --color-3: #93b6af;
  --color-4: #a3d9b1;
  --color-5: #a4f7d4;
}

SCSS

$color-1: #6b778c;
$color-2: #7a9596;
$color-3: #93b6af;
$color-4: #a3d9b1;
$color-5: #a4f7d4;

TAILWIND

colors: {
  'brand-1': '#6b778c',
  'brand-2': '#7a9596',
  'brand-3': '#93b6af',
  'brand-4': '#a3d9b1',
  'brand-5': '#a4f7d4',
}

RGB Array

[107, 119, 140], [122, 149, 150], [147, 182, 175], [163, 217, 177], [164, 247, 212]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #6B778C, #7A9596, #93B6AF, #A3D9B1, #A4F7D4 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: #6b778c; --color-2: #7a9596; --color-3: #93b6af; --color-4: #a3d9b1; --color-5: #a4f7d4. 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 pastel-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