← Back to Editor

#78A3B3 · #97B5BA · #B5C7C1 · #D4D8C7 · #F2EACE

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#78A3B3

Slate Blue · CadetBlue · Lake Green

HEX
#78A3B3
RGB
rgb(120, 163, 179)
HSL
hsl(196, 28%, 59%)
HSB
hsb(196, 33%, 70%)
CMYK
cmyk(33%, 9%, 0%, 30%)
Oklch
oklch(69.0% 0.052 222.9)

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

#97B5BA

Sky Blue · DarkGray · Lake Green

HEX
#97B5BA
RGB
rgb(151, 181, 186)
HSL
hsl(189, 20%, 66%)
HSB
hsb(189, 19%, 73%)
CMYK
cmyk(19%, 3%, 0%, 27%)
Oklch
oklch(75.2% 0.033 208.8)

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

#B5C7C1

Jade · Silver · Lake Green

HEX
#B5C7C1
RGB
rgb(181, 199, 193)
HSL
hsl(160, 14%, 75%)
HSB
hsb(160, 9%, 78%)
CMYK
cmyk(9%, 0%, 3%, 22%)
Oklch
oklch(81.4% 0.021 173.8)

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

#D4D8C7

Willow Green · LightGray · Mint Green

HEX
#D4D8C7
RGB
rgb(212, 216, 199)
HSL
hsl(74, 18%, 81%)
HSB
hsb(74, 8%, 85%)
CMYK
cmyk(2%, 0%, 8%, 15%)
Oklch
oklch(87.4% 0.023 117.6)

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

#F2EACE

Goose Yellow · Bisque · Lemon Cream

HEX
#F2EACE
RGB
rgb(242, 234, 206)
HSL
hsl(47, 58%, 88%)
HSB
hsb(47, 15%, 95%)
CMYK
cmyk(0%, 3%, 15%, 5%)
Oklch
oklch(93.6% 0.038 93.8)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

78A3B3
B48979

Analogous

79B4A6
78A3B3
7987B4

Triadic

78A3B3
B479A4
A4B479

Split-Comp.

78A3B3
B47987
B4A679

Tetradic

78A3B3
A679B4
B48979
87B479

Contrast Matrix WCAG 2.1 Contrast

78A3B3
97B5BA
B5C7C1
D4D8C7
F2EACE
—
1.3
Fail
1.5
Fail
1.9
Fail
2.3
Fail
1.3
Fail
—
1.2
Fail
1.5
Fail
1.8
Fail
1.5
Fail
1.2
Fail
—
1.2
Fail
1.5
Fail
1.9
Fail
1.5
Fail
1.2
Fail
—
1.2
Fail
2.3
Fail
1.8
Fail
1.5
Fail
1.2
Fail
—
White BG
2.7Fail
2.2Fail
1.8Fail
1.5Fail
1.2Fail
Black BG
7.7AAA
9.6AAA
11.9AAA
14.4AAA
17.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8B8BAF
A4A4B9
BDBDC2
D6D6CB
EFEED5

Deuteranopia

8885AE
A2A0B9
BCBAC3
D6D5CC
EFF0D6

Tritanopia

7AACAB
99B8B8
B6C4C4
D4CECF
F2DADB

Achromatopsia

989898
ADADAD
C1C1C1
D5D5D5
E9E9E9

Shades & Tints Shades & Tints

#78A3B3

Dark
Light

#97B5BA

Dark
Light

#B5C7C1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #78a3b3;
  --color-2: #97b5ba;
  --color-3: #b5c7c1;
  --color-4: #d4d8c7;
  --color-5: #f2eace;
}

SCSS

$color-1: #78a3b3;
$color-2: #97b5ba;
$color-3: #b5c7c1;
$color-4: #d4d8c7;
$color-5: #f2eace;

TAILWIND

colors: {
  'brand-1': '#78a3b3',
  'brand-2': '#97b5ba',
  'brand-3': '#b5c7c1',
  'brand-4': '#d4d8c7',
  'brand-5': '#f2eace',
}

RGB Array

[120, 163, 179], [151, 181, 186], [181, 199, 193], [212, 216, 199], [242, 234, 206]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #78A3B3, #97B5BA, #B5C7C1, #D4D8C7, #F2EACE is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #78a3b3; --color-2: #97b5ba; --color-3: #b5c7c1; --color-4: #d4d8c7; --color-5: #f2eace. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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