← Back to Editor

#C4BA95 · #548587 · #546C87 · #565487 · #6F5487

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

#C4BA95

Ginger · Tan · Sunflower

HEX
#C4BA95
RGB
rgb(196, 186, 149)
HSL
hsl(47, 28%, 68%)
HSB
hsb(47, 24%, 77%)
CMYK
cmyk(0%, 5%, 24%, 23%)
Oklch
oklch(78.8% 0.051 94.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#548587

Slate Blue · SlateGray · Mint Ice

HEX
#548587
RGB
rgb(84, 133, 135)
HSL
hsl(182, 23%, 43%)
HSB
hsb(182, 38%, 53%)
CMYK
cmyk(38%, 1%, 0%, 47%)
Oklch
oklch(58.3% 0.053 199.1)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#546C87

Indigo · SlateGray · Navy Blue

HEX
#546C87
RGB
rgb(84, 108, 135)
HSL
hsl(212, 23%, 43%)
HSB
hsb(212, 38%, 53%)
CMYK
cmyk(38%, 20%, 0%, 47%)
Oklch
oklch(52.3% 0.052 251.8)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#565487

Deep Indigo · DarkSlateBlue · Navy Blue

HEX
#565487
RGB
rgb(86, 84, 135)
HSL
hsl(242, 23%, 43%)
HSB
hsb(242, 38%, 53%)
CMYK
cmyk(36%, 38%, 0%, 47%)
Oklch
oklch(47.1% 0.082 284.6)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#6F5487

Dark Plum · DimGray · Violet

HEX
#6F5487
RGB
rgb(111, 84, 135)
HSL
hsl(272, 23%, 43%)
HSB
hsb(272, 38%, 53%)
CMYK
cmyk(18%, 38%, 0%, 47%)
Oklch
oklch(49.5% 0.085 307.8)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C4BA95
97A0C4

Analogous

C4A397
C4BA95
B7C497

Triadic

C4BA95
97C4BA
BA97C4

Split-Comp.

C4BA95
97B7C4
A397C4

Tetradic

C4BA95
97C4A3
97A0C4
C497B7

Contrast Matrix WCAG 2.1 Contrast

C4BA95
548587
546C87
565487
6F5487
—
2.1
Fail
2.8
Fail
3.6
AA Large
3.3
AA Large
2.1
Fail
—
1.3
Fail
1.7
Fail
1.5
Fail
2.8
Fail
1.3
Fail
—
1.3
Fail
1.2
Fail
3.6
AA Large
1.7
Fail
1.3
Fail
—
1.1
Fail
3.3
AA Large
1.5
Fail
1.2
Fail
1.1
Fail
—
White BG
1.9Fail
4.1AA Large
5.4AA
7.0AA
6.4AA
Black BG
10.8AAA
5.1AA
3.9AA Large
3.0AA Large
3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C0C09E
696A87
5E5F80
55557B
63637B

Deuteranopia

C0C1A0
666386
5D5B7F
555578
656778

Tritanopia

C4A5A7
568686
557B7A
56716F
6E716F

Achromatopsia

B9B9B9
777777
686868
5A5A5A
626262

Shades & Tints Shades & Tints

#C4BA95

Dark
Light

#548587

Dark
Light

#546C87

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c4ba95;
  --color-2: #548587;
  --color-3: #546c87;
  --color-4: #565487;
  --color-5: #6f5487;
}

SCSS

$color-1: #c4ba95;
$color-2: #548587;
$color-3: #546c87;
$color-4: #565487;
$color-5: #6f5487;

TAILWIND

colors: {
  'brand-1': '#c4ba95',
  'brand-2': '#548587',
  'brand-3': '#546c87',
  'brand-4': '#565487',
  'brand-5': '#6f5487',
}

RGB Array

[196, 186, 149], [84, 133, 135], [84, 108, 135], [86, 84, 135], [111, 84, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C4BA95, #548587, #546C87, #565487, #6F5487 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #c4ba95; --color-2: #548587; --color-3: #546c87; --color-4: #565487; --color-5: #6f5487. 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. Restrained colors convey professionalism and trust. 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