#6B8485 + #5C9680 + #7EBF8E + #97CC91 + #D5F2C9 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#6B8485

Slate Blue · SlateGray · Mint Ice

HEX

#6B8485

RGB

rgb(107, 132, 133)

HSL

hsl(182, 11%, 47%)

HSB

hsb(182, 20%, 52%)

CMYK

cmyk(20%, 1%, 0%, 48%)

Oklch

oklch(59.4% 0.029 199.4)

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

#5C9680

Mineral Blue · CadetBlue · Olive Green

HEX

#5C9680

RGB

rgb(92, 150, 128)

HSL

hsl(157, 24%, 47%)

HSB

hsb(157, 39%, 59%)

CMYK

cmyk(39%, 0%, 15%, 41%)

Oklch

oklch(62.7% 0.070 168.0)

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

#7EBF8E

Celadon · DarkSeaGreen · Apple Green

HEX

#7EBF8E

RGB

rgb(126, 191, 142)

HSL

hsl(135, 34%, 62%)

HSB

hsb(135, 34%, 75%)

CMYK

cmyk(34%, 0%, 26%, 25%)

Oklch

oklch(74.8% 0.097 151.3)

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

#97CC91

Celadon · DarkSeaGreen · Apple Green

HEX

#97CC91

RGB

rgb(151, 204, 145)

HSL

hsl(114, 37%, 68%)

HSB

hsb(114, 29%, 80%)

CMYK

cmyk(26%, 0%, 29%, 20%)

Oklch

oklch(79.3% 0.099 142.1)

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

#D5F2C9

Emerald · LightGray · Mint Green

HEX

#D5F2C9

RGB

rgb(213, 242, 201)

HSL

hsl(102, 61%, 87%)

HSB

hsb(102, 17%, 95%)

CMYK

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

Oklch

oklch(92.9% 0.062 136.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6B8485

856C6B

Analogous

6B8579

6B8485

6B7785

Triadic

6B8485

856B84

84856B

Split-Comp.

6B8485

856B77

85796B

Tetradic

6B8485

796B85

856C6B

77856B

Contrast Matrix WCAG 2.1 Contrast

6B8485	5C9680	7EBF8E	97CC91	D5F2C9
—	1.2 Fail	1.8 Fail	2.2 Fail	3.3 AA Large
1.2 Fail	—	1.6 Fail	1.9 Fail	2.8 Fail
1.8 Fail	1.6 Fail	—	1.2 Fail	1.8 Fail
2.2 Fail	1.9 Fail	1.2 Fail	—	1.5 Fail
3.3 AA Large	2.8 Fail	1.8 Fail	1.5 Fail	—

White BG

4.0AA Large

3.4AA Large

2.2Fail

1.8Fail

1.2Fail

Black BG

5.3AA

6.1AA

9.7AAA

11.4AAA

17.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

767685

757685

9A9B9A

AEAE9F

E2E2D3

Deuteranopia

747385

726D87

96929D

ABA7A3

E0DED5

Tritanopia

6C8585

5F8A8A

81A3A5

9AABAD

D6DBDC

Achromatopsia

7D7D7D

828282

A6A6A6

B5B5B5

E5E5E5

Shades & Tints Shades & Tints

#6B8485

Dark

Light

#5C9680

Dark

Light

#7EBF8E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6b8485;
  --color-2: #5c9680;
  --color-3: #7ebf8e;
  --color-4: #97cc91;
  --color-5: #d5f2c9;
}

SCSS

$color-1: #6b8485;
$color-2: #5c9680;
$color-3: #7ebf8e;
$color-4: #97cc91;
$color-5: #d5f2c9;

TAILWIND

colors: {
  'brand-1': '#6b8485',
  'brand-2': '#5c9680',
  'brand-3': '#7ebf8e',
  'brand-4': '#97cc91',
  'brand-5': '#d5f2c9',
}

RGB Array

[107, 132, 133], [92, 150, 128], [126, 191, 142], [151, 204, 145], [213, 242, 201]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #6B8485, #5C9680, #7EBF8E, #97CC91, #D5F2C9 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: #6b8485; --color-2: #5c9680; --color-3: #7ebf8e; --color-4: #97cc91; --color-5: #d5f2c9. 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 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