#D75A3E + #DA6822 + #E0BA4D + #7CB241 + #323231 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D75A3E

Vermilion · Chocolate · Passion Red

HEX

#D75A3E

RGB

rgb(215, 90, 62)

HSL

hsl(11, 66%, 54%)

HSB

hsb(11, 71%, 84%)

CMYK

cmyk(0%, 58%, 71%, 16%)

Oklch

oklch(62.3% 0.164 34.1)

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

#DA6822

Tangerine · Chocolate · Amber Brown

HEX

#DA6822

RGB

rgb(218, 104, 34)

HSL

hsl(23, 73%, 49%)

HSB

hsb(23, 84%, 85%)

CMYK

cmyk(0%, 52%, 84%, 15%)

Oklch

oklch(64.5% 0.163 47.3)

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

#E0BA4D

Ginger · SandyBrown · Sunflower

HEX

#E0BA4D

RGB

rgb(224, 186, 77)

HSL

hsl(44, 70%, 59%)

HSB

hsb(44, 66%, 88%)

CMYK

cmyk(0%, 17%, 66%, 12%)

Oklch

oklch(80.2% 0.133 89.7)

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

#7CB241

Grass Green · MediumSeaGreen · Olive Green

HEX

#7CB241

RGB

rgb(124, 178, 65)

HSL

hsl(89, 47%, 48%)

HSB

hsb(89, 63%, 70%)

CMYK

cmyk(30%, 0%, 63%, 30%)

Oklch

oklch(70.2% 0.155 131.1)

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

#323231

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#323231

RGB

rgb(50, 50, 49)

HSL

hsl(60, 1%, 19%)

HSB

hsb(60, 2%, 20%)

CMYK

cmyk(0%, 0%, 2%, 80%)

Oklch

oklch(31.7% 0.002 106.5)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D75A3E

3CBBD7

Analogous

D73C6D

D75A3E

D7A63C

Triadic

D75A3E

3CD759

593CD7

Split-Comp.

D75A3E

3CD7A6

3C6DD7

Tetradic

D75A3E

6DD73C

3CBBD7

A63CD7

Contrast Matrix WCAG 2.1 Contrast

D75A3E	DA6822	E0BA4D	7CB241	323231
—	1.1 Fail	2.1 Fail	1.5 Fail	3.3 AA Large
1.1 Fail	—	1.9 Fail	1.4 Fail	3.7 AA Large
2.1 Fail	1.9 Fail	—	1.4 Fail	6.9 AA
1.5 Fail	1.4 Fail	1.4 Fail	—	5.1 AA
3.3 AA Large	3.7 AA Large	6.9 AA	5.1 AA	—

White BG

3.9AA Large

3.5AA Large

1.9Fail

2.5Fail

12.8AAA

Black BG

5.4AA

6.0AA

11.3AAA

8.3AAA

1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A1A045

A9A833

D0CF67

93945C

323231

Deuteranopia

A8B246

AFB837

D2D56E

908C63

323231

Tritanopia

D14A4B

D44043

DE7C81

7F7277

323131

Achromatopsia

7C7C7C

828282

B9B9B9

959595

323232

Shades & Tints Shades & Tints

#D75A3E

Dark

Light

#DA6822

Dark

Light

#E0BA4D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d75a3e;
  --color-2: #da6822;
  --color-3: #e0ba4d;
  --color-4: #7cb241;
  --color-5: #323231;
}

SCSS

$color-1: #d75a3e;
$color-2: #da6822;
$color-3: #e0ba4d;
$color-4: #7cb241;
$color-5: #323231;

TAILWIND

colors: {
  'brand-1': '#d75a3e',
  'brand-2': '#da6822',
  'brand-3': '#e0ba4d',
  'brand-4': '#7cb241',
  'brand-5': '#323231',
}

RGB Array

[215, 90, 62], [218, 104, 34], [224, 186, 77], [124, 178, 65], [50, 50, 49]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D75A3E, #DA6822, #E0BA4D, #7CB241, #323231 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: #d75a3e; --color-2: #da6822; --color-3: #e0ba4d; --color-4: #7cb241; --color-5: #323231. 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