← Back to Editor

#C1CCCE · #B4B438 · #F3F308 · #B3B334 · #C1C8C9

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#C1CCCE

Sky Blue · Silver · Glacier Blue

HEX
#C1CCCE
RGB
rgb(193, 204, 206)
HSL
hsl(189, 12%, 78%)
HSB
hsb(189, 6%, 81%)
CMYK
cmyk(6%, 1%, 0%, 19%)
Oklch
oklch(83.7% 0.012 209.8)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#B4B438

Autumn Sage · GoldenRod · Honey Gold

HEX
#B4B438
RGB
rgb(180, 180, 56)
HSL
hsl(60, 53%, 46%)
HSB
hsb(60, 69%, 71%)
CMYK
cmyk(0%, 0%, 69%, 29%)
Oklch
oklch(74.7% 0.142 109.4)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#F3F308

Autumn Sage · Yellow · Honey Gold

HEX
#F3F308
RGB
rgb(243, 243, 8)
HSL
hsl(60, 94%, 49%)
HSB
hsb(60, 97%, 95%)
CMYK
cmyk(0%, 0%, 97%, 5%)
Oklch
oklch(93.3% 0.203 109.8)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#B3B334

Autumn Sage · GoldenRod · Honey Gold

HEX
#B3B334
RGB
rgb(179, 179, 52)
HSL
hsl(60, 55%, 45%)
HSB
hsb(60, 71%, 70%)
CMYK
cmyk(0%, 0%, 71%, 30%)
Oklch
oklch(74.4% 0.144 109.4)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#C1C8C9

Silver Gray · Silver · Pearl Gray

HEX
#C1C8C9
RGB
rgb(193, 200, 201)
HSL
hsl(187, 7%, 77%)
HSB
hsb(187, 4%, 79%)
CMYK
cmyk(4%, 0%, 0%, 21%)
Oklch
oklch(82.8% 0.008 207.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C1CCCE
CEC2C0

Analogous

C0CEC9
C1CCCE
C0C5CE

Triadic

C1CCCE
CEC0CC
CCCEC0

Split-Comp.

C1CCCE
CEC0C5
CEC9C0

Tetradic

C1CCCE
C9C0CE
CEC2C0
C5CEC0

Contrast Matrix WCAG 2.1 Contrast

C1CCCE
B4B438
F3F308
B3B334
C1C8C9
—
1.3
Fail
1.4
Fail
1.4
Fail
1.0
Fail
1.3
Fail
—
1.9
Fail
1.0
Fail
1.3
Fail
1.4
Fail
1.9
Fail
—
1.9
Fail
1.4
Fail
1.4
Fail
1.0
Fail
1.9
Fail
—
1.3
Fail
1.0
Fail
1.3
Fail
1.4
Fail
1.3
Fail
—
White BG
1.6Fail
2.2Fail
1.2Fail
2.2Fail
1.7Fail
Black BG
12.8AAA
9.5AAA
17.6AAA
9.4AAA
12.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C6C6CE
B4B456
F3F341
B3B353
C4C4C9

Deuteranopia

C5C4CD
B4B45D
F3F34E
B3B35A
C4C3C9

Tritanopia

C2CDCD
B46E73
F36E78
B36B70
C1C9C9

Achromatopsia

C9C9C9
A6A6A6
D8D8D8
A5A5A5
C6C6C6

Shades & Tints Shades & Tints

#C1CCCE

Dark
Light

#B4B438

Dark
Light

#F3F308

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c1ccce;
  --color-2: #b4b438;
  --color-3: #f3f308;
  --color-4: #b3b334;
  --color-5: #c1c8c9;
}

SCSS

$color-1: #c1ccce;
$color-2: #b4b438;
$color-3: #f3f308;
$color-4: #b3b334;
$color-5: #c1c8c9;

TAILWIND

colors: {
  'brand-1': '#c1ccce',
  'brand-2': '#b4b438',
  'brand-3': '#f3f308',
  'brand-4': '#b3b334',
  'brand-5': '#c1c8c9',
}

RGB Array

[193, 204, 206], [180, 180, 56], [243, 243, 8], [179, 179, 52], [193, 200, 201]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C1CCCE, #B4B438, #F3F308, #B3B334, #C1C8C9 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: #c1ccce; --color-2: #b4b438; --color-3: #f3f308; --color-4: #b3b334; --color-5: #c1c8c9. 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 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