#88A365 + #332335 + #F22B1B + #718343 + #415E3C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#88A365

Grass Green · Gray · Olive Green

HEX

#88A365

RGB

rgb(136, 163, 101)

HSL

hsl(86, 25%, 52%)

HSB

hsb(86, 38%, 64%)

CMYK

cmyk(17%, 0%, 38%, 36%)

Oklch

oklch(67.9% 0.091 127.8)

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

#332335

Dark Plum · DarkSlateGray · Dark Purple

HEX

#332335

RGB

rgb(51, 35, 53)

HSL

hsl(293, 20%, 17%)

HSB

hsb(293, 34%, 21%)

CMYK

cmyk(4%, 34%, 0%, 79%)

Oklch

oklch(28.3% 0.039 322.7)

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

#F22B1B

Vermilion · OrangeRed · Passion Red

HEX

#F22B1B

RGB

rgb(242, 43, 27)

HSL

hsl(4, 89%, 53%)

HSB

hsb(4, 89%, 95%)

CMYK

cmyk(0%, 82%, 89%, 5%)

Oklch

oklch(61.9% 0.233 29.8)

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

#718343

Grass Green · DarkOliveGreen · Forest Green

HEX

#718343

RGB

rgb(113, 131, 67)

HSL

hsl(77, 32%, 39%)

HSB

hsb(77, 49%, 51%)

CMYK

cmyk(14%, 0%, 49%, 49%)

Oklch

oklch(58.0% 0.091 122.2)

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

#415E3C

Celadon · DarkOliveGreen · Forest Green

HEX

#415E3C

RGB

rgb(65, 94, 60)

HSL

hsl(111, 22%, 30%)

HSB

hsb(111, 36%, 37%)

CMYK

cmyk(31%, 0%, 36%, 63%)

Oklch

oklch(44.9% 0.064 140.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

88A365

8166A3

Analogous

A39F66

88A365

6AA366

Triadic

88A365

6689A3

A36689

Split-Comp.

88A365

666AA3

9F66A3

Tetradic

88A365

66A39F

8166A3

A3666A

Contrast Matrix WCAG 2.1 Contrast

88A365	332335	F22B1B	718343	415E3C
—	5.2 AA	1.5 Fail	1.5 Fail	2.6 Fail
5.2 AA	—	3.6 AA Large	3.5 AA Large	2.0 Fail
1.5 Fail	3.6 AA Large	—	1.0 Fail	1.8 Fail
1.5 Fail	3.5 AA Large	1.0 Fail	—	1.7 Fail
2.6 Fail	2.0 Fail	1.8 Fail	1.7 Fail	—

White BG

2.8Fail

14.7AAA

4.1AA Large

4.2AA Large

7.3AAA

Black BG

7.5AAA

1.4Fail

5.1AA

5.0AA

2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

949474

2C2C31

9C9A1F

797952

4E4E44

Deuteranopia

929078

2D2E30

A7B620

787656

4C4A46

Tritanopia

898082

322D2C

E82223

725F61

424B4C

Achromatopsia

949494

2A2A2A

656565

767676

515151

Shades & Tints Shades & Tints

#88A365

Dark

Light

#332335

Dark

Light

#F22B1B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #88a365;
  --color-2: #332335;
  --color-3: #f22b1b;
  --color-4: #718343;
  --color-5: #415e3c;
}

SCSS

$color-1: #88a365;
$color-2: #332335;
$color-3: #f22b1b;
$color-4: #718343;
$color-5: #415e3c;

TAILWIND

colors: {
  'brand-1': '#88a365',
  'brand-2': '#332335',
  'brand-3': '#f22b1b',
  'brand-4': '#718343',
  'brand-5': '#415e3c',
}

RGB Array

[136, 163, 101], [51, 35, 53], [242, 43, 27], [113, 131, 67], [65, 94, 60]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #88A365, #332335, #F22B1B, #718343, #415E3C 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: #88a365; --color-2: #332335; --color-3: #f22b1b; --color-4: #718343; --color-5: #415e3c. 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