#938266 + #AB663D + #862F11 + #452F00 + #322F26 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#938266

Ochre · Gray · Amber Brown

HEX

#938266

RGB

rgb(147, 130, 102)

HSL

hsl(37, 18%, 49%)

HSB

hsb(37, 31%, 58%)

CMYK

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

Oklch

oklch(61.5% 0.045 80.1)

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

#AB663D

Tangerine · Sienna · Amber Brown

HEX

#AB663D

RGB

rgb(171, 102, 61)

HSL

hsl(22, 47%, 45%)

HSB

hsb(22, 64%, 67%)

CMYK

cmyk(0%, 40%, 64%, 33%)

Oklch

oklch(57.9% 0.105 50.2)

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

#862F11

Tangerine · Brown · Amber Brown

HEX

#862F11

RGB

rgb(134, 47, 17)

HSL

hsl(15, 77%, 30%)

HSB

hsb(15, 87%, 53%)

CMYK

cmyk(0%, 65%, 87%, 47%)

Oklch

oklch(42.8% 0.126 38.0)

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

#452F00

Ochre · Maroon · Amber Gold

HEX

#452F00

RGB

rgb(69, 47, 0)

HSL

hsl(41, 100%, 14%)

HSB

hsb(41, 100%, 27%)

CMYK

cmyk(0%, 32%, 100%, 73%)

Oklch

oklch(32.3% 0.067 80.4)

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

#322F26

Ochre · DarkSlateGray · Amber Gold

HEX

#322F26

RGB

rgb(50, 47, 38)

HSL

hsl(45, 14%, 17%)

HSB

hsb(45, 24%, 20%)

CMYK

cmyk(0%, 6%, 24%, 80%)

Oklch

oklch(30.5% 0.016 91.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

938266

667893

Analogous

936C66

938266

8E9366

Triadic

938266

669382

826693

Split-Comp.

938266

668E93

6C6693

Tetradic

938266

66936C

667893

93668E

Contrast Matrix WCAG 2.1 Contrast

938266	AB663D	862F11	452F00	322F26
—	1.2 Fail	2.3 Fail	3.4 AA Large	3.6 AA Large
1.2 Fail	—	1.9 Fail	2.8 Fail	3.0 Fail
2.3 Fail	1.9 Fail	—	1.5 Fail	1.5 Fail
3.4 AA Large	2.8 Fail	1.5 Fail	—	1.1 Fail
3.6 AA Large	3.0 Fail	1.5 Fail	1.1 Fail	—

White BG

3.7AA Large

4.5AA Large

8.6AAA

12.7AAA

13.4AAA

Black BG

5.6AA

4.7AA

2.4Fail

1.7Fail

1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8C8B6D

8D8D47

606018

3B3B0B

313128

Deuteranopia

8D8E6E

919649

656C1A

3D3E0E

313129

Tritanopia

927273

A84F50

821E1F

441416

322A2A

Achromatopsia

848484

767676

464646

303030

2F2F2F

Shades & Tints Shades & Tints

#938266

Dark

Light

#AB663D

Dark

Light

#862F11

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #938266;
  --color-2: #ab663d;
  --color-3: #862f11;
  --color-4: #452f00;
  --color-5: #322f26;
}

SCSS

$color-1: #938266;
$color-2: #ab663d;
$color-3: #862f11;
$color-4: #452f00;
$color-5: #322f26;

TAILWIND

colors: {
  'brand-1': '#938266',
  'brand-2': '#ab663d',
  'brand-3': '#862f11',
  'brand-4': '#452f00',
  'brand-5': '#322f26',
}

RGB Array

[147, 130, 102], [171, 102, 61], [134, 47, 17], [69, 47, 0], [50, 47, 38]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #938266, #AB663D, #862F11, #452F00, #322F26 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: #938266; --color-2: #ab663d; --color-3: #862f11; --color-4: #452f00; --color-5: #322f26. 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