#7AA39F + #CFE3E1 + #EBFFFD + #E6D597 + #C4ADA1 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#7AA39F

Mineral Blue · CadetBlue · Lake Green

HEX

#7AA39F

RGB

rgb(122, 163, 159)

HSL

hsl(174, 18%, 56%)

HSB

hsb(174, 25%, 64%)

CMYK

cmyk(25%, 0%, 2%, 36%)

Oklch

oklch(68.4% 0.045 188.7)

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

#CFE3E1

Jade · LightGray · Glacier Blue

HEX

#CFE3E1

RGB

rgb(207, 227, 225)

HSL

hsl(174, 26%, 85%)

HSB

hsb(174, 9%, 89%)

CMYK

cmyk(9%, 0%, 1%, 11%)

Oklch

oklch(90.0% 0.021 189.5)

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

#EBFFFD

Jade · White · Glacier Blue

HEX

#EBFFFD

RGB

rgb(235, 255, 253)

HSL

hsl(174, 100%, 96%)

HSB

hsb(174, 8%, 100%)

CMYK

cmyk(8%, 0%, 1%, 0%)

Oklch

oklch(98.5% 0.021 189.6)

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

#E6D597

Goose Yellow · Khaki · Sunflower

HEX

#E6D597

RGB

rgb(230, 213, 151)

HSL

hsl(47, 61%, 75%)

HSB

hsb(47, 34%, 90%)

CMYK

cmyk(0%, 7%, 34%, 10%)

Oklch

oklch(87.2% 0.082 94.6)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#C4ADA1

Apricot · Tan · Warm Sun

HEX

#C4ADA1

RGB

rgb(196, 173, 161)

HSL

hsl(21, 23%, 70%)

HSB

hsb(21, 18%, 77%)

CMYK

cmyk(0%, 12%, 18%, 23%)

Oklch

oklch(76.4% 0.032 49.4)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7AA39F

A37B7F

Analogous

7BA38B

7AA39F

7B93A3

Triadic

7AA39F

9F7BA3

A39F7B

Split-Comp.

7AA39F

A37B93

A38B7B

Tetradic

7AA39F

8B7BA3

A37B7F

93A37B

Contrast Matrix WCAG 2.1 Contrast

7AA39F	CFE3E1	EBFFFD	E6D597	C4ADA1
—	2.1 Fail	2.7 Fail	1.9 Fail	1.3 Fail
2.1 Fail	—	1.3 Fail	1.1 Fail	1.6 Fail
2.7 Fail	1.3 Fail	—	1.4 Fail	2.1 Fail
1.9 Fail	1.1 Fail	1.4 Fail	—	1.5 Fail
1.3 Fail	1.6 Fail	2.1 Fail	1.5 Fail	—

White BG

2.8Fail

1.3Fail

1.0Fail

1.5Fail

2.1Fail

Black BG

7.6AAA

15.7AAA

20.3AAA

14.3AAA

9.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8C8CA0

D8D8E1

F4F4FD

DFDEA6

BABAA4

Deuteranopia

8986A0

D7D5E2

F3F1FE

E0E1AA

BBBDA5

Tritanopia

7CA1A1

D0E2E2

ECFEFE

E5B2B4

C3A6A7

Achromatopsia

969696

DDDDDD

F9F9F9

D3D3D3

B3B3B3

Shades & Tints Shades & Tints

#7AA39F

Dark

Light

#CFE3E1

Dark

Light

#EBFFFD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7aa39f;
  --color-2: #cfe3e1;
  --color-3: #ebfffd;
  --color-4: #e6d597;
  --color-5: #c4ada1;
}

SCSS

$color-1: #7aa39f;
$color-2: #cfe3e1;
$color-3: #ebfffd;
$color-4: #e6d597;
$color-5: #c4ada1;

TAILWIND

colors: {
  'brand-1': '#7aa39f',
  'brand-2': '#cfe3e1',
  'brand-3': '#ebfffd',
  'brand-4': '#e6d597',
  'brand-5': '#c4ada1',
}

RGB Array

[122, 163, 159], [207, 227, 225], [235, 255, 253], [230, 213, 151], [196, 173, 161]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #7AA39F, #CFE3E1, #EBFFFD, #E6D597, #C4ADA1 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: #7aa39f; --color-2: #cfe3e1; --color-3: #ebfffd; --color-4: #e6d597; --color-5: #c4ada1. 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 nature-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