← Back to Editor

#618C7B · #80917C · #A68F7A · #D6817D · #F76886

nature

A 5-color nature palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#618C7B

Mineral Blue · SlateGray · Olive Green

HEX
#618C7B
RGB
rgb(97, 140, 123)
HSL
hsl(156, 18%, 46%)
HSB
hsb(156, 31%, 55%)
CMYK
cmyk(31%, 0%, 12%, 45%)
Oklch
oklch(60.3% 0.054 168.0)

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

#80917C

Celadon · Gray · Warm Gray

HEX
#80917C
RGB
rgb(128, 145, 124)
HSL
hsl(109, 9%, 53%)
HSB
hsb(109, 14%, 57%)
CMYK
cmyk(12%, 0%, 14%, 43%)
Oklch
oklch(63.7% 0.036 139.7)

Traditional「Celadon」· Paint「Warm Gray」· Creative Urban Concrete

#A68F7A

Tangerine · Gray · Warm Sun

HEX
#A68F7A
RGB
rgb(166, 143, 122)
HSL
hsl(29, 20%, 56%)
HSB
hsb(29, 27%, 65%)
CMYK
cmyk(0%, 14%, 27%, 35%)
Oklch
oklch(66.5% 0.041 64.4)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#D6817D

Peach Pink · LightCoral · Coral Red

HEX
#D6817D
RGB
rgb(214, 129, 125)
HSL
hsl(3, 52%, 66%)
HSB
hsb(3, 42%, 84%)
CMYK
cmyk(0%, 40%, 42%, 16%)
Oklch
oklch(69.3% 0.106 23.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#F76886

Peach Pink · LightCoral · Coral Red

HEX
#F76886
RGB
rgb(247, 104, 134)
HSL
hsl(347, 90%, 69%)
HSB
hsb(347, 58%, 97%)
CMYK
cmyk(0%, 58%, 46%, 3%)
Oklch
oklch(70.2% 0.176 9.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

618C7B
8A6071

Analogous

608A64
618C7B
60868A

Triadic

618C7B
7A608A
8A7A60

Split-Comp.

618C7B
8A6086
8A6460

Tetradic

618C7B
64608A
8A6071
868A60

Contrast Matrix WCAG 2.1 Contrast

618C7B
80917C
A68F7A
D6817D
F76886
—
1.1
Fail
1.2
Fail
1.3
Fail
1.3
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.2
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.1
Fail
1.3
Fail
1.2
Fail
1.1
Fail
—
1.0
Fail
1.3
Fail
1.2
Fail
1.1
Fail
1.0
Fail
—
White BG
3.8AA Large
3.4AA Large
3.1AA Large
2.9Fail
2.9Fail
Black BG
5.5AA
6.3AA
6.8AA
7.3AAA
7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

74747F
878881
9C9C7F
B1B07E
B9B87F

Deuteranopia

716E80
868582
9D9F80
B6BC7E
C1CC7D

Tritanopia

638283
818586
A58384
D27F7F
F07978

Achromatopsia

7D7D7D
8A8A8A
939393
9A9A9A
969696

Shades & Tints Shades & Tints

#618C7B

Dark
Light

#80917C

Dark
Light

#A68F7A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #618c7b;
  --color-2: #80917c;
  --color-3: #a68f7a;
  --color-4: #d6817d;
  --color-5: #f76886;
}

SCSS

$color-1: #618c7b;
$color-2: #80917c;
$color-3: #a68f7a;
$color-4: #d6817d;
$color-5: #f76886;

TAILWIND

colors: {
  'brand-1': '#618c7b',
  'brand-2': '#80917c',
  'brand-3': '#a68f7a',
  'brand-4': '#d6817d',
  'brand-5': '#f76886',
}

RGB Array

[97, 140, 123], [128, 145, 124], [166, 143, 122], [214, 129, 125], [247, 104, 134]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #618C7B, #80917C, #A68F7A, #D6817D, #F76886 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: #618c7b; --color-2: #80917c; --color-3: #a68f7a; --color-4: #d6817d; --color-5: #f76886. 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