#7C6726 + #E14924 + #A1AF64 + #E2C15A + #B3A82C · 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

#7C6726

Ochre · DarkOliveGreen · Honey Gold

HEX

#7C6726

RGB

rgb(124, 103, 38)

HSL

hsl(45, 53%, 32%)

HSB

hsb(45, 69%, 49%)

CMYK

cmyk(0%, 17%, 69%, 51%)

Oklch

oklch(52.1% 0.087 91.0)

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

#E14924

Vermilion · Chocolate · Passion Red

HEX

#E14924

RGB

rgb(225, 73, 36)

HSL

hsl(12, 76%, 51%)

HSB

hsb(12, 84%, 88%)

CMYK

cmyk(0%, 68%, 84%, 12%)

Oklch

oklch(61.5% 0.195 34.5)

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

#A1AF64

Grass Green · DarkSeaGreen · Olive Green

HEX

#A1AF64

RGB

rgb(161, 175, 100)

HSL

hsl(71, 32%, 54%)

HSB

hsb(71, 43%, 69%)

CMYK

cmyk(8%, 0%, 43%, 31%)

Oklch

oklch(72.6% 0.100 117.6)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#E2C15A

Ginger · SandyBrown · Sunflower

HEX

#E2C15A

RGB

rgb(226, 193, 90)

HSL

hsl(45, 70%, 62%)

HSB

hsb(45, 60%, 89%)

CMYK

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

Oklch

oklch(82.0% 0.127 91.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#B3A82C

Autumn Sage · GoldenRod · Honey Gold

HEX

#B3A82C

RGB

rgb(179, 168, 44)

HSL

hsl(55, 61%, 44%)

HSB

hsb(55, 75%, 70%)

CMYK

cmyk(0%, 6%, 75%, 30%)

Oklch

oklch(72.0% 0.138 104.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7C6726

263C7D

Analogous

7D3C26

7C6726

677D26

Triadic

7C6726

267D67

67267D

Split-Comp.

7C6726

26677D

3C267D

Tetradic

7C6726

267D3C

263C7D

7D2667

Contrast Matrix WCAG 2.1 Contrast

7C6726	E14924	A1AF64	E2C15A	B3A82C
—	1.4 Fail	2.3 Fail	3.1 AA Large	2.2 Fail
1.4 Fail	—	1.7 Fail	2.3 Fail	1.7 Fail
2.3 Fail	1.7 Fail	—	1.4 Fail	1.0 Fail
3.1 AA Large	2.3 Fail	1.4 Fail	—	1.4 Fail
2.2 Fail	1.7 Fail	1.0 Fail	1.4 Fail	—

White BG

5.5AA

4.1AA Large

2.4Fail

1.7Fail

2.5Fail

Black BG

3.8AA Large

5.2AA

8.8AAA

12.0AAA

8.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

737336

9F9E2D

A7A776

D4D373

AEAE4A

Deuteranopia

74763A

A8B32F

A6A57B

D6D879

AFB051

Tritanopia

7B4245

D93436

A28488

E0878B

B26267

Achromatopsia

666666

727272

A2A2A2

BFBFBF

9D9D9D

Shades & Tints Shades & Tints

#7C6726

Dark

Light

#E14924

Dark

Light

#A1AF64

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7c6726;
  --color-2: #e14924;
  --color-3: #a1af64;
  --color-4: #e2c15a;
  --color-5: #b3a82c;
}

SCSS

$color-1: #7c6726;
$color-2: #e14924;
$color-3: #a1af64;
$color-4: #e2c15a;
$color-5: #b3a82c;

TAILWIND

colors: {
  'brand-1': '#7c6726',
  'brand-2': '#e14924',
  'brand-3': '#a1af64',
  'brand-4': '#e2c15a',
  'brand-5': '#b3a82c',
}

RGB Array

[124, 103, 38], [225, 73, 36], [161, 175, 100], [226, 193, 90], [179, 168, 44]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #7C6726, #E14924, #A1AF64, #E2C15A, #B3A82C 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: #7c6726; --color-2: #e14924; --color-3: #a1af64; --color-4: #e2c15a; --color-5: #b3a82c. 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 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