#9A9A9D + #C5C0BE + #E3E6EA + #F6E699 + #F79D0F · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9A9A9D

Ash · DarkGray · Silver Sand

HEX

#9A9A9D

RGB

rgb(154, 154, 157)

HSL

hsl(240, 2%, 61%)

HSB

hsb(240, 2%, 62%)

CMYK

cmyk(2%, 2%, 0%, 38%)

Oklch

oklch(68.7% 0.004 286.3)

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

#C5C0BE

Silver Gray · Silver · Pearl Gray

HEX

#C5C0BE

RGB

rgb(197, 192, 190)

HSL

hsl(17, 6%, 76%)

HSB

hsb(17, 4%, 77%)

CMYK

cmyk(0%, 3%, 4%, 23%)

Oklch

oklch(81.1% 0.006 43.3)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#E3E6EA

Azure · Lavender · Sky Blue

HEX

#E3E6EA

RGB

rgb(227, 230, 234)

HSL

hsl(214, 14%, 90%)

HSB

hsb(214, 3%, 92%)

CMYK

cmyk(3%, 2%, 0%, 8%)

Oklch

oklch(92.4% 0.006 255.5)

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

#F6E699

Fresh Green · Khaki · Lemon Cream

HEX

#F6E699

RGB

rgb(246, 230, 153)

HSL

hsl(50, 84%, 78%)

HSB

hsb(50, 38%, 96%)

CMYK

cmyk(0%, 7%, 38%, 4%)

Oklch

oklch(92.1% 0.098 97.9)

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

#F79D0F

Ginger · Orange · Warm Sun

HEX

#F79D0F

RGB

rgb(247, 157, 15)

HSL

hsl(37, 94%, 51%)

HSB

hsb(37, 94%, 97%)

CMYK

cmyk(0%, 36%, 94%, 3%)

Oklch

oklch(76.9% 0.166 68.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9A9A9D

9E9E9A

Analogous

9A9C9E

9A9A9D

9C9A9E

Triadic

9A9A9D

9E9A9A

9A9E9A

Split-Comp.

9A9A9D

9E9C9A

9C9E9A

Tetradic

9A9A9D

9E9A9C

9E9E9A

9A9E9C

Contrast Matrix WCAG 2.1 Contrast

9A9A9D	C5C0BE	E3E6EA	F6E699	F79D0F
—	1.6 Fail	2.2 Fail	2.2 Fail	1.3 Fail
1.6 Fail	—	1.4 Fail	1.4 Fail	1.2 Fail
2.2 Fail	1.4 Fail	—	1.0 Fail	1.7 Fail
2.2 Fail	1.4 Fail	1.0 Fail	—	1.7 Fail
1.3 Fail	1.2 Fail	1.7 Fail	1.7 Fail	—

White BG

2.8Fail

1.8Fail

1.3Fail

2.1Fail

Black BG

7.5AAA

11.7AAA

16.8AAA

16.7AAA

9.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9A9A9C

C3C3BE

E4E4E9

EFEFAC

D0CF31

Deuteranopia

9A9A9C

C3C3BF

E4E4E9

F0F1B0

D5DC3A

Tritanopia

9A9C9C

C5BFBF

E3E8E8

F5BABE

F24C52

Achromatopsia

9A9A9A

C1C1C1

E6E6E6

E2E2E2

A8A8A8

Shades & Tints Shades & Tints

#9A9A9D

Dark

Light

#C5C0BE

Dark

Light

#E3E6EA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9a9a9d;
  --color-2: #c5c0be;
  --color-3: #e3e6ea;
  --color-4: #f6e699;
  --color-5: #f79d0f;
}

SCSS

$color-1: #9a9a9d;
$color-2: #c5c0be;
$color-3: #e3e6ea;
$color-4: #f6e699;
$color-5: #f79d0f;

TAILWIND

colors: {
  'brand-1': '#9a9a9d',
  'brand-2': '#c5c0be',
  'brand-3': '#e3e6ea',
  'brand-4': '#f6e699',
  'brand-5': '#f79d0f',
}

RGB Array

[154, 154, 157], [197, 192, 190], [227, 230, 234], [246, 230, 153], [247, 157, 15]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #9A9A9D, #C5C0BE, #E3E6EA, #F6E699, #F79D0F is ideal for: health products, baby brands, fresh-style blogs. 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: #9a9a9d; --color-2: #c5c0be; --color-3: #e3e6ea; --color-4: #f6e699; --color-5: #f79d0f. 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 cool-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