#858585 + #A9AC9A + #C8CCB4 + #FFFFA7 + #FCBF6B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#858585

Ash · Gray · Warm Gray

HEX

#858585

RGB

rgb(133, 133, 133)

HSL

hsl(0, 0%, 52%)

HSB

hsb(0, 0%, 52%)

CMYK

cmyk(0%, 0%, 0%, 48%)

Oklch

oklch(61.7% 0.000 89.9)

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

#A9AC9A

Willow Green · DarkGray · Apple Green

HEX

#A9AC9A

RGB

rgb(169, 172, 154)

HSL

hsl(70, 10%, 64%)

HSB

hsb(70, 10%, 67%)

CMYK

cmyk(2%, 0%, 10%, 33%)

Oklch

oklch(73.7% 0.025 114.7)

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

#C8CCB4

Willow Green · Silver · Apple Green

HEX

#C8CCB4

RGB

rgb(200, 204, 180)

HSL

hsl(70, 19%, 75%)

HSB

hsb(70, 12%, 80%)

CMYK

cmyk(2%, 0%, 12%, 20%)

Oklch

oklch(83.6% 0.033 114.8)

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

#FFFFA7

Fresh Green · Wheat · Lemon Cream

HEX

#FFFFA7

RGB

rgb(255, 255, 167)

HSL

hsl(60, 100%, 83%)

HSB

hsb(60, 35%, 100%)

CMYK

cmyk(0%, 0%, 35%, 0%)

Oklch

oklch(98.1% 0.109 108.3)

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

#FCBF6B

Ginger · SandyBrown · Warm Sun

HEX

#FCBF6B

RGB

rgb(252, 191, 107)

HSL

hsl(35, 96%, 70%)

HSB

hsb(35, 58%, 99%)

CMYK

cmyk(0%, 24%, 58%, 1%)

Oklch

oklch(84.4% 0.123 73.6)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

858585

Analogous

858585

Triadic

858585

Split-Comp.

858585

Tetradic

858585

Contrast Matrix WCAG 2.1 Contrast

858585	A9AC9A	C8CCB4	FFFFA7	FCBF6B
—	1.6 Fail	2.2 Fail	3.5 AA Large	2.2 Fail
1.6 Fail	—	1.4 Fail	2.2 Fail	1.4 Fail
2.2 Fail	1.4 Fail	—	1.6 Fail	1.0 Fail
3.5 AA Large	2.2 Fail	1.6 Fail	—	1.6 Fail
2.2 Fail	1.4 Fail	1.0 Fail	1.6 Fail	—

White BG

3.7AA Large

2.3Fail

1.6Fail

1.0Fail

1.6Fail

Black BG

5.7AA

9.1AAA

12.8AAA

20.1AAA

12.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

858585

AAAA9E

CACABA

FFFFBC

E2E17F

Deuteranopia

858585

AAAA9F

CAC9BB

FFFFC1

E5EA84

Tritanopia

858585

A9A2A3

C8BEBF

FFCDD1

F98F93

Achromatopsia

858585

A9A9A9

C8C8C8

F5F5F5

C8C8C8

Shades & Tints Shades & Tints

#858585

Dark

Light

#A9AC9A

Dark

Light

#C8CCB4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #858585;
  --color-2: #a9ac9a;
  --color-3: #c8ccb4;
  --color-4: #ffffa7;
  --color-5: #fcbf6b;
}

SCSS

$color-1: #858585;
$color-2: #a9ac9a;
$color-3: #c8ccb4;
$color-4: #ffffa7;
$color-5: #fcbf6b;

TAILWIND

colors: {
  'brand-1': '#858585',
  'brand-2': '#a9ac9a',
  'brand-3': '#c8ccb4',
  'brand-4': '#ffffa7',
  'brand-5': '#fcbf6b',
}

RGB Array

[133, 133, 133], [169, 172, 154], [200, 204, 180], [255, 255, 167], [252, 191, 107]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #858585, #A9AC9A, #C8CCB4, #FFFFA7, #FCBF6B 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: #858585; --color-2: #a9ac9a; --color-3: #c8ccb4; --color-4: #ffffa7; --color-5: #fcbf6b. 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 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