#509789 + #6CAD8B + #7EBC8D + #C3CF8D + #FFD48F · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#509789

Mineral Blue · CadetBlue · Mint Ice

HEX

#509789

RGB

rgb(80, 151, 137)

HSL

hsl(168, 31%, 45%)

HSB

hsb(168, 47%, 59%)

CMYK

cmyk(47%, 0%, 9%, 41%)

Oklch

oklch(62.6% 0.075 179.4)

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

#6CAD8B

Celadon · CadetBlue · Olive Green

HEX

#6CAD8B

RGB

rgb(108, 173, 139)

HSL

hsl(149, 28%, 55%)

HSB

hsb(149, 38%, 68%)

CMYK

cmyk(38%, 0%, 20%, 32%)

Oklch

oklch(69.4% 0.084 160.3)

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

#7EBC8D

Celadon · DarkSeaGreen · Apple Green

HEX

#7EBC8D

RGB

rgb(126, 188, 141)

HSL

hsl(135, 32%, 62%)

HSB

hsb(135, 33%, 74%)

CMYK

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

Oklch

oklch(74.0% 0.093 151.2)

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

#C3CF8D

Willow Green · Tan · Apple Green

HEX

#C3CF8D

RGB

rgb(195, 207, 141)

HSL

hsl(71, 41%, 68%)

HSB

hsb(71, 32%, 81%)

CMYK

cmyk(6%, 0%, 32%, 19%)

Oklch

oklch(82.9% 0.088 116.7)

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

#FFD48F

Goose Yellow · Khaki · Peach Orange

HEX

#FFD48F

RGB

rgb(255, 212, 143)

HSL

hsl(37, 100%, 78%)

HSB

hsb(37, 44%, 100%)

CMYK

cmyk(0%, 17%, 44%, 0%)

Oklch

oklch(89.2% 0.099 78.8)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

509789

964F5D

Analogous

4F9665

509789

4F8196

Triadic

509789

884F96

96884F

Split-Comp.

509789

964F81

96654F

Tetradic

509789

654F96

964F5D

81964F

Contrast Matrix WCAG 2.1 Contrast

509789	6CAD8B	7EBC8D	C3CF8D	FFD48F
—	1.3 Fail	1.5 Fail	2.1 Fail	2.5 Fail
1.3 Fail	—	1.2 Fail	1.6 Fail	1.9 Fail
1.5 Fail	1.2 Fail	—	1.3 Fail	1.6 Fail
2.1 Fail	1.6 Fail	1.3 Fail	—	1.2 Fail
2.5 Fail	1.9 Fail	1.6 Fail	1.2 Fail	—

White BG

3.4AA Large

2.6Fail

2.2Fail

1.7Fail

1.4Fail

Black BG

6.1AA

8.0AAA

9.5AAA

12.6AAA

15.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6F6F8C

888993

999998

C8C89D

ECECA0

Deuteranopia

6B658D

848095

95919B

C8C7A1

EFF2A4

Tritanopia

548F90

6F9A9B

81A1A3

C4AAAC

FDADB0

Achromatopsia

808080

969696

A4A4A4

C4C4C4

D9D9D9

Shades & Tints Shades & Tints

#509789

Dark

Light

#6CAD8B

Dark

Light

#7EBC8D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #509789;
  --color-2: #6cad8b;
  --color-3: #7ebc8d;
  --color-4: #c3cf8d;
  --color-5: #ffd48f;
}

SCSS

$color-1: #509789;
$color-2: #6cad8b;
$color-3: #7ebc8d;
$color-4: #c3cf8d;
$color-5: #ffd48f;

TAILWIND

colors: {
  'brand-1': '#509789',
  'brand-2': '#6cad8b',
  'brand-3': '#7ebc8d',
  'brand-4': '#c3cf8d',
  'brand-5': '#ffd48f',
}

RGB Array

[80, 151, 137], [108, 173, 139], [126, 188, 141], [195, 207, 141], [255, 212, 143]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #509789, #6CAD8B, #7EBC8D, #C3CF8D, #FFD48F 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: #509789; --color-2: #6cad8b; --color-3: #7ebc8d; --color-4: #c3cf8d; --color-5: #ffd48f. 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