#A48A63 + #67706D + #524050 + #D6370B + #301E26 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#A48A63

Ginger · Gray · Warm Sun

HEX

#A48A63

RGB

rgb(164, 138, 99)

HSL

hsl(36, 26%, 52%)

HSB

hsb(36, 40%, 64%)

CMYK

cmyk(0%, 16%, 40%, 36%)

Oklch

oklch(64.8% 0.062 77.4)

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

#67706D

Ink Gray · DimGray · Warm Gray

HEX

#67706D

RGB

rgb(103, 112, 109)

HSL

hsl(160, 4%, 42%)

HSB

hsb(160, 8%, 44%)

CMYK

cmyk(8%, 0%, 3%, 56%)

Oklch

oklch(53.7% 0.012 173.9)

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

#524050

Rose Purple · DarkSlateGray · Eggplant

HEX

#524050

RGB

rgb(82, 64, 80)

HSL

hsl(307, 12%, 29%)

HSB

hsb(307, 22%, 32%)

CMYK

cmyk(0%, 22%, 2%, 68%)

Oklch

oklch(39.7% 0.036 329.9)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

#D6370B

Vermilion · OrangeRed · Passion Red

HEX

#D6370B

RGB

rgb(214, 55, 11)

HSL

hsl(13, 90%, 44%)

HSB

hsb(13, 95%, 84%)

CMYK

cmyk(0%, 74%, 95%, 16%)

Oklch

oklch(57.8% 0.201 34.2)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#301E26

Dark Violet · DarkSlateGray · Raspberry

HEX

#301E26

RGB

rgb(48, 30, 38)

HSL

hsl(333, 23%, 15%)

HSB

hsb(333, 38%, 19%)

CMYK

cmyk(0%, 37%, 21%, 81%)

Oklch

oklch(26.1% 0.031 351.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A48A63

657EA4

Analogous

A46B65

A48A63

9EA465

Triadic

A48A63

65A48B

8B65A4

Split-Comp.

A48A63

659EA4

6B65A4

Tetradic

A48A63

65A46B

657EA4

A4659E

Contrast Matrix WCAG 2.1 Contrast

A48A63	67706D	524050	D6370B	301E26
—	1.6 Fail	2.9 Fail	1.4 Fail	4.8 AA
1.6 Fail	—	1.9 Fail	1.1 Fail	3.1 AA Large
2.9 Fail	1.9 Fail	—	2.0 Fail	1.6 Fail
1.4 Fail	1.1 Fail	2.0 Fail	—	3.3 AA Large
4.8 AA	3.1 AA Large	1.6 Fail	3.3 AA Large	—

White BG

3.3AA Large

5.1AA

9.5AAA

4.8AA

15.7AAA

Black BG

6.4AA

4.1AA Large

2.2Fail

4.4AA Large

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

99996C

6B6B6E

4A4A4C

919016

282824

Deuteranopia

9A9C6F

6A6A6E

4B4D4B

9AA618

292B24

Tritanopia

A37476

676E6E

514948

CE1E20

2F2322

Achromatopsia

8D8D8D

6D6D6D

474747

626262

242424

Shades & Tints Shades & Tints

#A48A63

Dark

Light

#67706D

Dark

Light

#524050

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a48a63;
  --color-2: #67706d;
  --color-3: #524050;
  --color-4: #d6370b;
  --color-5: #301e26;
}

SCSS

$color-1: #a48a63;
$color-2: #67706d;
$color-3: #524050;
$color-4: #d6370b;
$color-5: #301e26;

TAILWIND

colors: {
  'brand-1': '#a48a63',
  'brand-2': '#67706d',
  'brand-3': '#524050',
  'brand-4': '#d6370b',
  'brand-5': '#301e26',
}

RGB Array

[164, 138, 99], [103, 112, 109], [82, 64, 80], [214, 55, 11], [48, 30, 38]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A48A63, #67706D, #524050, #D6370B, #301E26 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: #a48a63; --color-2: #67706d; --color-3: #524050; --color-4: #d6370b; --color-5: #301e26. 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