#E1FAE7 + #A7E3D9 + #D1D2A8 + #7FCAC3 + #AFA792 · space - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E1FAE7

Emerald · Beige · Mint Green

HEX

#E1FAE7

RGB

rgb(225, 250, 231)

HSL

hsl(134, 71%, 93%)

HSB

hsb(134, 10%, 98%)

CMYK

cmyk(10%, 0%, 8%, 2%)

Oklch

oklch(96.2% 0.036 152.9)

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

#A7E3D9

Jade · LightBlue · Glacier Blue

HEX

#A7E3D9

RGB

rgb(167, 227, 217)

HSL

hsl(170, 52%, 77%)

HSB

hsb(170, 26%, 89%)

CMYK

cmyk(26%, 0%, 4%, 11%)

Oklch

oklch(87.2% 0.063 183.4)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#D1D2A8

Fresh Green · Silver · Sunflower

HEX

#D1D2A8

RGB

rgb(209, 210, 168)

HSL

hsl(61, 32%, 74%)

HSB

hsb(61, 20%, 82%)

CMYK

cmyk(0%, 0%, 20%, 18%)

Oklch

oklch(85.2% 0.056 108.7)

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

#7FCAC3

Jade · MediumAquaMarine · Lake Green

HEX

#7FCAC3

RGB

rgb(127, 202, 195)

HSL

hsl(174, 41%, 65%)

HSB

hsb(174, 37%, 79%)

CMYK

cmyk(37%, 0%, 3%, 21%)

Oklch

oklch(78.8% 0.075 188.2)

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

#AFA792

Ginger · DarkGray · Sunflower

HEX

#AFA792

RGB

rgb(175, 167, 146)

HSL

hsl(43, 15%, 63%)

HSB

hsb(43, 17%, 69%)

CMYK

cmyk(0%, 5%, 17%, 31%)

Oklch

oklch(72.9% 0.031 89.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E1FAE7

FAE0F4

Analogous

E7FAE0

E1FAE7

E0FAF3

Triadic

E1FAE7

E6E0FA

FAE6E0

Split-Comp.

E1FAE7

F3E0FA

FAE0E7

Tetradic

E1FAE7

E0E7FA

FAE0F4

FAF3E0

Contrast Matrix WCAG 2.1 Contrast

E1FAE7	A7E3D9	D1D2A8	7FCAC3	AFA792
—	1.3 Fail	1.4 Fail	1.7 Fail	2.2 Fail
1.3 Fail	—	1.1 Fail	1.3 Fail	1.7 Fail
1.4 Fail	1.1 Fail	—	1.2 Fail	1.5 Fail
1.7 Fail	1.3 Fail	1.2 Fail	—	1.3 Fail
2.2 Fail	1.7 Fail	1.5 Fail	1.3 Fail	—

White BG

1.1Fail

1.4Fail

1.6Fail

1.9Fail

2.4Fail

Black BG

19.0AAA

14.6AAA

13.5AAA

11.1AAA

8.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECECEC

C1C2DB

D1D1B2

9FA0C5

ACAB97

Deuteranopia

EAE9ED

BEB9DC

D1D1B5

9B96C5

ACAD98

Tritanopia

E2EFF0

AADDDE

D1BABC

83C6C6

AF9B9C

Achromatopsia

F0F0F0

D0D0D0

CDCDCD

B3B3B3

A7A7A7

Shades & Tints Shades & Tints

#E1FAE7

Dark

Light

#A7E3D9

Dark

Light

#D1D2A8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e1fae7;
  --color-2: #a7e3d9;
  --color-3: #d1d2a8;
  --color-4: #7fcac3;
  --color-5: #afa792;
}

SCSS

$color-1: #e1fae7;
$color-2: #a7e3d9;
$color-3: #d1d2a8;
$color-4: #7fcac3;
$color-5: #afa792;

TAILWIND

colors: {
  'brand-1': '#e1fae7',
  'brand-2': '#a7e3d9',
  'brand-3': '#d1d2a8',
  'brand-4': '#7fcac3',
  'brand-5': '#afa792',
}

RGB Array

[225, 250, 231], [167, 227, 217], [209, 210, 168], [127, 202, 195], [175, 167, 146]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #E1FAE7, #A7E3D9, #D1D2A8, #7FCAC3, #AFA792 is ideal for: health products, baby brands, fresh-style blogs. 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: #e1fae7; --color-2: #a7e3d9; --color-3: #d1d2a8; --color-4: #7fcac3; --color-5: #afa792. 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. 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 space-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