← Back to Editor

#9F7B47 · #D55258 · #6D3B3E · #233026 · #F5A455

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#9F7B47

Ochre · Sienna · Amber Brown

HEX
#9F7B47
RGB
rgb(159, 123, 71)
HSL
hsl(35, 38%, 45%)
HSB
hsb(35, 55%, 62%)
CMYK
cmyk(0%, 23%, 55%, 38%)
Oklch
oklch(60.6% 0.083 75.3)

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

#D55258

Vermilion · Tomato · Passion Red

HEX
#D55258
RGB
rgb(213, 82, 88)
HSL
hsl(357, 61%, 58%)
HSB
hsb(357, 62%, 84%)
CMYK
cmyk(0%, 62%, 59%, 16%)
Oklch
oklch(61.3% 0.165 20.7)

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

#6D3B3E

Crimson · DarkOliveGreen · Wine Red

HEX
#6D3B3E
RGB
rgb(109, 59, 62)
HSL
hsl(356, 30%, 33%)
HSB
hsb(356, 46%, 43%)
CMYK
cmyk(0%, 46%, 43%, 57%)
Oklch
oklch(41.5% 0.071 16.8)

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

#233026

Celadon · DarkSlateGray · Dark Green

HEX
#233026
RGB
rgb(35, 48, 38)
HSL
hsl(134, 16%, 16%)
HSB
hsb(134, 27%, 19%)
CMYK
cmyk(27%, 0%, 21%, 81%)
Oklch
oklch(29.4% 0.025 151.7)

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

#F5A455

Ginger · SandyBrown · Warm Sun

HEX
#F5A455
RGB
rgb(245, 164, 85)
HSL
hsl(30, 89%, 65%)
HSB
hsb(30, 65%, 96%)
CMYK
cmyk(0%, 33%, 65%, 4%)
Oklch
oklch(78.4% 0.135 62.8)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9F7B47
476B9E

Analogous

9E4E47
9F7B47
979E47

Triadic

9F7B47
479E7A
7A479E

Split-Comp.

9F7B47
47979E
4E479E

Tetradic

9F7B47
479E4E
476B9E
9E4797

Contrast Matrix WCAG 2.1 Contrast

9F7B47
D55258
6D3B3E
233026
F5A455
—
1.0
Fail
2.3
Fail
3.5
AA Large
1.9
Fail
1.0
Fail
—
2.2
Fail
3.4
AA Large
2.0
Fail
2.3
Fail
2.2
Fail
—
1.5
Fail
4.4
AA Large
3.5
AA Large
3.4
AA Large
1.5
Fail
—
6.8
AA
1.9
Fail
2.0
Fail
4.4
AA Large
6.8
AA
—
White BG
3.9AA Large
4.1AA Large
9.0AAA
13.8AAA
2.0Fail
Black BG
5.4AA
5.2AA
2.3Fail
1.5Fail
10.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8F8F54
9C9B57
57573D
292928
D2D168

Deuteranopia

929457
A4AE56
5A5E3D
282729
D7DD6D

Tritanopia

9D5E60
CE5555
6B3D3D
242A2B
F1777B

Achromatopsia

808080
7A7A7A
4A4A4A
2B2B2B
B3B3B3

Shades & Tints Shades & Tints

#9F7B47

Dark
Light

#D55258

Dark
Light

#6D3B3E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9f7b47;
  --color-2: #d55258;
  --color-3: #6d3b3e;
  --color-4: #233026;
  --color-5: #f5a455;
}

SCSS

$color-1: #9f7b47;
$color-2: #d55258;
$color-3: #6d3b3e;
$color-4: #233026;
$color-5: #f5a455;

TAILWIND

colors: {
  'brand-1': '#9f7b47',
  'brand-2': '#d55258',
  'brand-3': '#6d3b3e',
  'brand-4': '#233026',
  'brand-5': '#f5a455',
}

RGB Array

[159, 123, 71], [213, 82, 88], [109, 59, 62], [35, 48, 38], [245, 164, 85]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9F7B47, #D55258, #6D3B3E, #233026, #F5A455 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #9f7b47; --color-2: #d55258; --color-3: #6d3b3e; --color-4: #233026; --color-5: #f5a455. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. 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 general-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