#53FDD8 + #E6F0B9 + #3DCCAF + #5DA18B + #7C7666 · earth - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#53FDD8

Jade · Turquoise · Lake Green

HEX

#53FDD8

RGB

rgb(83, 253, 216)

HSL

hsl(167, 98%, 66%)

HSB

hsb(167, 67%, 99%)

CMYK

cmyk(67%, 0%, 15%, 1%)

Oklch

oklch(89.8% 0.148 175.1)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#E6F0B9

Willow Green · Wheat · Mint Green

HEX

#E6F0B9

RGB

rgb(230, 240, 185)

HSL

hsl(71, 65%, 83%)

HSB

hsb(71, 23%, 94%)

CMYK

cmyk(4%, 0%, 23%, 6%)

Oklch

oklch(93.4% 0.072 116.2)

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

#3DCCAF

Mineral Blue · MediumTurquoise · Lake Green

HEX

#3DCCAF

RGB

rgb(61, 204, 175)

HSL

hsl(168, 58%, 52%)

HSB

hsb(168, 70%, 80%)

CMYK

cmyk(70%, 0%, 14%, 20%)

Oklch

oklch(76.3% 0.127 176.1)

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

#5DA18B

Mineral Blue · CadetBlue · Mint Ice

HEX

#5DA18B

RGB

rgb(93, 161, 139)

HSL

hsl(161, 27%, 50%)

HSB

hsb(161, 42%, 63%)

CMYK

cmyk(42%, 0%, 14%, 37%)

Oklch

oklch(65.7% 0.077 171.0)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#7C7666

Ochre · DimGray · Honey Gold

HEX

#7C7666

RGB

rgb(124, 118, 102)

HSL

hsl(44, 10%, 44%)

HSB

hsb(44, 18%, 49%)

CMYK

cmyk(0%, 5%, 18%, 51%)

Oklch

oklch(56.7% 0.025 89.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

53FDD8

FD5378

Analogous

53FD83

53FDD8

53CDFD

Triadic

53FDD8

D853FD

FDD853

Split-Comp.

53FDD8

FD53CD

FD8353

Tetradic

53FDD8

8353FD

FD5378

CDFD53

Contrast Matrix WCAG 2.1 Contrast

53FDD8	E6F0B9	3DCCAF	5DA18B	7C7666
—	1.1 Fail	1.6 Fail	2.4 Fail	3.5 AA Large
1.1 Fail	—	1.7 Fail	2.5 Fail	3.8 AA Large
1.6 Fail	1.7 Fail	—	1.5 Fail	2.3 Fail
2.4 Fail	2.5 Fail	1.5 Fail	—	1.5 Fail
3.5 AA Large	3.8 AA Large	2.3 Fail	1.5 Fail	—

White BG

1.3Fail

1.2Fail

2.0Fail

3.0AA Large

4.5AA

Black BG

16.4AAA

17.5AAA

10.5AAA

6.9AA

4.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9D9EE1

EAEAC6

7B7CB6

7A7B90

79796A

Deuteranopia

9386E3

EAE9CA

7368B8

777192

7A7A6B

Tritanopia

5CE8EA

E7D1D3

44BCBD

609595

7C6D6E

Achromatopsia

C6C6C6

E7E7E7

9E9E9E

8A8A8A

767676

Shades & Tints Shades & Tints

#53FDD8

Dark

Light

#E6F0B9

Dark

Light

#3DCCAF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #53fdd8;
  --color-2: #e6f0b9;
  --color-3: #3dccaf;
  --color-4: #5da18b;
  --color-5: #7c7666;
}

SCSS

$color-1: #53fdd8;
$color-2: #e6f0b9;
$color-3: #3dccaf;
$color-4: #5da18b;
$color-5: #7c7666;

TAILWIND

colors: {
  'brand-1': '#53fdd8',
  'brand-2': '#e6f0b9',
  'brand-3': '#3dccaf',
  'brand-4': '#5da18b',
  'brand-5': '#7c7666',
}

RGB Array

[83, 253, 216], [230, 240, 185], [61, 204, 175], [93, 161, 139], [124, 118, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #53FDD8, #E6F0B9, #3DCCAF, #5DA18B, #7C7666 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: #53fdd8; --color-2: #e6f0b9; --color-3: #3dccaf; --color-4: #5da18b; --color-5: #7c7666. 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 earth-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