#7A5C20 + #862B26 + #632727 + #2C1D22 + #130215 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#7A5C20

Ochre · Sienna · Honey Gold

HEX

#7A5C20

RGB

rgb(122, 92, 32)

HSL

hsl(40, 58%, 30%)

HSB

hsb(40, 74%, 48%)

CMYK

cmyk(0%, 25%, 74%, 52%)

Oklch

oklch(49.4% 0.086 81.5)

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

#862B26

Crimson · Brown · Wine Red

HEX

#862B26

RGB

rgb(134, 43, 38)

HSL

hsl(3, 56%, 34%)

HSB

hsb(3, 72%, 53%)

CMYK

cmyk(0%, 68%, 72%, 47%)

Oklch

oklch(42.6% 0.126 26.9)

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

#632727

Crimson · Maroon · Wine Red

HEX

#632727

RGB

rgb(99, 39, 39)

HSL

hsl(0, 43%, 27%)

HSB

hsb(0, 61%, 39%)

CMYK

cmyk(0%, 61%, 61%, 61%)

Oklch

oklch(35.9% 0.087 22.5)

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

#2C1D22

Dark Violet · Black · Raspberry

HEX

#2C1D22

RGB

rgb(44, 29, 34)

HSL

hsl(340, 21%, 14%)

HSB

hsb(340, 34%, 17%)

CMYK

cmyk(0%, 34%, 23%, 83%)

Oklch

oklch(25.1% 0.025 357.3)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

#130215

Royal Purple · Black · Dark Purple

HEX

#130215

RGB

rgb(19, 2, 21)

HSL

hsl(294, 83%, 5%)

HSB

hsb(294, 90%, 8%)

CMYK

cmyk(10%, 90%, 0%, 92%)

Oklch

oklch(14.0% 0.053 324.1)

Traditional「Royal Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7A5C20

203E79

Analogous

792F20

7A5C20

6A7920

Triadic

7A5C20

20795B

5B2079

Split-Comp.

7A5C20

206A79

2F2079

Tetradic

7A5C20

20792F

203E79

79206A

Contrast Matrix WCAG 2.1 Contrast

7A5C20	862B26	632727	2C1D22	130215
—	1.4 Fail	1.8 Fail	2.6 Fail	3.2 AA Large
1.4 Fail	—	1.3 Fail	1.8 Fail	2.3 Fail
1.8 Fail	1.3 Fail	—	1.4 Fail	1.8 Fail
2.6 Fail	1.8 Fail	1.4 Fail	—	1.2 Fail
3.2 AA Large	2.3 Fail	1.8 Fail	1.2 Fail	—

White BG

6.2AA

8.8AAA

11.4AAA

16.1AAA

20.1AAA

Black BG

3.4AA Large

2.4Fail

1.9Fail

1.3Fail

1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6D6D2F

5F5E27

494827

262521

0C0B10

Deuteranopia

6F7132

646B28

4D5127

262821

0D0E0F

Tritanopia

783A3D

812828

602727

2B2020

120D0C

Achromatopsia

5E5E5E

464646

393939

222222

090909

Shades & Tints Shades & Tints

#7A5C20

Dark

Light

#862B26

Dark

Light

#632727

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7a5c20;
  --color-2: #862b26;
  --color-3: #632727;
  --color-4: #2c1d22;
  --color-5: #130215;
}

SCSS

$color-1: #7a5c20;
$color-2: #862b26;
$color-3: #632727;
$color-4: #2c1d22;
$color-5: #130215;

TAILWIND

colors: {
  'brand-1': '#7a5c20',
  'brand-2': '#862b26',
  'brand-3': '#632727',
  'brand-4': '#2c1d22',
  'brand-5': '#130215',
}

RGB Array

[122, 92, 32], [134, 43, 38], [99, 39, 39], [44, 29, 34], [19, 2, 21]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #7A5C20, #862B26, #632727, #2C1D22, #130215 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: #7a5c20; --color-2: #862b26; --color-3: #632727; --color-4: #2c1d22; --color-5: #130215. 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 warm-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