#67786F + #596347 + #5E562F + #694420 + #420B1F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#67786F

Celadon · DimGray · Warm Gray

HEX

#67786F

RGB

rgb(103, 120, 111)

HSL

hsl(148, 8%, 44%)

HSB

hsb(148, 14%, 47%)

CMYK

cmyk(14%, 0%, 7%, 53%)

Oklch

oklch(55.6% 0.024 162.5)

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

#596347

Grass Green · DarkOliveGreen · Forest Green

HEX

#596347

RGB

rgb(89, 99, 71)

HSL

hsl(81, 16%, 33%)

HSB

hsb(81, 28%, 39%)

CMYK

cmyk(10%, 0%, 28%, 61%)

Oklch

oklch(48.3% 0.045 124.0)

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

#5E562F

Autumn Sage · DarkOliveGreen · Honey Gold

HEX

#5E562F

RGB

rgb(94, 86, 47)

HSL

hsl(50, 33%, 28%)

HSB

hsb(50, 50%, 37%)

CMYK

cmyk(0%, 9%, 50%, 63%)

Oklch

oklch(45.1% 0.058 98.0)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#694420

Ochre · DarkOliveGreen · Amber Brown

HEX

#694420

RGB

rgb(105, 68, 32)

HSL

hsl(30, 53%, 27%)

HSB

hsb(30, 70%, 41%)

CMYK

cmyk(0%, 35%, 70%, 59%)

Oklch

oklch(42.1% 0.072 62.8)

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

#420B1F

Dark Violet · Maroon · Raspberry

HEX

#420B1F

RGB

rgb(66, 11, 31)

HSL

hsl(338, 71%, 15%)

HSB

hsb(338, 83%, 26%)

CMYK

cmyk(0%, 83%, 53%, 74%)

Oklch

oklch(25.8% 0.085 3.5)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

67786F

796771

Analogous

687967

67786F

677979

Triadic

67786F

706779

797067

Split-Comp.

67786F

796779

796768

Tetradic

67786F

676879

796771

797967

Contrast Matrix WCAG 2.1 Contrast

67786F	596347	5E562F	694420	420B1F
—	1.4 Fail	1.6 Fail	1.8 Fail	3.5 AA Large
1.4 Fail	—	1.2 Fail	1.3 Fail	2.5 Fail
1.6 Fail	1.2 Fail	—	1.2 Fail	2.2 Fail
1.8 Fail	1.3 Fail	1.2 Fail	—	1.9 Fail
3.5 AA Large	2.5 Fail	2.2 Fail	1.9 Fail	—

White BG

4.7AA

6.4AA

7.4AAA

8.6AAA

16.2AAA

Black BG

4.5AA Large

3.3AA Large

2.8Fail

2.4Fail

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6E6F71

5D5D4E

5B5A38

595929

2A2A1A

Deuteranopia

6D6C72

5D5C4F

5B5C3B

5B5E2B

2D3119

Tritanopia

687373

5A5354

5E4042

673031

3F1616

Achromatopsia

727272

5D5D5D

545454

4B4B4B

1E1E1E

Shades & Tints Shades & Tints

#67786F

Dark

Light

#596347

Dark

Light

#5E562F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #67786f;
  --color-2: #596347;
  --color-3: #5e562f;
  --color-4: #694420;
  --color-5: #420b1f;
}

SCSS

$color-1: #67786f;
$color-2: #596347;
$color-3: #5e562f;
$color-4: #694420;
$color-5: #420b1f;

TAILWIND

colors: {
  'brand-1': '#67786f',
  'brand-2': '#596347',
  'brand-3': '#5e562f',
  'brand-4': '#694420',
  'brand-5': '#420b1f',
}

RGB Array

[103, 120, 111], [89, 99, 71], [94, 86, 47], [105, 68, 32], [66, 11, 31]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #67786F, #596347, #5E562F, #694420, #420B1F 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: #67786f; --color-2: #596347; --color-3: #5e562f; --color-4: #694420; --color-5: #420b1f. 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