← Back to Editor

#9FB4C2 · #6F8396 · #BBC969 · #827358 · #F0EDE6

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#9FB4C2

Sky Blue · DarkGray · Cobalt Blue

HEX
#9FB4C2
RGB
rgb(159, 180, 194)
HSL
hsl(204, 22%, 69%)
HSB
hsb(204, 18%, 76%)
CMYK
cmyk(18%, 7%, 0%, 24%)
Oklch
oklch(75.8% 0.031 237.1)

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

#6F8396

Slate Blue · SlateGray · Navy Blue

HEX
#6F8396
RGB
rgb(111, 131, 150)
HSL
hsl(209, 16%, 51%)
HSB
hsb(209, 26%, 59%)
CMYK
cmyk(26%, 13%, 0%, 41%)
Oklch
oklch(60.1% 0.037 247.1)

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

#BBC969

Autumn Sage · Tan · Sunflower

HEX
#BBC969
RGB
rgb(187, 201, 105)
HSL
hsl(69, 47%, 60%)
HSB
hsb(69, 48%, 79%)
CMYK
cmyk(7%, 0%, 48%, 21%)
Oklch
oklch(80.4% 0.122 116.1)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#827358

Ochre · DimGray · Amber Brown

HEX
#827358
RGB
rgb(130, 115, 88)
HSL
hsl(39, 19%, 43%)
HSB
hsb(39, 32%, 51%)
CMYK
cmyk(0%, 12%, 32%, 49%)
Oklch
oklch(56.2% 0.044 82.1)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#F0EDE6

Goose Yellow · Linen · Lemon Cream

HEX
#F0EDE6
RGB
rgb(240, 237, 230)
HSL
hsl(42, 25%, 92%)
HSB
hsb(42, 4%, 94%)
CMYK
cmyk(0%, 1%, 4%, 6%)
Oklch
oklch(94.6% 0.010 87.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9FB4C2
C1AC9F

Analogous

9FC1BE
9FB4C2
9FA2C1

Triadic

9FB4C2
C19FB3
B3C19F

Split-Comp.

9FB4C2
C19FA2
C1BE9F

Tetradic

9FB4C2
BE9FC1
C1AC9F
A2C19F

Contrast Matrix WCAG 2.1 Contrast

9FB4C2
6F8396
BBC969
827358
F0EDE6
—
1.8
Fail
1.2
Fail
2.2
Fail
1.8
Fail
1.8
Fail
—
2.2
Fail
1.2
Fail
3.3
AA Large
1.2
Fail
2.2
Fail
—
2.6
Fail
1.5
Fail
2.2
Fail
1.2
Fail
2.6
Fail
—
4.0
AA Large
1.8
Fail
3.3
AA Large
1.5
Fail
4.0
AA Large
—
White BG
2.1Fail
3.9AA Large
1.8Fail
4.6AA
1.2Fail
Black BG
9.8AAA
5.4AA
11.7AAA
4.5AA
18.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A8BF
787891
C1C180
7C7B5F
EFEFE8

Deuteranopia

A7A5BE
777590
C0BF86
7C7E60
EFEFE8

Tritanopia

A0BCBB
708E8D
BC9397
816465
F0E9E9

Achromatopsia

AFAFAF
7F7F7F
BABABA
747474
EDEDED

Shades & Tints Shades & Tints

#9FB4C2

Dark
Light

#6F8396

Dark
Light

#BBC969

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9fb4c2;
  --color-2: #6f8396;
  --color-3: #bbc969;
  --color-4: #827358;
  --color-5: #f0ede6;
}

SCSS

$color-1: #9fb4c2;
$color-2: #6f8396;
$color-3: #bbc969;
$color-4: #827358;
$color-5: #f0ede6;

TAILWIND

colors: {
  'brand-1': '#9fb4c2',
  'brand-2': '#6f8396',
  'brand-3': '#bbc969',
  'brand-4': '#827358',
  'brand-5': '#f0ede6',
}

RGB Array

[159, 180, 194], [111, 131, 150], [187, 201, 105], [130, 115, 88], [240, 237, 230]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9FB4C2, #6F8396, #BBC969, #827358, #F0EDE6 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: #9fb4c2; --color-2: #6f8396; --color-3: #bbc969; --color-4: #827358; --color-5: #f0ede6. 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