#53726A + #4B371C + #D35B38 + #BA7510 + #913B1A · 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

#53726A

Mineral Blue · DimGray · Mint Ice

HEX

#53726A

RGB

rgb(83, 114, 106)

HSL

hsl(165, 16%, 39%)

HSB

hsb(165, 27%, 45%)

CMYK

cmyk(27%, 0%, 7%, 55%)

Oklch

oklch(52.5% 0.038 177.1)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#4B371C

Ochre · DarkOliveGreen · Cinnamon

HEX

#4B371C

RGB

rgb(75, 55, 28)

HSL

hsl(34, 46%, 20%)

HSB

hsb(34, 63%, 29%)

CMYK

cmyk(0%, 27%, 63%, 71%)

Oklch

oklch(35.3% 0.050 73.3)

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

#D35B38

Vermilion · Chocolate · Passion Red

HEX

#D35B38

RGB

rgb(211, 91, 56)

HSL

hsl(14, 64%, 52%)

HSB

hsb(14, 73%, 83%)

CMYK

cmyk(0%, 57%, 73%, 17%)

Oklch

oklch(61.7% 0.160 36.9)

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

#BA7510

Ochre · DarkGoldenRod · Amber Brown

HEX

#BA7510

RGB

rgb(186, 117, 16)

HSL

hsl(36, 84%, 40%)

HSB

hsb(36, 91%, 73%)

CMYK

cmyk(0%, 37%, 91%, 27%)

Oklch

oklch(62.2% 0.132 68.0)

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

#913B1A

Tangerine · Brown · Amber Brown

HEX

#913B1A

RGB

rgb(145, 59, 26)

HSL

hsl(17, 70%, 34%)

HSB

hsb(17, 82%, 57%)

CMYK

cmyk(0%, 59%, 82%, 43%)

Oklch

oklch(46.5% 0.125 40.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

53726A

73545B

Analogous

54735B

53726A

546B73

Triadic

53726A

6B5473

736B54

Split-Comp.

53726A

73546B

735B54

Tetradic

53726A

5B5473

73545B

6B7354

Contrast Matrix WCAG 2.1 Contrast

53726A	4B371C	D35B38	BA7510	913B1A
—	2.1 Fail	1.3 Fail	1.4 Fail	1.4 Fail
2.1 Fail	—	2.9 Fail	3.0 AA Large	1.5 Fail
1.3 Fail	2.9 Fail	—	1.1 Fail	1.9 Fail
1.4 Fail	3.0 AA Large	1.1 Fail	—	2.0 Fail
1.4 Fail	1.5 Fail	1.9 Fail	2.0 Fail	—

White BG

5.3AA

11.3AAA

3.9AA Large

3.7AA Large

7.4AAA

Black BG

4.0AA Large

1.9Fail

5.3AA

5.6AA

2.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

60616C

424223

9F9E40

9C9C28

6C6B22

Deuteranopia

5F5C6C

444524

A6AF43

A0A52E

717724

Tritanopia

556D6E

4A2829

CD4749

B73C40

8D282A

Achromatopsia

686868

3A3A3A

7B7B7B

7E7E7E

515151

Shades & Tints Shades & Tints

#53726A

Dark

Light

#4B371C

Dark

Light

#D35B38

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #53726a;
  --color-2: #4b371c;
  --color-3: #d35b38;
  --color-4: #ba7510;
  --color-5: #913b1a;
}

SCSS

$color-1: #53726a;
$color-2: #4b371c;
$color-3: #d35b38;
$color-4: #ba7510;
$color-5: #913b1a;

TAILWIND

colors: {
  'brand-1': '#53726a',
  'brand-2': '#4b371c',
  'brand-3': '#d35b38',
  'brand-4': '#ba7510',
  'brand-5': '#913b1a',
}

RGB Array

[83, 114, 106], [75, 55, 28], [211, 91, 56], [186, 117, 16], [145, 59, 26]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #53726A, #4B371C, #D35B38, #BA7510, #913B1A 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: #53726a; --color-2: #4b371c; --color-3: #d35b38; --color-4: #ba7510; --color-5: #913b1a. 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