#422617 + #6A9E9B + #B8B067 + #C28655 + #422617 · dark - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#422617

Tangerine · DarkSlateGray · Cinnamon

HEX

#422617

RGB

rgb(66, 38, 23)

HSL

hsl(21, 48%, 17%)

HSB

hsb(21, 65%, 26%)

CMYK

cmyk(0%, 42%, 65%, 74%)

Oklch

oklch(30.1% 0.049 48.3)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#6A9E9B

Mineral Blue · CadetBlue · Lake Green

HEX

#6A9E9B

RGB

rgb(106, 158, 155)

HSL

hsl(177, 21%, 52%)

HSB

hsb(177, 33%, 62%)

CMYK

cmyk(33%, 0%, 2%, 38%)

Oklch

oklch(66.2% 0.055 191.3)

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

#B8B067

Autumn Sage · Tan · Sunflower

HEX

#B8B067

RGB

rgb(184, 176, 103)

HSL

hsl(54, 36%, 56%)

HSB

hsb(54, 44%, 72%)

CMYK

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

Oklch

oklch(74.8% 0.095 102.9)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#C28655

Tangerine · DarkSalmon · Warm Sun

HEX

#C28655

RGB

rgb(194, 134, 85)

HSL

hsl(27, 47%, 55%)

HSB

hsb(27, 56%, 76%)

CMYK

cmyk(0%, 31%, 56%, 24%)

Oklch

oklch(67.0% 0.098 59.2)

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

#422617

Tangerine · DarkSlateGray · Cinnamon

HEX

#422617

RGB

rgb(66, 38, 23)

HSL

hsl(21, 48%, 17%)

HSB

hsb(21, 65%, 26%)

CMYK

cmyk(0%, 42%, 65%, 74%)

Oklch

oklch(30.1% 0.049 48.3)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

422617

173240

Analogous

40171D

422617

403A17

Triadic

422617

174025

251740

Split-Comp.

422617

17403A

171D40

Tetradic

422617

1D4017

173240

3A1740

Contrast Matrix WCAG 2.1 Contrast

422617	6A9E9B	B8B067	C28655	422617
—	4.6 AA	6.2 AA	4.5 AA Large	—
4.6 AA	—	1.4 Fail	1.0 Fail	4.6 AA
6.2 AA	1.4 Fail	—	1.4 Fail	6.2 AA
4.5 AA Large	1.0 Fail	1.4 Fail	—	4.5 AA Large
—	4.6 AA	6.2 AA	4.5 AA Large	—

White BG

13.8AAA

3.0AA Large

2.2Fail

3.1AA Large

13.8AAA

Black BG

1.5Fail

7.0AA

9.4AAA

6.8AA

1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

36361B

81819C

B5B479

A8A761

36361B

Deuteranopia

383A1C

7E7A9C

B5B67D

ACB064

383A1C

Tritanopia

411D1E

6D9C9C

B8878A

BF6A6C

411D1E

Achromatopsia

2D2D2D

8E8E8E

AAAAAA

929292

2D2D2D

Shades & Tints Shades & Tints

#422617

Dark

Light

#6A9E9B

Dark

Light

#B8B067

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #422617;
  --color-2: #6a9e9b;
  --color-3: #b8b067;
  --color-4: #c28655;
  --color-5: #422617;
}

SCSS

$color-1: #422617;
$color-2: #6a9e9b;
$color-3: #b8b067;
$color-4: #c28655;
$color-5: #422617;

TAILWIND

colors: {
  'brand-1': '#422617',
  'brand-2': '#6a9e9b',
  'brand-3': '#b8b067',
  'brand-4': '#c28655',
  'brand-5': '#422617',
}

RGB Array

[66, 38, 23], [106, 158, 155], [184, 176, 103], [194, 134, 85], [66, 38, 23]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #422617, #6A9E9B, #B8B067, #C28655, #422617 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: #422617; --color-2: #6a9e9b; --color-3: #b8b067; --color-4: #c28655; --color-5: #422617. 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 dark-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