← Back to Editor

#556666 · #85A596 · #FFFCE9 · #FFBE52 · #F94100

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#556666

Slate Blue · DimGray · Charcoal

HEX
#556666
RGB
rgb(85, 102, 102)
HSL
hsl(180, 9%, 37%)
HSB
hsb(180, 17%, 40%)
CMYK
cmyk(17%, 0%, 0%, 60%)
Oklch
oklch(49.6% 0.021 196.5)

Traditional「Slate Blue」· Paint「Charcoal」· Creative Midnight Shadow

#85A596

Mineral Blue · DarkSeaGreen · Olive Green

HEX
#85A596
RGB
rgb(133, 165, 150)
HSL
hsl(152, 15%, 58%)
HSB
hsb(152, 19%, 65%)
CMYK
cmyk(19%, 0%, 9%, 35%)
Oklch
oklch(69.3% 0.042 165.1)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#FFFCE9

Fresh Green · SeaShell · Lemon Cream

HEX
#FFFCE9
RGB
rgb(255, 252, 233)
HSL
hsl(52, 100%, 96%)
HSB
hsb(52, 9%, 100%)
CMYK
cmyk(0%, 1%, 9%, 0%)
Oklch
oklch(98.8% 0.025 99.5)

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

#FFBE52

Ginger · SandyBrown · Warm Sun

HEX
#FFBE52
RGB
rgb(255, 190, 82)
HSL
hsl(37, 100%, 66%)
HSB
hsb(37, 68%, 100%)
CMYK
cmyk(0%, 25%, 68%, 0%)
Oklch
oklch(84.2% 0.143 77.1)

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

#F94100

Tangerine · OrangeRed · Amber Brown

HEX
#F94100
RGB
rgb(249, 65, 0)
HSL
hsl(16, 100%, 49%)
HSB
hsb(16, 100%, 98%)
CMYK
cmyk(0%, 74%, 100%, 2%)
Oklch
oklch(64.7% 0.227 35.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

556666
675656

Analogous

56675E
556666
565E67

Triadic

556666
675667
676756

Split-Comp.

556666
67565E
675E56

Tetradic

556666
5E5667
675656
5E6756

Contrast Matrix WCAG 2.1 Contrast

556666
85A596
FFFCE9
FFBE52
F94100
—
2.2
Fail
5.9
AA
3.7
AA Large
1.7
Fail
2.2
Fail
—
2.6
Fail
1.6
Fail
1.4
Fail
5.9
AA
2.6
Fail
—
1.6
Fail
3.5
AA Large
3.7
AA Large
1.6
Fail
1.6
Fail
—
2.2
Fail
1.7
Fail
1.4
Fail
3.5
AA Large
2.2
Fail
—
White BG
6.0AA
2.7Fail
1.0Fail
1.6Fail
3.6AA Large
Black BG
3.5AA Large
7.8AAA
20.4AAA
12.7AAA
5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5C5D66
93939A
FEFEEE
E3E26C
A9A810

Deuteranopia

5B5A66
918F9B
FEFEEF
E7EC72
B4C214

Tritanopia

566666
879C9D
FFF1F2
FC8185
F01C1F

Achromatopsia

616161
9A9A9A
FBFBFB
C5C5C5
717171

Shades & Tints Shades & Tints

#556666

Dark
Light

#85A596

Dark
Light

#FFFCE9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #556666;
  --color-2: #85a596;
  --color-3: #fffce9;
  --color-4: #ffbe52;
  --color-5: #f94100;
}

SCSS

$color-1: #556666;
$color-2: #85a596;
$color-3: #fffce9;
$color-4: #ffbe52;
$color-5: #f94100;

TAILWIND

colors: {
  'brand-1': '#556666',
  'brand-2': '#85a596',
  'brand-3': '#fffce9',
  'brand-4': '#ffbe52',
  'brand-5': '#f94100',
}

RGB Array

[85, 102, 102], [133, 165, 150], [255, 252, 233], [255, 190, 82], [249, 65, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #556666, #85A596, #FFFCE9, #FFBE52, #F94100 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #556666; --color-2: #85a596; --color-3: #fffce9; --color-4: #ffbe52; --color-5: #f94100. 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 cool-style 5-color scheme is especially suited for food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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