#53713D + #A4521A + #0F0B0A + #254E60 + #A18232 · 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

#53713D

Celadon · DarkOliveGreen · Forest Green

HEX

#53713D

RGB

rgb(83, 113, 61)

HSL

hsl(95, 30%, 34%)

HSB

hsb(95, 46%, 44%)

CMYK

cmyk(27%, 0%, 46%, 56%)

Oklch

oklch(51.2% 0.085 133.1)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#A4521A

Tangerine · Sienna · Amber Brown

HEX

#A4521A

RGB

rgb(164, 82, 26)

HSL

hsl(24, 73%, 37%)

HSB

hsb(24, 84%, 64%)

CMYK

cmyk(0%, 50%, 84%, 36%)

Oklch

oklch(53.1% 0.126 50.1)

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

#0F0B0A

Crimson · Black · Deep Berry

HEX

#0F0B0A

RGB

rgb(15, 11, 10)

HSL

hsl(12, 20%, 5%)

HSB

hsb(12, 33%, 6%)

CMYK

cmyk(0%, 27%, 33%, 94%)

Oklch

oklch(15.4% 0.007 34.3)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#254E60

Slate Blue · DarkSlateGray · Mint Ice

HEX

#254E60

RGB

rgb(37, 78, 96)

HSL

hsl(198, 44%, 26%)

HSB

hsb(198, 61%, 38%)

CMYK

cmyk(61%, 19%, 0%, 62%)

Oklch

oklch(40.2% 0.055 228.9)

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

#A18232

Ochre · DarkGoldenRod · Honey Gold

HEX

#A18232

RGB

rgb(161, 130, 50)

HSL

hsl(43, 53%, 41%)

HSB

hsb(43, 69%, 63%)

CMYK

cmyk(0%, 19%, 69%, 37%)

Oklch

oklch(62.1% 0.104 87.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

53713D

5B3D71

Analogous

6C713D

53713D

3D7141

Triadic

53713D

3D5271

713D52

Split-Comp.

53713D

413D71

713D6C

Tetradic

53713D

3D6C71

5B3D71

71413D

Contrast Matrix WCAG 2.1 Contrast

53713D	A4521A	0F0B0A	254E60	A18232
—	1.0 Fail	3.5 AA Large	1.6 Fail	1.5 Fail
1.0 Fail	—	3.5 AA Large	1.6 Fail	1.5 Fail
3.5 AA Large	3.5 AA Large	—	2.2 Fail	5.4 AA
1.6 Fail	1.6 Fail	2.2 Fail	—	2.5 Fail
1.5 Fail	1.5 Fail	5.4 AA	2.5 Fail	—

White BG

5.5AA

19.6AAA

9.0AAA

3.6AA Large

Black BG

3.8AA Large

1.1Fail

2.3Fail

5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

60604A

808028

0D0D0A

37375C

949345

Deuteranopia

5E5C4D

858B2B

0E0E0A

34315B

95984A

Tritanopia

555456

A03235

0F0A0A

275857

9F5558

Achromatopsia

626262

646464

0C0C0C

444444

828282

Shades & Tints Shades & Tints

#53713D

Dark

Light

#A4521A

Dark

Light

#0F0B0A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #53713d;
  --color-2: #a4521a;
  --color-3: #0f0b0a;
  --color-4: #254e60;
  --color-5: #a18232;
}

SCSS

$color-1: #53713d;
$color-2: #a4521a;
$color-3: #0f0b0a;
$color-4: #254e60;
$color-5: #a18232;

TAILWIND

colors: {
  'brand-1': '#53713d',
  'brand-2': '#a4521a',
  'brand-3': '#0f0b0a',
  'brand-4': '#254e60',
  'brand-5': '#a18232',
}

RGB Array

[83, 113, 61], [164, 82, 26], [15, 11, 10], [37, 78, 96], [161, 130, 50]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #53713D, #A4521A, #0F0B0A, #254E60, #A18232 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: #53713d; --color-2: #a4521a; --color-3: #0f0b0a; --color-4: #254e60; --color-5: #a18232. 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