#4F2B2A + #467A43 + #21A537 + #E07C16 + #F53F2F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#4F2B2A

Crimson · DarkSlateGray · Wine Red

HEX

#4F2B2A

RGB

rgb(79, 43, 42)

HSL

hsl(2, 31%, 24%)

HSB

hsb(2, 47%, 31%)

CMYK

cmyk(0%, 46%, 47%, 69%)

Oklch

oklch(33.5% 0.054 22.0)

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

#467A43

Celadon · DarkOliveGreen · Forest Green

HEX

#467A43

RGB

rgb(70, 122, 67)

HSL

hsl(117, 29%, 37%)

HSB

hsb(117, 45%, 48%)

CMYK

cmyk(43%, 0%, 45%, 52%)

Oklch

oklch(52.8% 0.101 142.9)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#21A537

Pine Green · ForestGreen · Forest Green

HEX

#21A537

RGB

rgb(33, 165, 55)

HSL

hsl(130, 67%, 39%)

HSB

hsb(130, 80%, 65%)

CMYK

cmyk(80%, 0%, 67%, 35%)

Oklch

oklch(63.2% 0.185 145.1)

Traditional「Pine Green」· Paint「Forest Green」· Creative Blush Sunrise

#E07C16

Ochre · Chocolate · Amber Brown

HEX

#E07C16

RGB

rgb(224, 124, 22)

HSL

hsl(30, 82%, 48%)

HSB

hsb(30, 90%, 88%)

CMYK

cmyk(0%, 45%, 90%, 12%)

Oklch

oklch(68.4% 0.158 57.7)

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

#F53F2F

Vermilion · Tomato · Passion Red

HEX

#F53F2F

RGB

rgb(245, 63, 47)

HSL

hsl(5, 91%, 57%)

HSB

hsb(5, 81%, 96%)

CMYK

cmyk(0%, 74%, 81%, 4%)

Oklch

oklch(64.0% 0.220 29.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4F2B2A

2A4F50

Analogous

502A3C

4F2B2A

503E2A

Triadic

4F2B2A

2A502B

2B2A50

Split-Comp.

4F2B2A

2A503E

2A3C50

Tetradic

4F2B2A

3C502A

2A4F50

3E2A50

Contrast Matrix WCAG 2.1 Contrast

4F2B2A	467A43	21A537	E07C16	F53F2F
—	2.4 Fail	3.8 AA Large	4.1 AA Large	3.3 AA Large
2.4 Fail	—	1.6 Fail	1.7 Fail	1.4 Fail
3.8 AA Large	1.6 Fail	—	1.1 Fail	1.2 Fail
4.1 AA Large	1.7 Fail	1.1 Fail	—	1.3 Fail
3.3 AA Large	1.4 Fail	1.2 Fail	1.3 Fail	—

White BG

12.3AAA

5.1AA

3.2AA Large

3.0Fail

3.7AA Large

Black BG

1.7Fail

4.1AA Large

6.5AA

7.1AAA

5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3F3F2A

5D5D50

5A5B52

B5B42F

A6A533

Deuteranopia

42442A

5A5654

534958

BBC235

B1BE34

Tritanopia

4D2A2A

495B5D

28676B

DB4246

EC3637

Achromatopsia

363636

646464

717171

8E8E8E

747474

Shades & Tints Shades & Tints

#4F2B2A

Dark

Light

#467A43

Dark

Light

#21A537

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4f2b2a;
  --color-2: #467a43;
  --color-3: #21a537;
  --color-4: #e07c16;
  --color-5: #f53f2f;
}

SCSS

$color-1: #4f2b2a;
$color-2: #467a43;
$color-3: #21a537;
$color-4: #e07c16;
$color-5: #f53f2f;

TAILWIND

colors: {
  'brand-1': '#4f2b2a',
  'brand-2': '#467a43',
  'brand-3': '#21a537',
  'brand-4': '#e07c16',
  'brand-5': '#f53f2f',
}

RGB Array

[79, 43, 42], [70, 122, 67], [33, 165, 55], [224, 124, 22], [245, 63, 47]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4F2B2A, #467A43, #21A537, #E07C16, #F53F2F 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: #4f2b2a; --color-2: #467a43; --color-3: #21a537; --color-4: #e07c16; --color-5: #f53f2f. 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