#689657 + #155047 + #6F987D + #291717 + #58342B · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#689657

Celadon · DimGray · Olive Green

HEX

#689657

RGB

rgb(104, 150, 87)

HSL

hsl(104, 27%, 46%)

HSB

hsb(104, 42%, 59%)

CMYK

cmyk(31%, 0%, 42%, 41%)

Oklch

oklch(62.4% 0.103 137.6)

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

#155047

Mineral Blue · DarkSlateGray · Peacock Green

HEX

#155047

RGB

rgb(21, 80, 71)

HSL

hsl(171, 58%, 20%)

HSB

hsb(171, 74%, 31%)

CMYK

cmyk(74%, 0%, 11%, 69%)

Oklch

oklch(39.1% 0.061 180.7)

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

#6F987D

Celadon · Gray · Olive Green

HEX

#6F987D

RGB

rgb(111, 152, 125)

HSL

hsl(140, 17%, 52%)

HSB

hsb(140, 27%, 60%)

CMYK

cmyk(27%, 0%, 18%, 40%)

Oklch

oklch(64.2% 0.060 155.5)

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

#291717

Crimson · Black · Deep Berry

HEX

#291717

RGB

rgb(41, 23, 23)

HSL

hsl(0, 28%, 13%)

HSB

hsb(0, 44%, 16%)

CMYK

cmyk(0%, 44%, 44%, 84%)

Oklch

oklch(22.9% 0.029 19.6)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#58342B

Crimson · DarkOliveGreen · Wine Red

HEX

#58342B

RGB

rgb(88, 52, 43)

HSL

hsl(12, 34%, 26%)

HSB

hsb(12, 51%, 35%)

CMYK

cmyk(0%, 41%, 51%, 65%)

Oklch

oklch(36.7% 0.055 34.8)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

689657

845695

Analogous

869556

689657

569564

Triadic

689657

566795

955667

Split-Comp.

689657

645695

955686

Tetradic

689657

568695

845695

956456

Contrast Matrix WCAG 2.1 Contrast

689657	155047	6F987D	291717	58342B
—	2.7 Fail	1.1 Fail	5.0 AA	3.1 AA Large
2.7 Fail	—	2.8 Fail	1.8 Fail	1.2 Fail
1.1 Fail	2.8 Fail	—	5.3 AA	3.3 AA Large
5.0 AA	1.8 Fail	5.3 AA	—	1.6 Fail
3.1 AA Large	1.2 Fail	3.3 AA Large	1.6 Fail	—

White BG

3.4AA Large

9.2AAA

3.2AA Large

17.1AAA

10.8AAA

Black BG

6.1AA

2.3Fail

6.5AA

1.2Fail

1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7C7C66

2F2F49

818184

212117

48482D

Deuteranopia

79766A

2B274A

7E7B85

222417

4B4D2E

Tritanopia

6A7275

184B4B

71898A

281717

562F2F

Achromatopsia

818181

3D3D3D

898989

1C1C1C

3E3E3E

Shades & Tints Shades & Tints

#689657

Dark

Light

#155047

Dark

Light

#6F987D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #689657;
  --color-2: #155047;
  --color-3: #6f987d;
  --color-4: #291717;
  --color-5: #58342b;
}

SCSS

$color-1: #689657;
$color-2: #155047;
$color-3: #6f987d;
$color-4: #291717;
$color-5: #58342b;

TAILWIND

colors: {
  'brand-1': '#689657',
  'brand-2': '#155047',
  'brand-3': '#6f987d',
  'brand-4': '#291717',
  'brand-5': '#58342b',
}

RGB Array

[104, 150, 87], [21, 80, 71], [111, 152, 125], [41, 23, 23], [88, 52, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #689657, #155047, #6F987D, #291717, #58342B is ideal for: tech websites, dark mode UIs, game UIs. 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: #689657; --color-2: #155047; --color-3: #6f987d; --color-4: #291717; --color-5: #58342b. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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