#476378 + #D9BC56 + #8D5932 + #A6D8A7 + #A61964 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#476378

Slate Blue · DimGray · Prussian Blue

HEX

#476378

RGB

rgb(71, 99, 120)

HSL

hsl(206, 26%, 37%)

HSB

hsb(206, 41%, 47%)

CMYK

cmyk(41%, 18%, 0%, 53%)

Oklch

oklch(48.6% 0.047 241.3)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#D9BC56

Ginger · SandyBrown · Sunflower

HEX

#D9BC56

RGB

rgb(217, 188, 86)

HSL

hsl(47, 63%, 59%)

HSB

hsb(47, 60%, 85%)

CMYK

cmyk(0%, 13%, 60%, 15%)

Oklch

oklch(80.1% 0.125 93.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#8D5932

Tangerine · Sienna · Amber Brown

HEX

#8D5932

RGB

rgb(141, 89, 50)

HSL

hsl(26, 48%, 37%)

HSB

hsb(26, 65%, 55%)

CMYK

cmyk(0%, 37%, 65%, 45%)

Oklch

oklch(51.4% 0.087 56.1)

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

#A6D8A7

Celadon · LightGreen · Apple Green

HEX

#A6D8A7

RGB

rgb(166, 216, 167)

HSL

hsl(121, 39%, 75%)

HSB

hsb(121, 23%, 85%)

CMYK

cmyk(23%, 0%, 23%, 15%)

Oklch

oklch(83.4% 0.085 145.3)

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

#A61964

Rose Purple · MediumVioletRed · Camellia

HEX

#A61964

RGB

rgb(166, 25, 100)

HSL

hsl(328, 74%, 37%)

HSB

hsb(328, 85%, 65%)

CMYK

cmyk(0%, 85%, 40%, 35%)

Oklch

oklch(48.4% 0.183 354.9)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

476378

775B46

Analogous

467774

476378

464977

Triadic

476378

774662

627746

Split-Comp.

476378

774649

777446

Tetradic

476378

744677

775B46

497746

Contrast Matrix WCAG 2.1 Contrast

476378	D9BC56	8D5932	A6D8A7	A61964
—	3.4 AA Large	1.1 Fail	3.9 AA Large	1.1 Fail
3.4 AA Large	—	3.1 AA Large	1.2 Fail	3.8 AA Large
1.1 Fail	3.1 AA Large	—	3.6 AA Large	1.2 Fail
3.9 AA Large	1.2 Fail	3.6 AA Large	—	4.4 AA Large
1.1 Fail	3.8 AA Large	1.2 Fail	4.4 AA Large	—

White BG

6.3AA

1.9Fail

5.8AA

1.6Fail

7.1AAA

Black BG

3.3AA Large

11.3AAA

3.6AA Large

13.0AAA

2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

535373

CCCC6F

76763B

BCBCB3

696852

Deuteranopia

524F72

CED075

7A7D3E

B9B5B6

717C4E

Tritanopia

486F6E

D88286

8A4345

A9BCBE

9F4440

Achromatopsia

5D5D5D

B9B9B9

646464

C3C3C3

4C4C4C

Shades & Tints Shades & Tints

#476378

Dark

Light

#D9BC56

Dark

Light

#8D5932

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #476378;
  --color-2: #d9bc56;
  --color-3: #8d5932;
  --color-4: #a6d8a7;
  --color-5: #a61964;
}

SCSS

$color-1: #476378;
$color-2: #d9bc56;
$color-3: #8d5932;
$color-4: #a6d8a7;
$color-5: #a61964;

TAILWIND

colors: {
  'brand-1': '#476378',
  'brand-2': '#d9bc56',
  'brand-3': '#8d5932',
  'brand-4': '#a6d8a7',
  'brand-5': '#a61964',
}

RGB Array

[71, 99, 120], [217, 188, 86], [141, 89, 50], [166, 216, 167], [166, 25, 100]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #476378, #D9BC56, #8D5932, #A6D8A7, #A61964 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: #476378; --color-2: #d9bc56; --color-3: #8d5932; --color-4: #a6d8a7; --color-5: #a61964. 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