#622215 + #504210 + #2B322D + #673D16 + #AE791E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#622215

Vermilion · Maroon · Wine Red

HEX

#622215

RGB

rgb(98, 34, 21)

HSL

hsl(10, 65%, 23%)

HSB

hsb(10, 79%, 38%)

CMYK

cmyk(0%, 65%, 79%, 62%)

Oklch

oklch(34.7% 0.096 33.3)

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

#504210

Ochre · DarkOliveGreen · Amber Gold

HEX

#504210

RGB

rgb(80, 66, 16)

HSL

hsl(47, 67%, 19%)

HSB

hsb(47, 80%, 31%)

CMYK

cmyk(0%, 18%, 80%, 69%)

Oklch

oklch(38.3% 0.069 92.8)

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

#2B322D

Celadon · DarkSlateGray · Dark Stone

HEX

#2B322D

RGB

rgb(43, 50, 45)

HSL

hsl(137, 8%, 18%)

HSB

hsb(137, 14%, 20%)

CMYK

cmyk(14%, 0%, 10%, 80%)

Oklch

oklch(30.9% 0.013 154.5)

Traditional「Celadon」· Paint「Dark Stone」· Creative Midnight Shadow

#673D16

Tangerine · DarkOliveGreen · Cinnamon

HEX

#673D16

RGB

rgb(103, 61, 22)

HSL

hsl(29, 65%, 25%)

HSB

hsb(29, 79%, 40%)

CMYK

cmyk(0%, 41%, 79%, 60%)

Oklch

oklch(40.3% 0.079 60.0)

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

#AE791E

Ochre · DarkGoldenRod · Amber Brown

HEX

#AE791E

RGB

rgb(174, 121, 30)

HSL

hsl(38, 71%, 40%)

HSB

hsb(38, 83%, 68%)

CMYK

cmyk(0%, 30%, 83%, 32%)

Oklch

oklch(61.5% 0.120 75.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

622215

155461

Analogous

61152E

622215

614715

Triadic

622215

156121

211561

Split-Comp.

622215

156147

152E61

Tetradic

622215

2E6115

155461

471561

Contrast Matrix WCAG 2.1 Contrast

622215	504210	2B322D	673D16	AE791E
—	1.2 Fail	1.1 Fail	1.3 Fail	3.2 AA Large
1.2 Fail	—	1.3 Fail	1.1 Fail	2.6 Fail
1.1 Fail	1.3 Fail	—	1.4 Fail	3.5 AA Large
1.3 Fail	1.1 Fail	1.4 Fail	—	2.5 Fail
3.2 AA Large	2.6 Fail	3.5 AA Large	2.5 Fail	—

White BG

11.9AAA

9.9AAA

13.2AAA

9.3AAA

3.8AA Large

Black BG

1.8Fail

2.1Fail

1.6Fail

2.3Fail

5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

464618

4A4A1C

2E2E2E

55541F

979734

Deuteranopia

4A4F19

4B4C1F

2E2D2F

575A22

9A9E39

Tritanopia

5F1B1B

4F2628

2B2F2F

652729

AB4549

Achromatopsia

343434

404040

2F2F2F

454545

7E7E7E

Shades & Tints Shades & Tints

#622215

Dark

Light

#504210

Dark

Light

#2B322D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #622215;
  --color-2: #504210;
  --color-3: #2b322d;
  --color-4: #673d16;
  --color-5: #ae791e;
}

SCSS

$color-1: #622215;
$color-2: #504210;
$color-3: #2b322d;
$color-4: #673d16;
$color-5: #ae791e;

TAILWIND

colors: {
  'brand-1': '#622215',
  'brand-2': '#504210',
  'brand-3': '#2b322d',
  'brand-4': '#673d16',
  'brand-5': '#ae791e',
}

RGB Array

[98, 34, 21], [80, 66, 16], [43, 50, 45], [103, 61, 22], [174, 121, 30]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #622215, #504210, #2B322D, #673D16, #AE791E 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: #622215; --color-2: #504210; --color-3: #2b322d; --color-4: #673d16; --color-5: #ae791e. 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