#56BAA2 + #678F69 + #617340 + #5D462A + #351D18 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#56BAA2

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#56BAA2

RGB

rgb(86, 186, 162)

HSL

hsl(166, 42%, 53%)

HSB

hsb(166, 54%, 73%)

CMYK

cmyk(54%, 0%, 13%, 27%)

Oklch

oklch(72.2% 0.101 175.3)

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

#678F69

Celadon · Gray · Olive Green

HEX

#678F69

RGB

rgb(103, 143, 105)

HSL

hsl(123, 16%, 48%)

HSB

hsb(123, 28%, 56%)

CMYK

cmyk(28%, 0%, 27%, 44%)

Oklch

oklch(61.0% 0.072 145.9)

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

#617340

Grass Green · DarkOliveGreen · Forest Green

HEX

#617340

RGB

rgb(97, 115, 64)

HSL

hsl(81, 28%, 35%)

HSB

hsb(81, 44%, 45%)

CMYK

cmyk(16%, 0%, 44%, 55%)

Oklch

oklch(52.8% 0.077 124.9)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

#5D462A

Ochre · DarkOliveGreen · Amber Brown

HEX

#5D462A

RGB

rgb(93, 70, 42)

HSL

hsl(33, 38%, 26%)

HSB

hsb(33, 55%, 36%)

CMYK

cmyk(0%, 25%, 55%, 64%)

Oklch

oklch(41.2% 0.053 71.0)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#351D18

Crimson · Black · Deep Berry

HEX

#351D18

RGB

rgb(53, 29, 24)

HSL

hsl(10, 38%, 15%)

HSB

hsb(10, 55%, 21%)

CMYK

cmyk(0%, 45%, 55%, 79%)

Oklch

oklch(26.1% 0.039 32.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

56BAA2

B9556C

Analogous

55B970

56BAA2

559FB9

Triadic

56BAA2

A255B9

B9A255

Split-Comp.

56BAA2

B9559F

B97055

Tetradic

56BAA2

7055B9

B9556C

9FB955

Contrast Matrix WCAG 2.1 Contrast

56BAA2	678F69	617340	5D462A	351D18
—	1.6 Fail	2.2 Fail	3.8 AA Large	6.7 AA
1.6 Fail	—	1.4 Fail	2.4 Fail	4.3 AA Large
2.2 Fail	1.4 Fail	—	1.7 Fail	3.0 AA Large
3.8 AA Large	2.4 Fail	1.7 Fail	—	1.8 Fail
6.7 AA	4.3 AA Large	3.0 AA Large	1.8 Fail	—

White BG

2.3Fail

3.7AA Large

5.2AA

8.8AAA

15.7AAA

Black BG

8.9AAA

5.7AA

4.0AA Large

2.4Fail

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8182A8

787972

69694C

535331

2B2A19

Deuteranopia

7C74A9

767374

68664F

545632

2C2E19

Tritanopia

5BACAD

69797B

625658

5C3637

341A1A

Achromatopsia

999999

7F7F7F

686868

4A4A4A

242424

Shades & Tints Shades & Tints

#56BAA2

Dark

Light

#678F69

Dark

Light

#617340

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #56baa2;
  --color-2: #678f69;
  --color-3: #617340;
  --color-4: #5d462a;
  --color-5: #351d18;
}

SCSS

$color-1: #56baa2;
$color-2: #678f69;
$color-3: #617340;
$color-4: #5d462a;
$color-5: #351d18;

TAILWIND

colors: {
  'brand-1': '#56baa2',
  'brand-2': '#678f69',
  'brand-3': '#617340',
  'brand-4': '#5d462a',
  'brand-5': '#351d18',
}

RGB Array

[86, 186, 162], [103, 143, 105], [97, 115, 64], [93, 70, 42], [53, 29, 24]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #56BAA2, #678F69, #617340, #5D462A, #351D18 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: #56baa2; --color-2: #678f69; --color-3: #617340; --color-4: #5d462a; --color-5: #351d18. 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 general-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