← Back to Editor

#9CA198 · #766E6E · #F7F7D6 · #FAC014 · #D3EBCB

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#9CA198

Ash · DarkGray · Silver Sand

HEX
#9CA198
RGB
rgb(156, 161, 152)
HSL
hsl(93, 5%, 61%)
HSB
hsb(93, 6%, 63%)
CMYK
cmyk(3%, 0%, 6%, 37%)
Oklch
oklch(70.2% 0.014 130.8)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#766E6E

Ink Gray · DimGray · Warm Gray

HEX
#766E6E
RGB
rgb(118, 110, 110)
HSL
hsl(0, 4%, 45%)
HSB
hsb(0, 7%, 46%)
CMYK
cmyk(0%, 7%, 7%, 54%)
Oklch
oklch(54.6% 0.010 17.5)

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

#F7F7D6

Fresh Green · Beige · Lemon Cream

HEX
#F7F7D6
RGB
rgb(247, 247, 214)
HSL
hsl(60, 67%, 90%)
HSB
hsb(60, 13%, 97%)
CMYK
cmyk(0%, 0%, 13%, 3%)
Oklch
oklch(96.8% 0.043 107.2)

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

#FAC014

Ginger · Gold · Sunflower

HEX
#FAC014
RGB
rgb(250, 192, 20)
HSL
hsl(45, 96%, 53%)
HSB
hsb(45, 92%, 98%)
CMYK
cmyk(0%, 23%, 92%, 2%)
Oklch
oklch(83.7% 0.168 86.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#D3EBCB

Celadon · LightGray · Mint Green

HEX
#D3EBCB
RGB
rgb(211, 235, 203)
HSL
hsl(105, 44%, 86%)
HSB
hsb(105, 14%, 92%)
CMYK
cmyk(10%, 0%, 14%, 8%)
Oklch
oklch(91.4% 0.050 137.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9CA198
9C97A1

Analogous

A0A197
9CA198
97A197

Triadic

9CA198
979BA1
A1979B

Split-Comp.

9CA198
9797A1
A197A0

Tetradic

9CA198
97A0A1
9C97A1
A19797

Contrast Matrix WCAG 2.1 Contrast

9CA198
766E6E
F7F7D6
FAC014
D3EBCB
—
1.9
Fail
2.4
Fail
1.6
Fail
2.1
Fail
1.9
Fail
—
4.6
AA
3.0
Fail
3.9
AA Large
2.4
Fail
4.6
AA
—
1.5
Fail
1.2
Fail
1.6
Fail
3.0
Fail
1.5
Fail
—
1.3
Fail
2.1
Fail
3.9
AA Large
1.2
Fail
1.3
Fail
—
White BG
2.6Fail
5.0AA
1.1Fail
1.7Fail
1.3Fail
Black BG
8.0AAA
4.2AA Large
19.2AAA
12.6AAA
16.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9E9E9A
73726E
F7F7DE
E1E03E
DDDED3

Deuteranopia

9E9E9B
73746E
F7F7E0
E4E948
DCDAD5

Tritanopia

9C9C9C
766E6E
F7E4E6
F75E66
D4D9DA

Achromatopsia

9E9E9E
707070
F3F3F3
BEBEBE
E0E0E0

Shades & Tints Shades & Tints

#9CA198

Dark
Light

#766E6E

Dark
Light

#F7F7D6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9ca198;
  --color-2: #766e6e;
  --color-3: #f7f7d6;
  --color-4: #fac014;
  --color-5: #d3ebcb;
}

SCSS

$color-1: #9ca198;
$color-2: #766e6e;
$color-3: #f7f7d6;
$color-4: #fac014;
$color-5: #d3ebcb;

TAILWIND

colors: {
  'brand-1': '#9ca198',
  'brand-2': '#766e6e',
  'brand-3': '#f7f7d6',
  'brand-4': '#fac014',
  'brand-5': '#d3ebcb',
}

RGB Array

[156, 161, 152], [118, 110, 110], [247, 247, 214], [250, 192, 20], [211, 235, 203]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9CA198, #766E6E, #F7F7D6, #FAC014, #D3EBCB is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #9ca198; --color-2: #766e6e; --color-3: #f7f7d6; --color-4: #fac014; --color-5: #d3ebcb. 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. 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. 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