← Back to Editor

#C6B49E · #6A6486 · #5B3367 · #FBA85A · #FFC963

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

#C6B49E

Ginger · Tan · Warm Sun

HEX
#C6B49E
RGB
rgb(198, 180, 158)
HSL
hsl(33, 26%, 70%)
HSB
hsb(33, 20%, 78%)
CMYK
cmyk(0%, 9%, 20%, 22%)
Oklch
oklch(77.9% 0.037 72.8)

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

#6A6486

Deep Indigo · DimGray · Navy Blue

HEX
#6A6486
RGB
rgb(106, 100, 134)
HSL
hsl(251, 15%, 46%)
HSB
hsb(251, 25%, 53%)
CMYK
cmyk(21%, 25%, 0%, 47%)
Oklch
oklch(52.2% 0.053 292.5)

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

#5B3367

Dark Plum · DarkSlateBlue · Eggplant

HEX
#5B3367
RGB
rgb(91, 51, 103)
HSL
hsl(286, 34%, 30%)
HSB
hsb(286, 50%, 40%)
CMYK
cmyk(12%, 50%, 0%, 60%)
Oklch
oklch(39.3% 0.097 318.0)

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

#FBA85A

Apricot · SandyBrown · Warm Sun

HEX
#FBA85A
RGB
rgb(251, 168, 90)
HSL
hsl(29, 95%, 67%)
HSB
hsb(29, 64%, 98%)
CMYK
cmyk(0%, 33%, 64%, 2%)
Oklch
oklch(79.8% 0.136 62.0)

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

#FFC963

Ginger · SandyBrown · Warm Sun

HEX
#FFC963
RGB
rgb(255, 201, 99)
HSL
hsl(39, 100%, 69%)
HSB
hsb(39, 61%, 100%)
CMYK
cmyk(0%, 21%, 61%, 0%)
Oklch
oklch(86.5% 0.134 81.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C6B49E
9FB1C6

Analogous

C6A19F
C6B49E
C4C69F

Triadic

C6B49E
9FC6B4
B49FC6

Split-Comp.

C6B49E
9FC4C6
A19FC6

Tetradic

C6B49E
9FC6A1
9FB1C6
C69FC4

Contrast Matrix WCAG 2.1 Contrast

C6B49E
6A6486
5B3367
FBA85A
FFC963
—
2.8
Fail
4.9
AA
1.0
Fail
1.3
Fail
2.8
Fail
—
1.8
Fail
2.9
Fail
3.6
AA Large
4.9
AA
1.8
Fail
—
5.1
AA
6.5
AA
1.0
Fail
2.9
Fail
5.1
AA
—
1.3
Fail
1.3
Fail
3.6
AA Large
6.5
AA
1.3
Fail
—
White BG
2.0Fail
5.6AA
9.9AAA
1.9Fail
1.5Fail
Black BG
10.4AAA
3.8AA Large
2.1Fail
10.9AAA
13.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BEBEA3
67677E
4A495A
D7D66D
E8E77C

Deuteranopia

BFC1A5
68687C
4C4F57
DCE271
EBEF82

Tritanopia

C5A8A8
6A7776
59504E
F77C7F
FC8F93

Achromatopsia

B7B7B7
6A6A6A
454545
B8B8B8
CECECE

Shades & Tints Shades & Tints

#C6B49E

Dark
Light

#6A6486

Dark
Light

#5B3367

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c6b49e;
  --color-2: #6a6486;
  --color-3: #5b3367;
  --color-4: #fba85a;
  --color-5: #ffc963;
}

SCSS

$color-1: #c6b49e;
$color-2: #6a6486;
$color-3: #5b3367;
$color-4: #fba85a;
$color-5: #ffc963;

TAILWIND

colors: {
  'brand-1': '#c6b49e',
  'brand-2': '#6a6486',
  'brand-3': '#5b3367',
  'brand-4': '#fba85a',
  'brand-5': '#ffc963',
}

RGB Array

[198, 180, 158], [106, 100, 134], [91, 51, 103], [251, 168, 90], [255, 201, 99]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C6B49E, #6A6486, #5B3367, #FBA85A, #FFC963 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: #c6b49e; --color-2: #6a6486; --color-3: #5b3367; --color-4: #fba85a; --color-5: #ffc963. 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