← Back to Editor

#9EB4C1 · #919072 · #DC9E2D · #B3BB68 · #C9D0BE

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 Library

Color Details Color Details

#9EB4C1

Sky Blue · DarkGray · Cobalt Blue

HEX
#9EB4C1
RGB
rgb(158, 180, 193)
HSL
hsl(202, 22%, 69%)
HSB
hsb(202, 18%, 76%)
CMYK
cmyk(18%, 7%, 0%, 24%)
Oklch
oklch(75.7% 0.031 233.8)

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

#919072

Autumn Sage · Gray · Sunflower

HEX
#919072
RGB
rgb(145, 144, 114)
HSL
hsl(58, 12%, 51%)
HSB
hsb(58, 21%, 57%)
CMYK
cmyk(0%, 1%, 21%, 43%)
Oklch
oklch(64.6% 0.043 106.0)

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

#DC9E2D

Ginger · GoldenRod · Warm Sun

HEX
#DC9E2D
RGB
rgb(220, 158, 45)
HSL
hsl(39, 71%, 52%)
HSB
hsb(39, 80%, 86%)
CMYK
cmyk(0%, 28%, 80%, 14%)
Oklch
oklch(74.1% 0.141 77.4)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#B3BB68

Autumn Sage · Tan · Sunflower

HEX
#B3BB68
RGB
rgb(179, 187, 104)
HSL
hsl(66, 38%, 57%)
HSB
hsb(66, 44%, 73%)
CMYK
cmyk(4%, 0%, 44%, 27%)
Oklch
oklch(76.7% 0.107 113.4)

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

#C9D0BE

Willow Green · Silver · Apple Green

HEX
#C9D0BE
RGB
rgb(201, 208, 190)
HSL
hsl(83, 16%, 78%)
HSB
hsb(83, 9%, 82%)
CMYK
cmyk(3%, 0%, 9%, 18%)
Oklch
oklch(84.7% 0.026 124.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9EB4C1
C1AB9F

Analogous

9FC1BD
9EB4C1
9FA3C1

Triadic

9EB4C1
C19FB5
B5C19F

Split-Comp.

9EB4C1
C19FA3
C1BD9F

Tetradic

9EB4C1
BD9FC1
C1AB9F
A3C19F

Contrast Matrix WCAG 2.1 Contrast

9EB4C1
919072
DC9E2D
B3BB68
C9D0BE
—
1.5
Fail
1.1
Fail
1.0
Fail
1.4
Fail
1.5
Fail
—
1.4
Fail
1.6
Fail
2.1
Fail
1.1
Fail
1.4
Fail
—
1.1
Fail
1.5
Fail
1.0
Fail
1.6
Fail
1.1
Fail
—
1.3
Fail
1.4
Fail
2.1
Fail
1.5
Fail
1.3
Fail
—
White BG
2.2Fail
3.3AA Large
2.3Fail
2.1Fail
1.6Fail
Black BG
9.8AAA
6.4AA
9.0AAA
10.2AAA
13.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A8BE
919179
C1C148
B6B77C
CCCCC2

Deuteranopia

A6A5BD
91917B
C5C94F
B6B581
CCCBC3

Tritanopia

9FBBBB
917F80
D95E63
B38C8F
C9C6C7

Achromatopsia

AFAFAF
8D8D8D
A4A4A4
AFAFAF
CCCCCC

Shades & Tints Shades & Tints

#9EB4C1

Dark
Light

#919072

Dark
Light

#DC9E2D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9eb4c1;
  --color-2: #919072;
  --color-3: #dc9e2d;
  --color-4: #b3bb68;
  --color-5: #c9d0be;
}

SCSS

$color-1: #9eb4c1;
$color-2: #919072;
$color-3: #dc9e2d;
$color-4: #b3bb68;
$color-5: #c9d0be;

TAILWIND

colors: {
  'brand-1': '#9eb4c1',
  'brand-2': '#919072',
  'brand-3': '#dc9e2d',
  'brand-4': '#b3bb68',
  'brand-5': '#c9d0be',
}

RGB Array

[158, 180, 193], [145, 144, 114], [220, 158, 45], [179, 187, 104], [201, 208, 190]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9EB4C1, #919072, #DC9E2D, #B3BB68, #C9D0BE 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: #9eb4c1; --color-2: #919072; --color-3: #dc9e2d; --color-4: #b3bb68; --color-5: #c9d0be. 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 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