#9F7F31 + #E4750A + #584F38 + #5F839F + #491F28 · 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

#9F7F31

Ochre · Sienna · Honey Gold

HEX

#9F7F31

RGB

rgb(159, 127, 49)

HSL

hsl(43, 53%, 41%)

HSB

hsb(43, 69%, 62%)

CMYK

cmyk(0%, 20%, 69%, 38%)

Oklch

oklch(61.2% 0.103 86.3)

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

#E4750A

Tangerine · Chocolate · Amber Brown

HEX

#E4750A

RGB

rgb(228, 117, 10)

HSL

hsl(29, 92%, 47%)

HSB

hsb(29, 96%, 89%)

CMYK

cmyk(0%, 49%, 96%, 11%)

Oklch

oklch(67.8% 0.168 53.9)

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

#584F38

Ochre · DarkOliveGreen · Honey Gold

HEX

#584F38

RGB

rgb(88, 79, 56)

HSL

hsl(43, 22%, 28%)

HSB

hsb(43, 36%, 35%)

CMYK

cmyk(0%, 10%, 36%, 65%)

Oklch

oklch(43.0% 0.037 89.1)

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

#5F839F

Slate Blue · SlateGray · Navy Blue

HEX

#5F839F

RGB

rgb(95, 131, 159)

HSL

hsl(206, 25%, 50%)

HSB

hsb(206, 40%, 62%)

CMYK

cmyk(40%, 18%, 0%, 38%)

Oklch

oklch(59.4% 0.059 242.3)

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

#491F28

Crimson · DarkSlateGray · Deep Berry

HEX

#491F28

RGB

rgb(73, 31, 40)

HSL

hsl(347, 40%, 20%)

HSB

hsb(347, 58%, 29%)

CMYK

cmyk(0%, 58%, 45%, 71%)

Oklch

oklch(30.3% 0.065 8.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9F7F31

3151A0

Analogous

A04931

9F7F31

88A031

Triadic

9F7F31

31A081

8131A0

Split-Comp.

9F7F31

3188A0

4931A0

Tetradic

9F7F31

31A049

3151A0

A03188

Contrast Matrix WCAG 2.1 Contrast

9F7F31	E4750A	584F38	5F839F	491F28
—	1.2 Fail	2.1 Fail	1.1 Fail	3.7 AA Large
1.2 Fail	—	2.6 Fail	1.3 Fail	4.5 AA
2.1 Fail	2.6 Fail	—	2.0 Fail	1.7 Fail
1.1 Fail	1.3 Fail	2.0 Fail	—	3.5 AA Large
3.7 AA Large	4.5 AA	1.7 Fail	3.5 AA Large	—

White BG

3.8AA Large

3.1AA Large

8.1AAA

4.0AA Large

13.9AAA

Black BG

5.6AA

6.8AA

2.6Fail

5.2AA

1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

919144

B4B324

54543E

6F6F98

373626

Deuteranopia

939548

BAC32A

55553F

6D6A97

393C25

Tritanopia

9D5356

DE383D

584243

619392

472424

Achromatopsia

808080

8A8A8A

4F4F4F

7B7B7B

2D2D2D

Shades & Tints Shades & Tints

#9F7F31

Dark

Light

#E4750A

Dark

Light

#584F38

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9f7f31;
  --color-2: #e4750a;
  --color-3: #584f38;
  --color-4: #5f839f;
  --color-5: #491f28;
}

SCSS

$color-1: #9f7f31;
$color-2: #e4750a;
$color-3: #584f38;
$color-4: #5f839f;
$color-5: #491f28;

TAILWIND

colors: {
  'brand-1': '#9f7f31',
  'brand-2': '#e4750a',
  'brand-3': '#584f38',
  'brand-4': '#5f839f',
  'brand-5': '#491f28',
}

RGB Array

[159, 127, 49], [228, 117, 10], [88, 79, 56], [95, 131, 159], [73, 31, 40]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #9F7F31, #E4750A, #584F38, #5F839F, #491F28 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: #9f7f31; --color-2: #e4750a; --color-3: #584f38; --color-4: #5f839f; --color-5: #491f28. 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