← Back to Editor

#8FADC5 · #677262 · #C9DEE3 · #F0F7E7 · #406254

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#8FADC5

Sky Blue · DarkGray · Cobalt Blue

HEX
#8FADC5
RGB
rgb(143, 173, 197)
HSL
hsl(207, 32%, 67%)
HSB
hsb(207, 27%, 77%)
CMYK
cmyk(27%, 12%, 0%, 23%)
Oklch
oklch(73.3% 0.048 242.5)

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

#677262

Celadon · DimGray · Warm Gray

HEX
#677262
RGB
rgb(103, 114, 98)
HSL
hsl(101, 8%, 42%)
HSB
hsb(101, 14%, 45%)
CMYK
cmyk(10%, 0%, 14%, 55%)
Oklch
oklch(53.8% 0.028 135.8)

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

#C9DEE3

Sky Blue · LightGray · Glacier Blue

HEX
#C9DEE3
RGB
rgb(201, 222, 227)
HSL
hsl(192, 32%, 84%)
HSB
hsb(192, 11%, 89%)
CMYK
cmyk(11%, 2%, 0%, 11%)
Oklch
oklch(88.6% 0.023 213.6)

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

#F0F7E7

Willow Green · Beige · Mint Green

HEX
#F0F7E7
RGB
rgb(240, 247, 231)
HSL
hsl(86, 50%, 94%)
HSB
hsb(86, 6%, 97%)
CMYK
cmyk(3%, 0%, 6%, 3%)
Oklch
oklch(96.7% 0.022 126.2)

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

#406254

Mineral Blue · DarkSlateGray · Forest Green

HEX
#406254
RGB
rgb(64, 98, 84)
HSL
hsl(155, 21%, 32%)
HSB
hsb(155, 35%, 38%)
CMYK
cmyk(35%, 0%, 14%, 62%)
Oklch
oklch(46.6% 0.046 166.7)

Traditional「Mineral Blue」· Paint「Forest Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8FADC5
C6A890

Analogous

90C6C3
8FADC5
9093C6

Triadic

8FADC5
C690AE
AEC690

Split-Comp.

8FADC5
C69093
C6C390

Tetradic

8FADC5
C390C6
C6A890
93C690

Contrast Matrix WCAG 2.1 Contrast

8FADC5
677262
C9DEE3
F0F7E7
406254
—
2.2
Fail
1.7
Fail
2.1
Fail
2.9
Fail
2.2
Fail
—
3.6
AA Large
4.6
AA
1.3
Fail
1.7
Fail
3.6
AA Large
—
1.3
Fail
4.9
AA
2.1
Fail
4.6
AA
1.3
Fail
—
6.2
AA
2.9
Fail
1.3
Fail
4.9
AA
6.2
AA
—
White BG
2.3Fail
5.0AA
1.4Fail
1.1Fail
6.8AA
Black BG
9.0AAA
4.2AA Large
15.0AAA
19.2AAA
3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

9C9CBF
6C6C66
D2D2E2
F3F3EB
4F4F57

Deuteranopia

9A98BE
6B6A67
D1CFE1
F3F2EC
4D4A58

Tritanopia

91BBBA
68696A
CAE1E1
F0EEEF
425A5B

Achromatopsia

A7A7A7
6D6D6D
D8D8D8
F3F3F3
565656

Shades & Tints Shades & Tints

#8FADC5

Dark
Light

#677262

Dark
Light

#C9DEE3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8fadc5;
  --color-2: #677262;
  --color-3: #c9dee3;
  --color-4: #f0f7e7;
  --color-5: #406254;
}

SCSS

$color-1: #8fadc5;
$color-2: #677262;
$color-3: #c9dee3;
$color-4: #f0f7e7;
$color-5: #406254;

TAILWIND

colors: {
  'brand-1': '#8fadc5',
  'brand-2': '#677262',
  'brand-3': '#c9dee3',
  'brand-4': '#f0f7e7',
  'brand-5': '#406254',
}

RGB Array

[143, 173, 197], [103, 114, 98], [201, 222, 227], [240, 247, 231], [64, 98, 84]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8FADC5, #677262, #C9DEE3, #F0F7E7, #406254 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #8fadc5; --color-2: #677262; --color-3: #c9dee3; --color-4: #f0f7e7; --color-5: #406254. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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. 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