#826E68 + #D76A48 + #BFA252 + #6A52BA + #2F2A40 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#826E68

Crimson · DimGray · Passion Red

HEX

#826E68

RGB

rgb(130, 110, 104)

HSL

hsl(14, 11%, 46%)

HSB

hsb(14, 20%, 51%)

CMYK

cmyk(0%, 15%, 20%, 49%)

Oklch

oklch(55.5% 0.027 37.3)

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

#D76A48

Vermilion · Tomato · Passion Red

HEX

#D76A48

RGB

rgb(215, 106, 72)

HSL

hsl(14, 64%, 56%)

HSB

hsb(14, 67%, 84%)

CMYK

cmyk(0%, 51%, 67%, 16%)

Oklch

oklch(64.7% 0.146 38.0)

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

#BFA252

Ginger · SandyBrown · Sunflower

HEX

#BFA252

RGB

rgb(191, 162, 82)

HSL

hsl(44, 46%, 54%)

HSB

hsb(44, 57%, 75%)

CMYK

cmyk(0%, 15%, 57%, 25%)

Oklch

oklch(72.2% 0.105 89.7)

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

#6A52BA

Deep Indigo · SlateBlue · Navy Blue

HEX

#6A52BA

RGB

rgb(106, 82, 186)

HSL

hsl(254, 43%, 53%)

HSB

hsb(254, 56%, 73%)

CMYK

cmyk(43%, 56%, 0%, 27%)

Oklch

oklch(51.7% 0.157 290.4)

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

#2F2A40

Deep Indigo · DarkSlateGray · Prussian Blue

HEX

#2F2A40

RGB

rgb(47, 42, 64)

HSL

hsl(254, 21%, 21%)

HSB

hsb(254, 34%, 25%)

CMYK

cmyk(27%, 34%, 0%, 75%)

Oklch

oklch(30.0% 0.040 294.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

826E68

687C82

Analogous

82686F

826E68

827B68

Triadic

826E68

68826E

6E6882

Split-Comp.

826E68

68827B

686F82

Tetradic

826E68

6F8268

687C82

7B6882

Contrast Matrix WCAG 2.1 Contrast

826E68	D76A48	BFA252	6A52BA	2F2A40
—	1.4 Fail	1.9 Fail	1.2 Fail	2.9 Fail
1.4 Fail	—	1.4 Fail	1.7 Fail	4.0 AA Large
1.9 Fail	1.4 Fail	—	2.4 Fail	5.6 AA
1.2 Fail	1.7 Fail	2.4 Fail	—	2.3 Fail
2.9 Fail	4.0 AA Large	5.6 AA	2.3 Fail	—

White BG

4.8AA

3.5AA Large

2.5Fail

6.0AA

13.8AAA

Black BG

4.4AA Large

6.0AA

8.5AAA

3.5AA Large

1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

797969

A8A750

B2B265

605FA1

2D2D3B

Deuteranopia

7B7C6A

AEB652

B4B66A

61639B

2D2E39

Tritanopia

816B6B

D25758

BE7578

698D89

2F3636

Achromatopsia

737373

878787

A2A2A2

656565

2E2E2E

Shades & Tints Shades & Tints

#826E68

Dark

Light

#D76A48

Dark

Light

#BFA252

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #826e68;
  --color-2: #d76a48;
  --color-3: #bfa252;
  --color-4: #6a52ba;
  --color-5: #2f2a40;
}

SCSS

$color-1: #826e68;
$color-2: #d76a48;
$color-3: #bfa252;
$color-4: #6a52ba;
$color-5: #2f2a40;

TAILWIND

colors: {
  'brand-1': '#826e68',
  'brand-2': '#d76a48',
  'brand-3': '#bfa252',
  'brand-4': '#6a52ba',
  'brand-5': '#2f2a40',
}

RGB Array

[130, 110, 104], [215, 106, 72], [191, 162, 82], [106, 82, 186], [47, 42, 64]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #826E68, #D76A48, #BFA252, #6A52BA, #2F2A40 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: #826e68; --color-2: #d76a48; --color-3: #bfa252; --color-4: #6a52ba; --color-5: #2f2a40. 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