#997F5A + #B54C1F + #B33B00 + #453520 + #912020 · earth - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#997F5A

Ochre · Gray · Amber Brown

HEX

#997F5A

RGB

rgb(153, 127, 90)

HSL

hsl(35, 26%, 48%)

HSB

hsb(35, 41%, 60%)

CMYK

cmyk(0%, 17%, 41%, 40%)

Oklch

oklch(61.2% 0.061 76.0)

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

#B54C1F

Tangerine · Sienna · Amber Brown

HEX

#B54C1F

RGB

rgb(181, 76, 31)

HSL

hsl(18, 71%, 42%)

HSB

hsb(18, 83%, 71%)

CMYK

cmyk(0%, 58%, 83%, 29%)

Oklch

oklch(54.8% 0.148 41.3)

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

#B33B00

Tangerine · FireBrick · Amber Brown

HEX

#B33B00

RGB

rgb(179, 59, 0)

HSL

hsl(20, 100%, 35%)

HSB

hsb(20, 100%, 70%)

CMYK

cmyk(0%, 67%, 100%, 30%)

Oklch

oklch(52.1% 0.165 39.5)

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

#453520

Ochre · DarkSlateGray · Cinnamon

HEX

#453520

RGB

rgb(69, 53, 32)

HSL

hsl(34, 37%, 20%)

HSB

hsb(34, 54%, 27%)

CMYK

cmyk(0%, 23%, 54%, 73%)

Oklch

oklch(34.1% 0.040 73.3)

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

#912020

Vermilion · Brown · Wine Red

HEX

#912020

RGB

rgb(145, 32, 32)

HSL

hsl(0, 64%, 35%)

HSB

hsb(0, 78%, 57%)

CMYK

cmyk(0%, 78%, 78%, 43%)

Oklch

oklch(43.3% 0.149 26.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

997F5A

5B759A

Analogous

9A605B

997F5A

959A5B

Triadic

997F5A

5B9A80

805B9A

Split-Comp.

997F5A

5B959A

605B9A

Tetradic

997F5A

5B9A60

5B759A

9A5B95

Contrast Matrix WCAG 2.1 Contrast

997F5A	B54C1F	B33B00	453520	912020
—	1.4 Fail	1.6 Fail	3.1 AA Large	2.3 Fail
1.4 Fail	—	1.1 Fail	2.3 Fail	1.7 Fail
1.6 Fail	1.1 Fail	—	2.0 Fail	1.5 Fail
3.1 AA Large	2.3 Fail	2.0 Fail	—	1.4 Fail
2.3 Fail	1.7 Fail	1.5 Fail	1.4 Fail	—

White BG

3.8AA Large

5.2AA

5.9AA

11.8AAA

8.6AAA

Black BG

5.5AA

4.0AA Large

3.5AA Large

1.8Fail

2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8E63

88872A

7F7E0E

3E3E25

605F20

Deuteranopia

8F9165

8E962D

868F12

3F4026

676F20

Tritanopia

986A6C

B03234

AD1A1C

44292A

8B2020

Achromatopsia

838383

666666

585858

373737

424242

Shades & Tints Shades & Tints

#997F5A

Dark

Light

#B54C1F

Dark

Light

#B33B00

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #997f5a;
  --color-2: #b54c1f;
  --color-3: #b33b00;
  --color-4: #453520;
  --color-5: #912020;
}

SCSS

$color-1: #997f5a;
$color-2: #b54c1f;
$color-3: #b33b00;
$color-4: #453520;
$color-5: #912020;

TAILWIND

colors: {
  'brand-1': '#997f5a',
  'brand-2': '#b54c1f',
  'brand-3': '#b33b00',
  'brand-4': '#453520',
  'brand-5': '#912020',
}

RGB Array

[153, 127, 90], [181, 76, 31], [179, 59, 0], [69, 53, 32], [145, 32, 32]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #997F5A, #B54C1F, #B33B00, #453520, #912020 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: #997f5a; --color-2: #b54c1f; --color-3: #b33b00; --color-4: #453520; --color-5: #912020. 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 earth-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