← Back to Editor

#6C6348 · #A15C67 · #CF5F84 · #EA8453 · #FFBC4D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#6C6348

Ochre · DimGray · Honey Gold

HEX
#6C6348
RGB
rgb(108, 99, 72)
HSL
hsl(45, 20%, 35%)
HSB
hsb(45, 33%, 42%)
CMYK
cmyk(0%, 8%, 33%, 58%)
Oklch
oklch(50.1% 0.042 91.8)

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

#A15C67

Crimson · Gray · Passion Red

HEX
#A15C67
RGB
rgb(161, 92, 103)
HSL
hsl(350, 27%, 50%)
HSB
hsb(350, 43%, 63%)
CMYK
cmyk(0%, 43%, 36%, 37%)
Oklch
oklch(55.7% 0.091 10.2)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#CF5F84

Dark Violet · LightCoral · Rose Pink

HEX
#CF5F84
RGB
rgb(207, 95, 132)
HSL
hsl(340, 54%, 59%)
HSB
hsb(340, 54%, 81%)
CMYK
cmyk(0%, 54%, 36%, 19%)
Oklch
oklch(63.3% 0.146 1.4)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#EA8453

Apricot · Coral · Warm Sun

HEX
#EA8453
RGB
rgb(234, 132, 83)
HSL
hsl(19, 78%, 62%)
HSB
hsb(19, 65%, 92%)
CMYK
cmyk(0%, 44%, 65%, 8%)
Oklch
oklch(71.5% 0.141 45.4)

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

#FFBC4D

Ginger · SandyBrown · Warm Sun

HEX
#FFBC4D
RGB
rgb(255, 188, 77)
HSL
hsl(37, 100%, 65%)
HSB
hsb(37, 70%, 100%)
CMYK
cmyk(0%, 26%, 70%, 0%)
Oklch
oklch(83.8% 0.146 76.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6C6348
47506B

Analogous

6B5047
6C6348
626B47

Triadic

6C6348
476B62
62476B

Split-Comp.

6C6348
47626B
50476B

Tetradic

6C6348
476B50
47506B
6B4762

Contrast Matrix WCAG 2.1 Contrast

6C6348
A15C67
CF5F84
EA8453
FFBC4D
—
1.2
Fail
1.6
Fail
2.3
Fail
3.6
AA Large
1.2
Fail
—
1.3
Fail
1.9
Fail
3.0
Fail
1.6
Fail
1.3
Fail
—
1.4
Fail
2.2
Fail
2.3
Fail
1.9
Fail
1.4
Fail
—
1.6
Fail
3.6
AA Large
3.0
Fail
2.2
Fail
1.6
Fail
—
White BG
6.0AA
5.0AA
3.7AA Large
2.7Fail
1.7Fail
Black BG
3.5AA Large
4.2AA Large
5.6AA
7.9AAA
12.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

68684F
838364
9F9D7B
BEBD5F
E2E168

Deuteranopia

696950
878C64
A5AD79
C4CB62
E6EB6E

Tritanopia

6C5455
9E6262
C97472
E5686A
FC7D82

Achromatopsia

636363
727272
858585
9D9D9D
C3C3C3

Shades & Tints Shades & Tints

#6C6348

Dark
Light

#A15C67

Dark
Light

#CF5F84

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6c6348;
  --color-2: #a15c67;
  --color-3: #cf5f84;
  --color-4: #ea8453;
  --color-5: #ffbc4d;
}

SCSS

$color-1: #6c6348;
$color-2: #a15c67;
$color-3: #cf5f84;
$color-4: #ea8453;
$color-5: #ffbc4d;

TAILWIND

colors: {
  'brand-1': '#6c6348',
  'brand-2': '#a15c67',
  'brand-3': '#cf5f84',
  'brand-4': '#ea8453',
  'brand-5': '#ffbc4d',
}

RGB Array

[108, 99, 72], [161, 92, 103], [207, 95, 132], [234, 132, 83], [255, 188, 77]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #6C6348, #A15C67, #CF5F84, #EA8453, #FFBC4D 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: #6c6348; --color-2: #a15c67; --color-3: #cf5f84; --color-4: #ea8453; --color-5: #ffbc4d. 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