← Back to Editor

#ECF245 · #AAE447 · #80CA98 · #5C9682 · #184755

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#ECF245

Fresh Green · GreenYellow · Sunflower

HEX
#ECF245
RGB
rgb(236, 242, 69)
HSL
hsl(62, 87%, 61%)
HSB
hsb(62, 71%, 95%)
CMYK
cmyk(2%, 0%, 71%, 5%)
Oklch
oklch(92.8% 0.184 111.5)

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

#AAE447

Grass Green · GreenYellow · Olive Green

HEX
#AAE447
RGB
rgb(170, 228, 71)
HSL
hsl(82, 74%, 59%)
HSB
hsb(82, 69%, 89%)
CMYK
cmyk(25%, 0%, 69%, 11%)
Oklch
oklch(85.0% 0.192 127.7)

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

#80CA98

Celadon · DarkSeaGreen · Apple Green

HEX
#80CA98
RGB
rgb(128, 202, 152)
HSL
hsl(139, 41%, 65%)
HSB
hsb(139, 37%, 79%)
CMYK
cmyk(37%, 0%, 25%, 21%)
Oklch
oklch(77.7% 0.103 153.8)

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

#5C9682

Mineral Blue · CadetBlue · Olive Green

HEX
#5C9682
RGB
rgb(92, 150, 130)
HSL
hsl(159, 24%, 47%)
HSB
hsb(159, 39%, 59%)
CMYK
cmyk(39%, 0%, 13%, 41%)
Oklch
oklch(62.7% 0.069 170.1)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#184755

Lake Blue · DarkSlateGray · Peacock Green

HEX
#184755
RGB
rgb(24, 71, 85)
HSL
hsl(194, 56%, 21%)
HSB
hsb(194, 72%, 33%)
CMYK
cmyk(72%, 16%, 0%, 67%)
Oklch
oklch(37.3% 0.055 221.0)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECF245
4B45F2

Analogous

F2A145
ECF245
96F245

Triadic

ECF245
45ECF2
F245EC

Split-Comp.

ECF245
4596F2
A145F2

Tetradic

ECF245
45F2A1
4B45F2
F24596

Contrast Matrix WCAG 2.1 Contrast

ECF245
AAE447
80CA98
5C9682
184755
—
1.2
Fail
1.6
Fail
2.8
Fail
8.4
AAA
1.2
Fail
—
1.3
Fail
2.3
Fail
6.7
AA
1.6
Fail
1.3
Fail
—
1.8
Fail
5.2
AA
2.8
Fail
2.3
Fail
1.8
Fail
—
3.0
Fail
8.4
AAA
6.7
AA
5.2
AA
3.0
Fail
—
White BG
1.2Fail
1.5Fail
1.9Fail
3.4AA Large
10.1AAA
Black BG
17.4AAA
13.9AAA
10.8AAA
6.1AA
2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

EFEF6F
C3C46D
A0A1A4
757687
2C2D52

Deuteranopia

EEEE79
C0BB76
9C96A7
726D88
2A2651

Tritanopia

EC9097
AD8B92
84AEB0
5F8B8C
1A4F4E

Achromatopsia

DCDCDC
C1C1C1
AEAEAE
828282
3B3B3B

Shades & Tints Shades & Tints

#ECF245

Dark
Light

#AAE447

Dark
Light

#80CA98

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ecf245;
  --color-2: #aae447;
  --color-3: #80ca98;
  --color-4: #5c9682;
  --color-5: #184755;
}

SCSS

$color-1: #ecf245;
$color-2: #aae447;
$color-3: #80ca98;
$color-4: #5c9682;
$color-5: #184755;

TAILWIND

colors: {
  'brand-1': '#ecf245',
  'brand-2': '#aae447',
  'brand-3': '#80ca98',
  'brand-4': '#5c9682',
  'brand-5': '#184755',
}

RGB Array

[236, 242, 69], [170, 228, 71], [128, 202, 152], [92, 150, 130], [24, 71, 85]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ECF245, #AAE447, #80CA98, #5C9682, #184755 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #ecf245; --color-2: #aae447; --color-3: #80ca98; --color-4: #5c9682; --color-5: #184755. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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