#CEFF85 + #A2D481 + #72B587 + #517B8A + #61518A · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#CEFF85

Willow Green · Khaki · Apple Green

HEX

#CEFF85

RGB

rgb(206, 255, 133)

HSL

hsl(84, 100%, 76%)

HSB

hsb(84, 48%, 100%)

CMYK

cmyk(19%, 0%, 48%, 0%)

Oklch

oklch(94.0% 0.159 127.2)

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

#A2D481

Celadon · DarkSeaGreen · Apple Green

HEX

#A2D481

RGB

rgb(162, 212, 129)

HSL

hsl(96, 49%, 67%)

HSB

hsb(96, 39%, 83%)

CMYK

cmyk(24%, 0%, 39%, 17%)

Oklch

oklch(81.5% 0.122 133.8)

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

#72B587

Celadon · DarkSeaGreen · Olive Green

HEX

#72B587

RGB

rgb(114, 181, 135)

HSL

hsl(139, 31%, 58%)

HSB

hsb(139, 37%, 71%)

CMYK

cmyk(37%, 0%, 25%, 29%)

Oklch

oklch(71.6% 0.096 153.4)

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

#517B8A

Slate Blue · SlateGray · Mint Ice

HEX

#517B8A

RGB

rgb(81, 123, 138)

HSL

hsl(196, 26%, 43%)

HSB

hsb(196, 41%, 54%)

CMYK

cmyk(41%, 11%, 0%, 46%)

Oklch

oklch(55.8% 0.052 222.4)

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

#61518A

Deep Indigo · DarkSlateBlue · Navy Blue

HEX

#61518A

RGB

rgb(97, 81, 138)

HSL

hsl(257, 26%, 43%)

HSB

hsb(257, 41%, 54%)

CMYK

cmyk(30%, 41%, 0%, 46%)

Oklch

oklch(47.6% 0.091 295.7)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CEFF85

B685FF

Analogous

FFF385

CEFF85

91FF85

Triadic

CEFF85

85CEFF

FF85CE

Split-Comp.

CEFF85

8591FF

F385FF

Tetradic

CEFF85

85FFF3

B685FF

FF8591

Contrast Matrix WCAG 2.1 Contrast

CEFF85	A2D481	72B587	517B8A	61518A
—	1.5 Fail	2.1 Fail	4.0 AA Large	6.0 AA
1.5 Fail	—	1.4 Fail	2.7 Fail	4.0 AA Large
2.1 Fail	1.4 Fail	—	1.9 Fail	2.8 Fail
4.0 AA Large	2.7 Fail	1.9 Fail	—	1.5 Fail
6.0 AA	4.0 AA Large	2.8 Fail	1.5 Fail	—

White BG

1.1Fail

1.7Fail

2.4Fail

4.6AA

6.9AA

Black BG

18.3AAA

12.3AAA

8.7AAA

4.6AA

3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E4A3

B8B895

8F9092

636486

5A5A7C

Deuteranopia

E0DDAA

B5B19A

8B8695

615E86

5B5C79

Tritanopia

D0BABF

A5A5A8

759B9D

538483

60716F

Achromatopsia

E2E2E2

BCBCBC

9C9C9C

707070

5C5C5C

Shades & Tints Shades & Tints

#CEFF85

Dark

Light

#A2D481

Dark

Light

#72B587

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ceff85;
  --color-2: #a2d481;
  --color-3: #72b587;
  --color-4: #517b8a;
  --color-5: #61518a;
}

SCSS

$color-1: #ceff85;
$color-2: #a2d481;
$color-3: #72b587;
$color-4: #517b8a;
$color-5: #61518a;

TAILWIND

colors: {
  'brand-1': '#ceff85',
  'brand-2': '#a2d481',
  'brand-3': '#72b587',
  'brand-4': '#517b8a',
  'brand-5': '#61518a',
}

RGB Array

[206, 255, 133], [162, 212, 129], [114, 181, 135], [81, 123, 138], [97, 81, 138]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #CEFF85, #A2D481, #72B587, #517B8A, #61518A 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: #ceff85; --color-2: #a2d481; --color-3: #72b587; --color-4: #517b8a; --color-5: #61518a. 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