#E1230F + #A3E6C3 + #9ED649 + #95A879 + #8F7A61 · coffee - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#E1230F

Vermilion · Crimson · Passion Red

HEX

#E1230F

RGB

rgb(225, 35, 15)

HSL

hsl(6, 88%, 47%)

HSB

hsb(6, 93%, 88%)

CMYK

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

Oklch

oklch(58.3% 0.223 30.4)

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

#A3E6C3

Emerald · LightBlue · Apple Green

HEX

#A3E6C3

RGB

rgb(163, 230, 195)

HSL

hsl(149, 57%, 77%)

HSB

hsb(149, 29%, 90%)

CMYK

cmyk(29%, 0%, 15%, 10%)

Oklch

oklch(87.1% 0.083 161.2)

Traditional「Emerald」· Paint「Apple Green」· Creative Mint Breeze

#9ED649

Grass Green · GreenYellow · Olive Green

HEX

#9ED649

RGB

rgb(158, 214, 73)

HSL

hsl(84, 63%, 56%)

HSB

hsb(84, 66%, 84%)

CMYK

cmyk(26%, 0%, 66%, 16%)

Oklch

oklch(81.0% 0.179 128.5)

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

#95A879

Grass Green · DarkSeaGreen · Olive Green

HEX

#95A879

RGB

rgb(149, 168, 121)

HSL

hsl(84, 21%, 57%)

HSB

hsb(84, 28%, 66%)

CMYK

cmyk(11%, 0%, 28%, 34%)

Oklch

oklch(70.5% 0.069 126.0)

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

#8F7A61

Ochre · Gray · Amber Brown

HEX

#8F7A61

RGB

rgb(143, 122, 97)

HSL

hsl(33, 19%, 47%)

HSB

hsb(33, 32%, 56%)

CMYK

cmyk(0%, 15%, 32%, 44%)

Oklch

oklch(59.2% 0.045 71.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E1230F

0ECCE1

Analogous

E10E63

E1230F

E18D0E

Triadic

E1230F

0EE123

230EE1

Split-Comp.

E1230F

0EE18D

0E63E1

Tetradic

E1230F

63E10E

0ECCE1

8D0EE1

Contrast Matrix WCAG 2.1 Contrast

E1230F	A3E6C3	9ED649	95A879	8F7A61
—	3.3 AA Large	2.7 Fail	1.8 Fail	1.2 Fail
3.3 AA Large	—	1.2 Fail	1.8 Fail	2.9 Fail
2.7 Fail	1.2 Fail	—	1.5 Fail	2.4 Fail
1.8 Fail	1.8 Fail	1.5 Fail	—	1.6 Fail
1.2 Fail	2.9 Fail	2.4 Fail	1.6 Fail	—

White BG

4.7AA

1.4Fail

1.7Fail

2.6Fail

4.1AA Large

Black BG

4.4AA Large

14.7AAA

12.2AAA

8.2AAA

5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8F8D14

C0C1CB

B6B76B

9D9D84

868667

Deuteranopia

9AA815

BCB7CE

B3AF73

9C9B87

878969

Tritanopia

D81819

A6D2D4

A1868C

968D8F

8E6C6D

Achromatopsia

5A5A5A

CECECE

B5B5B5

9D9D9D

7D7D7D

Shades & Tints Shades & Tints

#E1230F

Dark

Light

#A3E6C3

Dark

Light

#9ED649

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e1230f;
  --color-2: #a3e6c3;
  --color-3: #9ed649;
  --color-4: #95a879;
  --color-5: #8f7a61;
}

SCSS

$color-1: #e1230f;
$color-2: #a3e6c3;
$color-3: #9ed649;
$color-4: #95a879;
$color-5: #8f7a61;

TAILWIND

colors: {
  'brand-1': '#e1230f',
  'brand-2': '#a3e6c3',
  'brand-3': '#9ed649',
  'brand-4': '#95a879',
  'brand-5': '#8f7a61',
}

RGB Array

[225, 35, 15], [163, 230, 195], [158, 214, 73], [149, 168, 121], [143, 122, 97]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #E1230F, #A3E6C3, #9ED649, #95A879, #8F7A61 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: #e1230f; --color-2: #a3e6c3; --color-3: #9ed649; --color-4: #95a879; --color-5: #8f7a61. 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 coffee-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