#568B77 + #A6DBC0 + #20AAD2 + #A9DAED + #CC1C78 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#568B77

Mineral Blue · SlateGray · Olive Green

HEX

#568B77

RGB

rgb(86, 139, 119)

HSL

hsl(157, 24%, 44%)

HSB

hsb(157, 38%, 55%)

CMYK

cmyk(38%, 0%, 14%, 45%)

Oklch

oklch(59.3% 0.065 168.2)

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

#A6DBC0

Celadon · Silver · Apple Green

HEX

#A6DBC0

RGB

rgb(166, 219, 192)

HSL

hsl(149, 42%, 75%)

HSB

hsb(149, 24%, 86%)

CMYK

cmyk(24%, 0%, 12%, 14%)

Oklch

oklch(84.7% 0.066 162.4)

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

#20AAD2

Lake Blue · LightSeaGreen · Mint Ice

HEX

#20AAD2

RGB

rgb(32, 170, 210)

HSL

hsl(193, 74%, 47%)

HSB

hsb(193, 85%, 82%)

CMYK

cmyk(85%, 19%, 0%, 18%)

Oklch

oklch(68.7% 0.122 223.7)

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

#A9DAED

Sky Blue · LightBlue · Glacier Blue

HEX

#A9DAED

RGB

rgb(169, 218, 237)

HSL

hsl(197, 65%, 80%)

HSB

hsb(197, 29%, 93%)

CMYK

cmyk(29%, 8%, 0%, 7%)

Oklch

oklch(86.0% 0.057 223.6)

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

#CC1C78

Rose Purple · MediumVioletRed · Camellia

HEX

#CC1C78

RGB

rgb(204, 28, 120)

HSL

hsl(329, 76%, 45%)

HSB

hsb(329, 86%, 80%)

CMYK

cmyk(0%, 86%, 41%, 20%)

Oklch

oklch(56.0% 0.215 356.2)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

568B77

8B556A

Analogous

558B5C

568B77

55858B

Triadic

568B77

76558B

8B7655

Split-Comp.

568B77

8B5585

8B5C55

Tetradic

568B77

5C558B

8B556A

858B55

Contrast Matrix WCAG 2.1 Contrast

568B77	A6DBC0	20AAD2	A9DAED	CC1C78
—	2.5 Fail	1.4 Fail	2.6 Fail	1.3 Fail
2.5 Fail	—	1.7 Fail	1.0 Fail	3.4 AA Large
1.4 Fail	1.7 Fail	—	1.8 Fail	1.9 Fail
2.6 Fail	1.0 Fail	1.8 Fail	—	3.5 AA Large
1.3 Fail	3.4 AA Large	1.9 Fail	3.5 AA Large	—

White BG

3.9AA Large

1.6Fail

2.7Fail

1.5Fail

5.2AA

Black BG

5.4AA

13.5AAA

7.7AAA

13.9AAA

4.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

6D6D7C

BDBDC7

5C5DC8

BEBFE8

807E62

Deuteranopia

6A667D

BAB6C8

5449C6

BBB8E7

8A975C

Tritanopia

598081

A9CCCD

27C1BF

ABE5E4

C3504C

Achromatopsia

797979

C8C8C8

858585

CECECE

5B5B5B

Shades & Tints Shades & Tints

#568B77

Dark

Light

#A6DBC0

Dark

Light

#20AAD2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #568b77;
  --color-2: #a6dbc0;
  --color-3: #20aad2;
  --color-4: #a9daed;
  --color-5: #cc1c78;
}

SCSS

$color-1: #568b77;
$color-2: #a6dbc0;
$color-3: #20aad2;
$color-4: #a9daed;
$color-5: #cc1c78;

TAILWIND

colors: {
  'brand-1': '#568b77',
  'brand-2': '#a6dbc0',
  'brand-3': '#20aad2',
  'brand-4': '#a9daed',
  'brand-5': '#cc1c78',
}

RGB Array

[86, 139, 119], [166, 219, 192], [32, 170, 210], [169, 218, 237], [204, 28, 120]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #568B77, #A6DBC0, #20AAD2, #A9DAED, #CC1C78 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: #568b77; --color-2: #a6dbc0; --color-3: #20aad2; --color-4: #a9daed; --color-5: #cc1c78. 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