#7D6679 + #3D2E0E + #692424 + #CC811B + #A19950 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#7D6679

Rose Purple · DimGray · Violet

HEX

#7D6679

RGB

rgb(125, 102, 121)

HSL

hsl(310, 10%, 45%)

HSB

hsb(310, 18%, 49%)

CMYK

cmyk(0%, 18%, 3%, 51%)

Oklch

oklch(53.9% 0.041 332.1)

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

#3D2E0E

Ochre · DarkOliveGreen · Amber Gold

HEX

#3D2E0E

RGB

rgb(61, 46, 14)

HSL

hsl(41, 63%, 15%)

HSB

hsb(41, 77%, 24%)

CMYK

cmyk(0%, 25%, 77%, 76%)

Oklch

oklch(31.1% 0.052 83.5)

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

#692424

Crimson · Maroon · Wine Red

HEX

#692424

RGB

rgb(105, 36, 36)

HSL

hsl(0, 49%, 28%)

HSB

hsb(0, 66%, 41%)

CMYK

cmyk(0%, 66%, 66%, 59%)

Oklch

oklch(36.5% 0.099 23.4)

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

#CC811B

Ochre · Chocolate · Amber Brown

HEX

#CC811B

RGB

rgb(204, 129, 27)

HSL

hsl(35, 77%, 45%)

HSB

hsb(35, 87%, 80%)

CMYK

cmyk(0%, 37%, 87%, 20%)

Oklch

oklch(66.7% 0.139 67.3)

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

#A19950

Autumn Sage · Gray · Honey Gold

HEX

#A19950

RGB

rgb(161, 153, 80)

HSL

hsl(54, 34%, 47%)

HSB

hsb(54, 50%, 63%)

CMYK

cmyk(0%, 5%, 50%, 37%)

Oklch

oklch(67.4% 0.095 103.0)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7D6679

677E6B

Analogous

77677E

7D6679

7E676F

Triadic

7D6679

7A7E67

677A7E

Split-Comp.

7D6679

6F7E67

677E77

Tetradic

7D6679

7E7767

677E6B

676F7E

Contrast Matrix WCAG 2.1 Contrast

7D6679	3D2E0E	692424	CC811B	A19950
—	2.5 Fail	2.2 Fail	1.7 Fail	1.8 Fail
2.5 Fail	—	1.2 Fail	4.2 AA Large	4.5 AA
2.2 Fail	1.2 Fail	—	3.6 AA Large	3.8 AA Large
1.7 Fail	4.2 AA Large	3.6 AA Large	—	1.1 Fail
1.8 Fail	4.5 AA	3.8 AA Large	1.1 Fail	—

White BG

5.2AA

13.2AAA

11.2AAA

3.1AA Large

2.9Fail

Black BG

4.0AA Large

1.6Fail

1.9Fail

6.7AA

7.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

737374

373616

4B4B24

ACAB34

9E9D62

Deuteranopia

747673

373818

4F5424

B0B53A

9E9F66

Tritanopia

7C7170

3C1C1D

662424

C8474B

A17073

Achromatopsia

6F6F6F

2F2F2F

393939

8C8C8C

939393

Shades & Tints Shades & Tints

#7D6679

Dark

Light

#3D2E0E

Dark

Light

#692424

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7d6679;
  --color-2: #3d2e0e;
  --color-3: #692424;
  --color-4: #cc811b;
  --color-5: #a19950;
}

SCSS

$color-1: #7d6679;
$color-2: #3d2e0e;
$color-3: #692424;
$color-4: #cc811b;
$color-5: #a19950;

TAILWIND

colors: {
  'brand-1': '#7d6679',
  'brand-2': '#3d2e0e',
  'brand-3': '#692424',
  'brand-4': '#cc811b',
  'brand-5': '#a19950',
}

RGB Array

[125, 102, 121], [61, 46, 14], [105, 36, 36], [204, 129, 27], [161, 153, 80]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7D6679, #3D2E0E, #692424, #CC811B, #A19950 is ideal for: tech websites, dark mode UIs, game UIs. 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: #7d6679; --color-2: #3d2e0e; --color-3: #692424; --color-4: #cc811b; --color-5: #a19950. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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