← Back to Editor

#F1CC3B · #C1C671 · #93C2B7 · #919CBB · #808080

cool

A 5-color cool 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

#F1CC3B

Ginger · GoldenRod · Sunflower

HEX
#F1CC3B
RGB
rgb(241, 204, 59)
HSL
hsl(48, 87%, 59%)
HSB
hsb(48, 76%, 95%)
CMYK
cmyk(0%, 15%, 76%, 5%)
Oklch
oklch(85.3% 0.158 93.9)

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

#C1C671

Fresh Green · Tan · Sunflower

HEX
#C1C671
RGB
rgb(193, 198, 113)
HSL
hsl(64, 43%, 61%)
HSB
hsb(64, 43%, 78%)
CMYK
cmyk(3%, 0%, 43%, 22%)
Oklch
oklch(80.4% 0.109 111.5)

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

#93C2B7

Jade · DarkGray · Lake Green

HEX
#93C2B7
RGB
rgb(147, 194, 183)
HSL
hsl(166, 28%, 67%)
HSB
hsb(166, 24%, 76%)
CMYK
cmyk(24%, 0%, 6%, 24%)
Oklch
oklch(77.7% 0.052 178.9)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#919CBB

Azure · DarkGray · Cobalt Blue

HEX
#919CBB
RGB
rgb(145, 156, 187)
HSL
hsl(224, 24%, 65%)
HSB
hsb(224, 22%, 73%)
CMYK
cmyk(22%, 17%, 0%, 27%)
Oklch
oklch(69.5% 0.047 269.8)

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

#808080

Ink Gray · Gray · Warm Gray

HEX
#808080
RGB
rgb(128, 128, 128)
HSL
hsl(0, 0%, 50%)
HSB
hsb(0, 0%, 50%)
CMYK
cmyk(0%, 0%, 0%, 50%)
Oklch
oklch(60.0% 0.000 89.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1CC3B
3B60F1

Analogous

F1723B
F1CC3B
BBF13B

Triadic

F1CC3B
3BF1CD
CD3BF1

Split-Comp.

F1CC3B
3BBBF1
723BF1

Tetradic

F1CC3B
3BF172
3B60F1
F13BBB

Contrast Matrix WCAG 2.1 Contrast

F1CC3B
C1C671
93C2B7
919CBB
808080
—
1.2
Fail
1.3
Fail
1.8
Fail
2.5
Fail
1.2
Fail
—
1.1
Fail
1.5
Fail
2.2
Fail
1.3
Fail
1.1
Fail
—
1.4
Fail
2.0
Fail
1.8
Fail
1.5
Fail
1.4
Fail
—
1.4
Fail
2.5
Fail
2.2
Fail
2.0
Fail
1.4
Fail
—
White BG
1.6Fail
1.8Fail
2.0Fail
2.7Fail
3.9AA Large
Black BG
13.4AAA
11.6AAA
10.6AAA
7.7AAA
5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E1E15E
C3C386
A7A8BA
9696B3
808080

Deuteranopia

E3E667
C3C38B
A5A1BA
9594B2
808080

Tritanopia

EF7A80
C19699
95BCBC
92AEAC
808080

Achromatopsia

C7C7C7
BBBBBB
B3B3B3
9C9C9C
808080

Shades & Tints Shades & Tints

#F1CC3B

Dark
Light

#C1C671

Dark
Light

#93C2B7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1cc3b;
  --color-2: #c1c671;
  --color-3: #93c2b7;
  --color-4: #919cbb;
  --color-5: #808080;
}

SCSS

$color-1: #f1cc3b;
$color-2: #c1c671;
$color-3: #93c2b7;
$color-4: #919cbb;
$color-5: #808080;

TAILWIND

colors: {
  'brand-1': '#f1cc3b',
  'brand-2': '#c1c671',
  'brand-3': '#93c2b7',
  'brand-4': '#919cbb',
  'brand-5': '#808080',
}

RGB Array

[241, 204, 59], [193, 198, 113], [147, 194, 183], [145, 156, 187], [128, 128, 128]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #F1CC3B, #C1C671, #93C2B7, #919CBB, #808080 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: #f1cc3b; --color-2: #c1c671; --color-3: #93c2b7; --color-4: #919cbb; --color-5: #808080. 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 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