#463E3B + #34324A + #62383C + #8F4B38 + #DDB039 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#463E3B

Tangerine · DarkSlateGray · Dark Stone

HEX

#463E3B

RGB

rgb(70, 62, 59)

HSL

hsl(16, 9%, 25%)

HSB

hsb(16, 16%, 27%)

CMYK

cmyk(0%, 11%, 16%, 73%)

Oklch

oklch(37.1% 0.012 41.7)

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

#34324A

Deep Indigo · DarkSlateGray · Prussian Blue

HEX

#34324A

RGB

rgb(52, 50, 74)

HSL

hsl(245, 19%, 24%)

HSB

hsb(245, 32%, 29%)

CMYK

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

Oklch

oklch(33.0% 0.042 287.7)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#62383C

Crimson · DarkOliveGreen · Wine Red

HEX

#62383C

RGB

rgb(98, 56, 60)

HSL

hsl(354, 27%, 30%)

HSB

hsb(354, 43%, 38%)

CMYK

cmyk(0%, 43%, 39%, 62%)

Oklch

oklch(39.3% 0.060 14.1)

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

#8F4B38

Crimson · Sienna · Wine Red

HEX

#8F4B38

RGB

rgb(143, 75, 56)

HSL

hsl(13, 44%, 39%)

HSB

hsb(13, 61%, 56%)

CMYK

cmyk(0%, 48%, 61%, 44%)

Oklch

oklch(49.2% 0.097 36.5)

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

#DDB039

Ginger · GoldenRod · Sunflower

HEX

#DDB039

RGB

rgb(221, 176, 57)

HSL

hsl(44, 71%, 55%)

HSB

hsb(44, 74%, 87%)

CMYK

cmyk(0%, 20%, 74%, 13%)

Oklch

oklch(77.8% 0.140 87.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

463E3B

3A4245

Analogous

453A3D

463E3B

45433A

Triadic

463E3B

3A453D

3D3A45

Split-Comp.

463E3B

3A4543

3A3D45

Tetradic

463E3B

3D453A

3A4245

433A45

Contrast Matrix WCAG 2.1 Contrast

463E3B	34324A	62383C	8F4B38	DDB039
—	1.2 Fail	1.1 Fail	1.6 Fail	5.1 AA
1.2 Fail	—	1.3 Fail	1.9 Fail	6.1 AA
1.1 Fail	1.3 Fail	—	1.5 Fail	4.8 AA
1.6 Fail	1.9 Fail	1.5 Fail	—	3.2 AA Large
5.1 AA	6.1 AA	4.8 AA	3.2 AA Large	—

White BG

10.4AAA

12.3AAA

9.8AAA

6.5AA

2.0Fail

Black BG

2.0Fail

1.7Fail

2.2Fail

3.2AA Large

10.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

43423C

333344

504F3B

72713D

CAC956

Deuteranopia

43443C

333343

52553B

767B3E

CCD05D

Tritanopia

463C3C

34403F

603A3A

8C4041

DB6D72

Achromatopsia

404040

353535

454545

5D5D5D

B0B0B0

Shades & Tints Shades & Tints

#463E3B

Dark

Light

#34324A

Dark

Light

#62383C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #463e3b;
  --color-2: #34324a;
  --color-3: #62383c;
  --color-4: #8f4b38;
  --color-5: #ddb039;
}

SCSS

$color-1: #463e3b;
$color-2: #34324a;
$color-3: #62383c;
$color-4: #8f4b38;
$color-5: #ddb039;

TAILWIND

colors: {
  'brand-1': '#463e3b',
  'brand-2': '#34324a',
  'brand-3': '#62383c',
  'brand-4': '#8f4b38',
  'brand-5': '#ddb039',
}

RGB Array

[70, 62, 59], [52, 50, 74], [98, 56, 60], [143, 75, 56], [221, 176, 57]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #463E3B, #34324A, #62383C, #8F4B38, #DDB039 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: #463e3b; --color-2: #34324a; --color-3: #62383c; --color-4: #8f4b38; --color-5: #ddb039. 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