#C5406D + #564742 + #8B7635 + #C1C39C + #51B18B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#C5406D

Dark Violet · MediumVioletRed · Rose Pink

HEX

#C5406D

RGB

rgb(197, 64, 109)

HSL

hsl(340, 53%, 51%)

HSB

hsb(340, 68%, 77%)

CMYK

cmyk(0%, 68%, 45%, 23%)

Oklch

oklch(57.2% 0.172 3.6)

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

#564742

Tangerine · DarkOliveGreen · Amber Brown

HEX

#564742

RGB

rgb(86, 71, 66)

HSL

hsl(15, 13%, 30%)

HSB

hsb(15, 23%, 34%)

CMYK

cmyk(0%, 17%, 23%, 66%)

Oklch

oklch(41.2% 0.022 39.3)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#8B7635

Ochre · Sienna · Honey Gold

HEX

#8B7635

RGB

rgb(139, 118, 53)

HSL

hsl(45, 45%, 38%)

HSB

hsb(45, 62%, 55%)

CMYK

cmyk(0%, 15%, 62%, 45%)

Oklch

oklch(57.2% 0.088 91.5)

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

#C1C39C

Fresh Green · Tan · Sunflower

HEX

#C1C39C

RGB

rgb(193, 195, 156)

HSL

hsl(63, 25%, 69%)

HSB

hsb(63, 20%, 76%)

CMYK

cmyk(1%, 0%, 20%, 24%)

Oklch

oklch(80.6% 0.053 109.9)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#51B18B

Mineral Blue · CadetBlue · Olive Green

HEX

#51B18B

RGB

rgb(81, 177, 139)

HSL

hsl(156, 38%, 51%)

HSB

hsb(156, 54%, 69%)

CMYK

cmyk(54%, 0%, 21%, 31%)

Oklch

oklch(69.2% 0.108 164.9)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C5406D

40C498

Analogous

C440AE

C5406D

C45640

Triadic

C5406D

6CC440

406CC4

Split-Comp.

C5406D

40C456

40AEC4

Tetradic

C5406D

AEC440

40C498

5640C4

Contrast Matrix WCAG 2.1 Contrast

C5406D	564742	8B7635	C1C39C	51B18B
—	1.8 Fail	1.1 Fail	2.7 Fail	1.9 Fail
1.8 Fail	—	2.0 Fail	4.9 AA	3.4 AA Large
1.1 Fail	2.0 Fail	—	2.4 Fail	1.7 Fail
2.7 Fail	4.9 AA	2.4 Fail	—	1.4 Fail
1.9 Fail	3.4 AA Large	1.7 Fail	1.4 Fail	—

White BG

4.9AA

8.8AAA

4.4AA Large

1.8Fail

2.6Fail

Black BG

4.3AA Large

2.4Fail

4.7AA

11.6AAA

8.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8B8A62

504F43

828245

C2C2A5

7B7B94

Deuteranopia

939D60

505244

838549

C2C2A8

756E96

Tritanopia

BE5A58

554444

8A5154

C1ADAF

569B9D

Achromatopsia

6D6D6D

4B4B4B

757575

BEBEBE

909090

Shades & Tints Shades & Tints

#C5406D

Dark

Light

#564742

Dark

Light

#8B7635

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c5406d;
  --color-2: #564742;
  --color-3: #8b7635;
  --color-4: #c1c39c;
  --color-5: #51b18b;
}

SCSS

$color-1: #c5406d;
$color-2: #564742;
$color-3: #8b7635;
$color-4: #c1c39c;
$color-5: #51b18b;

TAILWIND

colors: {
  'brand-1': '#c5406d',
  'brand-2': '#564742',
  'brand-3': '#8b7635',
  'brand-4': '#c1c39c',
  'brand-5': '#51b18b',
}

RGB Array

[197, 64, 109], [86, 71, 66], [139, 118, 53], [193, 195, 156], [81, 177, 139]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C5406D, #564742, #8B7635, #C1C39C, #51B18B 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: #c5406d; --color-2: #564742; --color-3: #8b7635; --color-4: #c1c39c; --color-5: #51b18b. 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