← Back to Editor

#BACF95 · #9ABE7E · #E3DBAA · #E7BD13 · #E64A33

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#BACF95

Willow Green · Tan · Apple Green

HEX
#BACF95
RGB
rgb(186, 207, 149)
HSL
hsl(82, 38%, 70%)
HSB
hsb(82, 28%, 81%)
CMYK
cmyk(10%, 0%, 28%, 19%)
Oklch
oklch(82.4% 0.081 124.3)

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

#9ABE7E

Celadon · DarkSeaGreen · Apple Green

HEX
#9ABE7E
RGB
rgb(154, 190, 126)
HSL
hsl(94, 33%, 62%)
HSB
hsb(94, 34%, 75%)
CMYK
cmyk(19%, 0%, 34%, 25%)
Oklch
oklch(75.9% 0.096 132.2)

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

#E3DBAA

Fresh Green · Wheat · Lemon Cream

HEX
#E3DBAA
RGB
rgb(227, 219, 170)
HSL
hsl(52, 50%, 78%)
HSB
hsb(52, 25%, 89%)
CMYK
cmyk(0%, 4%, 25%, 11%)
Oklch
oklch(88.6% 0.065 99.8)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#E7BD13

Ochre · GoldenRod · Honey Gold

HEX
#E7BD13
RGB
rgb(231, 189, 19)
HSL
hsl(48, 85%, 49%)
HSB
hsb(48, 92%, 91%)
CMYK
cmyk(0%, 18%, 92%, 9%)
Oklch
oklch(81.2% 0.163 92.3)

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

#E64A33

Vermilion · Tomato · Passion Red

HEX
#E64A33
RGB
rgb(230, 74, 51)
HSL
hsl(8, 78%, 55%)
HSB
hsb(8, 78%, 90%)
CMYK
cmyk(0%, 68%, 78%, 10%)
Oklch
oklch(62.6% 0.196 31.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BACF95
AB95D0

Analogous

D0C895
BACF95
9DD095

Triadic

BACF95
95BAD0
D095BA

Split-Comp.

BACF95
959DD0
C895D0

Tetradic

BACF95
95D0C8
AB95D0
D0959D

Contrast Matrix WCAG 2.1 Contrast

BACF95
9ABE7E
E3DBAA
E7BD13
E64A33
—
1.2
Fail
1.2
Fail
1.1
Fail
2.3
Fail
1.2
Fail
—
1.5
Fail
1.2
Fail
1.9
Fail
1.2
Fail
1.5
Fail
—
1.3
Fail
2.8
Fail
1.1
Fail
1.2
Fail
1.3
Fail
—
2.2
Fail
2.3
Fail
1.9
Fail
2.8
Fail
2.2
Fail
—
White BG
1.7Fail
2.1Fail
1.4Fail
1.8Fail
3.9AA Large
Black BG
12.4AAA
10.0AAA
15.0AAA
11.7AAA
5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C3C3A3
AAAA8D
E0DFB6
D5D43C
A2A139

Deuteranopia

C2C0A6
A8A591
E0E1B9
D7DA46
ACB73A

Tritanopia

BBAEB1
9C9A9C
E3BFC1
E55D64
DE3D3E

Achromatopsia

C2C2C2
ACACAC
D8D8D8
B6B6B6
767676

Shades & Tints Shades & Tints

#BACF95

Dark
Light

#9ABE7E

Dark
Light

#E3DBAA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bacf95;
  --color-2: #9abe7e;
  --color-3: #e3dbaa;
  --color-4: #e7bd13;
  --color-5: #e64a33;
}

SCSS

$color-1: #bacf95;
$color-2: #9abe7e;
$color-3: #e3dbaa;
$color-4: #e7bd13;
$color-5: #e64a33;

TAILWIND

colors: {
  'brand-1': '#bacf95',
  'brand-2': '#9abe7e',
  'brand-3': '#e3dbaa',
  'brand-4': '#e7bd13',
  'brand-5': '#e64a33',
}

RGB Array

[186, 207, 149], [154, 190, 126], [227, 219, 170], [231, 189, 19], [230, 74, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BACF95, #9ABE7E, #E3DBAA, #E7BD13, #E64A33 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: #bacf95; --color-2: #9abe7e; --color-3: #e3dbaa; --color-4: #e7bd13; --color-5: #e64a33. 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