← Back to Editor

#5B676C · #C5CBBF · #D3DA4C · #FFB300 · #FF69D4

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

#5B676C

Slate Blue · DimGray · Charcoal

HEX
#5B676C
RGB
rgb(91, 103, 108)
HSL
hsl(198, 9%, 39%)
HSB
hsb(198, 16%, 42%)
CMYK
cmyk(16%, 5%, 0%, 58%)
Oklch
oklch(50.5% 0.017 224.7)

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

#C5CBBF

Celadon · Silver · Apple Green

HEX
#C5CBBF
RGB
rgb(197, 203, 191)
HSL
hsl(90, 10%, 77%)
HSB
hsb(90, 6%, 80%)
CMYK
cmyk(3%, 0%, 6%, 20%)
Oklch
oklch(83.4% 0.018 128.7)

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

#D3DA4C

Autumn Sage · GreenYellow · Sunflower

HEX
#D3DA4C
RGB
rgb(211, 218, 76)
HSL
hsl(63, 66%, 58%)
HSB
hsb(63, 65%, 85%)
CMYK
cmyk(3%, 0%, 65%, 15%)
Oklch
oklch(85.7% 0.161 112.1)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#FFB300

Ochre · Orange · Honey Gold

HEX
#FFB300
RGB
rgb(255, 179, 0)
HSL
hsl(42, 100%, 50%)
HSB
hsb(42, 100%, 100%)
CMYK
cmyk(0%, 30%, 100%, 0%)
Oklch
oklch(81.8% 0.171 77.9)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#FF69D4

Mauve · Orchid · Lilac Purple

HEX
#FF69D4
RGB
rgb(255, 105, 212)
HSL
hsl(317, 100%, 71%)
HSB
hsb(317, 59%, 100%)
CMYK
cmyk(0%, 59%, 17%, 0%)
Oklch
oklch(74.0% 0.215 340.3)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5B676C
6C605A

Analogous

5A6C69
5B676C
5A5E6C

Triadic

5B676C
6C5A67
676C5A

Split-Comp.

5B676C
6C5A5E
6C695A

Tetradic

5B676C
695A6C
6C605A
5E6C5A

Contrast Matrix WCAG 2.1 Contrast

5B676C
C5CBBF
D3DA4C
FFB300
FF69D4
—
3.5
AA Large
3.9
AA Large
3.2
AA Large
2.3
Fail
3.5
AA Large
—
1.1
Fail
1.1
Fail
1.5
Fail
3.9
AA Large
1.1
Fail
—
1.2
Fail
1.7
Fail
3.2
AA Large
1.1
Fail
1.2
Fail
—
1.4
Fail
2.3
Fail
1.5
Fail
1.7
Fail
1.4
Fail
—
White BG
5.8AA
1.7Fail
1.5Fail
1.8Fail
2.6Fail
Black BG
3.6AA Large
12.7AAA
13.9AAA
11.7AAA
8.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

60606B
C8C8C2
D6D66E
DEDD2B
BEBDBA

Deuteranopia

605F6B
C7C7C3
D6D577
E3E836
C7D2B4

Tritanopia

5C6A6A
C5C4C5
D3898F
FB4E55
F8A6A1

Achromatopsia

646464
C8C8C8
C8C8C8
B5B5B5
A2A2A2

Shades & Tints Shades & Tints

#5B676C

Dark
Light

#C5CBBF

Dark
Light

#D3DA4C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5b676c;
  --color-2: #c5cbbf;
  --color-3: #d3da4c;
  --color-4: #ffb300;
  --color-5: #ff69d4;
}

SCSS

$color-1: #5b676c;
$color-2: #c5cbbf;
$color-3: #d3da4c;
$color-4: #ffb300;
$color-5: #ff69d4;

TAILWIND

colors: {
  'brand-1': '#5b676c',
  'brand-2': '#c5cbbf',
  'brand-3': '#d3da4c',
  'brand-4': '#ffb300',
  'brand-5': '#ff69d4',
}

RGB Array

[91, 103, 108], [197, 203, 191], [211, 218, 76], [255, 179, 0], [255, 105, 212]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5B676C, #C5CBBF, #D3DA4C, #FFB300, #FF69D4 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: #5b676c; --color-2: #c5cbbf; --color-3: #d3da4c; --color-4: #ffb300; --color-5: #ff69d4. 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