← Back to Editor

#53A66A · #AEF19E · #F1F4FC · #C8CECC · #838485

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#53A66A

Celadon · MediumSeaGreen · Olive Green

HEX
#53A66A
RGB
rgb(83, 166, 106)
HSL
hsl(137, 33%, 49%)
HSB
hsb(137, 50%, 65%)
CMYK
cmyk(50%, 0%, 36%, 35%)
Oklch
oklch(65.7% 0.121 150.9)

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

#AEF19E

Emerald · LightGreen · Apple Green

HEX
#AEF19E
RGB
rgb(174, 241, 158)
HSL
hsl(108, 75%, 78%)
HSB
hsb(108, 34%, 95%)
CMYK
cmyk(28%, 0%, 34%, 5%)
Oklch
oklch(89.3% 0.129 139.7)

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

#F1F4FC

Azure · Snow · Sky Blue

HEX
#F1F4FC
RGB
rgb(241, 244, 252)
HSL
hsl(224, 65%, 97%)
HSB
hsb(224, 4%, 99%)
CMYK
cmyk(4%, 3%, 0%, 1%)
Oklch
oklch(96.7% 0.011 269.6)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

#C8CECC

Silver Gray · LightGray · Pearl Gray

HEX
#C8CECC
RGB
rgb(200, 206, 204)
HSL
hsl(160, 6%, 80%)
HSB
hsb(160, 3%, 81%)
CMYK
cmyk(3%, 0%, 1%, 19%)
Oklch
oklch(84.6% 0.007 174.3)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#838485

Ash · Gray · Warm Gray

HEX
#838485
RGB
rgb(131, 132, 133)
HSL
hsl(210, 1%, 52%)
HSB
hsb(210, 2%, 52%)
CMYK
cmyk(2%, 1%, 0%, 48%)
Oklch
oklch(61.3% 0.002 247.9)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

53A66A
A6548F

Analogous

66A654
53A66A
54A694

Triadic

53A66A
6B54A6
A66B54

Split-Comp.

53A66A
9454A6
A65466

Tetradic

53A66A
5466A6
A6548F
A69454

Contrast Matrix WCAG 2.1 Contrast

53A66A
AEF19E
F1F4FC
C8CECC
838485
—
2.3
Fail
2.7
Fail
1.9
Fail
1.3
Fail
2.3
Fail
—
1.2
Fail
1.2
Fail
2.8
Fail
2.7
Fail
1.2
Fail
—
1.5
Fail
3.4
AA Large
1.9
Fail
1.2
Fail
1.5
Fail
—
2.3
Fail
1.3
Fail
2.8
Fail
3.4
AA Large
2.3
Fail
—
White BG
3.0Fail
1.3Fail
1.1Fail
1.6Fail
3.7AA Large
Black BG
7.0AAA
15.9AAA
19.1AAA
13.2AAA
5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

777879
CBCCB2
F2F2FA
CBCBCC
838385

Deuteranopia

726C7C
C7C2B7
F2F2FA
CACACD
838385

Tritanopia

578487
B1C2C5
F1F9F8
C8CDCD
838585

Achromatopsia

868686
D4D4D4
F4F4F4
CCCCCC
848484

Shades & Tints Shades & Tints

#53A66A

Dark
Light

#AEF19E

Dark
Light

#F1F4FC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #53a66a;
  --color-2: #aef19e;
  --color-3: #f1f4fc;
  --color-4: #c8cecc;
  --color-5: #838485;
}

SCSS

$color-1: #53a66a;
$color-2: #aef19e;
$color-3: #f1f4fc;
$color-4: #c8cecc;
$color-5: #838485;

TAILWIND

colors: {
  'brand-1': '#53a66a',
  'brand-2': '#aef19e',
  'brand-3': '#f1f4fc',
  'brand-4': '#c8cecc',
  'brand-5': '#838485',
}

RGB Array

[83, 166, 106], [174, 241, 158], [241, 244, 252], [200, 206, 204], [131, 132, 133]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #53A66A, #AEF19E, #F1F4FC, #C8CECC, #838485 is ideal for: health products, baby brands, fresh-style blogs, 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: #53a66a; --color-2: #aef19e; --color-3: #f1f4fc; --color-4: #c8cecc; --color-5: #838485. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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