#6AB0CC + #85969E + #8AB3BF + #F7E5DC + #FBFFD9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#6AB0CC

Sky Blue · CornflowerBlue · Lake Green

HEX

#6AB0CC

RGB

rgb(106, 176, 204)

HSL

hsl(197, 49%, 61%)

HSB

hsb(197, 48%, 80%)

CMYK

cmyk(48%, 14%, 0%, 20%)

Oklch

oklch(72.1% 0.081 225.7)

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

#85969E

Slate Blue · LightSlateGray · Lake Green

HEX

#85969E

RGB

rgb(133, 150, 158)

HSL

hsl(199, 11%, 57%)

HSB

hsb(199, 16%, 62%)

CMYK

cmyk(16%, 5%, 0%, 38%)

Oklch

oklch(66.2% 0.023 227.7)

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

#8AB3BF

Sky Blue · DarkGray · Lake Green

HEX

#8AB3BF

RGB

rgb(138, 179, 191)

HSL

hsl(194, 29%, 65%)

HSB

hsb(194, 28%, 75%)

CMYK

cmyk(28%, 6%, 0%, 25%)

Oklch

oklch(74.1% 0.047 217.6)

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

#F7E5DC

Apricot · Linen · Peach Orange

HEX

#F7E5DC

RGB

rgb(247, 229, 220)

HSL

hsl(20, 63%, 92%)

HSB

hsb(20, 11%, 97%)

CMYK

cmyk(0%, 7%, 11%, 3%)

Oklch

oklch(93.4% 0.023 48.5)

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

#FBFFD9

Fresh Green · LightYellow · Lemon Cream

HEX

#FBFFD9

RGB

rgb(251, 255, 217)

HSL

hsl(66, 100%, 93%)

HSB

hsb(66, 15%, 100%)

CMYK

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

Oklch

oklch(98.7% 0.049 112.2)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6AB0CC

CC866B

Analogous

6BCCB7

6AB0CC

6B80CC

Triadic

6AB0CC

CC6BB1

B1CC6B

Split-Comp.

6AB0CC

CC6B80

CCB76B

Tetradic

6AB0CC

B76BCC

CC866B

80CC6B

Contrast Matrix WCAG 2.1 Contrast

6AB0CC	85969E	8AB3BF	F7E5DC	FBFFD9
—	1.3 Fail	1.1 Fail	2.0 Fail	2.3 Fail
1.3 Fail	—	1.4 Fail	2.5 Fail	3.0 Fail
1.1 Fail	1.4 Fail	—	1.9 Fail	2.2 Fail
2.0 Fail	2.5 Fail	1.9 Fail	—	1.2 Fail
2.3 Fail	3.0 Fail	2.2 Fail	1.2 Fail	—

White BG

2.4Fail

3.1AA Large

2.3Fail

1.2Fail

1.0Fail

Black BG

8.7AAA

6.9AA

9.3AAA

17.2AAA

20.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8889C5

8C8D9C

9C9CBC

EFEFDE

FDFDE2

Deuteranopia

847FC4

8B8A9C

9996BB

F0F2DF

FDFCE4

Tritanopia

6DC0BF

869B9A

8CBAB9

F6E0E0

FBE9EB

Achromatopsia

9E9E9E

929292

A8A8A8

E9E9E9

F9F9F9

Shades & Tints Shades & Tints

#6AB0CC

Dark

Light

#85969E

Dark

Light

#8AB3BF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6ab0cc;
  --color-2: #85969e;
  --color-3: #8ab3bf;
  --color-4: #f7e5dc;
  --color-5: #fbffd9;
}

SCSS

$color-1: #6ab0cc;
$color-2: #85969e;
$color-3: #8ab3bf;
$color-4: #f7e5dc;
$color-5: #fbffd9;

TAILWIND

colors: {
  'brand-1': '#6ab0cc',
  'brand-2': '#85969e',
  'brand-3': '#8ab3bf',
  'brand-4': '#f7e5dc',
  'brand-5': '#fbffd9',
}

RGB Array

[106, 176, 204], [133, 150, 158], [138, 179, 191], [247, 229, 220], [251, 255, 217]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #6AB0CC, #85969E, #8AB3BF, #F7E5DC, #FBFFD9 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: #6ab0cc; --color-2: #85969e; --color-3: #8ab3bf; --color-4: #f7e5dc; --color-5: #fbffd9. 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