#7E3414 + #713B25 + #624336 + #544A47 + #455057 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#7E3414

Tangerine · Brown · Amber Brown

HEX

#7E3414

RGB

rgb(126, 52, 20)

HSL

hsl(18, 73%, 29%)

HSB

hsb(18, 84%, 49%)

CMYK

cmyk(0%, 59%, 84%, 51%)

Oklch

oklch(42.2% 0.112 41.6)

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

#713B25

Tangerine · Sienna · Amber Brown

HEX

#713B25

RGB

rgb(113, 59, 37)

HSL

hsl(17, 51%, 29%)

HSB

hsb(17, 67%, 44%)

CMYK

cmyk(0%, 48%, 67%, 56%)

Oklch

oklch(41.6% 0.083 42.3)

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

#624336

Tangerine · DarkOliveGreen · Amber Brown

HEX

#624336

RGB

rgb(98, 67, 54)

HSL

hsl(18, 29%, 30%)

HSB

hsb(18, 45%, 38%)

CMYK

cmyk(0%, 32%, 45%, 62%)

Oklch

oklch(41.4% 0.048 43.6)

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

#544A47

Crimson · DarkSlateGray · Charcoal

HEX

#544A47

RGB

rgb(84, 74, 71)

HSL

hsl(14, 8%, 30%)

HSB

hsb(14, 15%, 33%)

CMYK

cmyk(0%, 12%, 15%, 67%)

Oklch

oklch(41.8% 0.014 37.4)

Traditional「Crimson」· Paint「Charcoal」· Creative Midnight Shadow

#455057

Slate Blue · DarkSlateGray · Prussian Blue

HEX

#455057

RGB

rgb(69, 80, 87)

HSL

hsl(203, 12%, 31%)

HSB

hsb(203, 21%, 34%)

CMYK

cmyk(21%, 8%, 0%, 66%)

Oklch

oklch(42.4% 0.018 235.8)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7E3414

146080

Analogous

80142A

7E3414

806A14

Triadic

7E3414

148034

341480

Split-Comp.

7E3414

14806A

142A80

Tetradic

7E3414

2A8014

146080

6A1480

Contrast Matrix WCAG 2.1 Contrast

7E3414	713B25	624336	544A47	455057
—	1.0 Fail	1.0 Fail	1.0 Fail	1.1 Fail
1.0 Fail	—	1.0 Fail	1.0 Fail	1.1 Fail
1.0 Fail	1.0 Fail	—	1.0 Fail	1.1 Fail
1.0 Fail	1.0 Fail	1.0 Fail	—	1.0 Fail
1.1 Fail	1.1 Fail	1.1 Fail	1.0 Fail	—

White BG

8.8AAA

8.9AAA

8.8AAA

8.6AAA

8.3AAA

Black BG

2.4Fail

2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

5E5D1C

5A592A

555439

505048

4A4A55

Deuteranopia

62681E

5D612C

56593A

505148

494855

Tritanopia

7A2223

6E2F2F

603C3C

544848

465454

Achromatopsia

464646

494949

4B4B4B

4D4D4D

4E4E4E

Shades & Tints Shades & Tints

#7E3414

Dark

Light

#713B25

Dark

Light

#624336

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7e3414;
  --color-2: #713b25;
  --color-3: #624336;
  --color-4: #544a47;
  --color-5: #455057;
}

SCSS

$color-1: #7e3414;
$color-2: #713b25;
$color-3: #624336;
$color-4: #544a47;
$color-5: #455057;

TAILWIND

colors: {
  'brand-1': '#7e3414',
  'brand-2': '#713b25',
  'brand-3': '#624336',
  'brand-4': '#544a47',
  'brand-5': '#455057',
}

RGB Array

[126, 52, 20], [113, 59, 37], [98, 67, 54], [84, 74, 71], [69, 80, 87]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #7E3414, #713B25, #624336, #544A47, #455057 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: #7e3414; --color-2: #713b25; --color-3: #624336; --color-4: #544a47; --color-5: #455057. 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 warm-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