← Back to Editor

#351E0C · #8F5A2E · #E19E47 · #50858D · #9DBFAF

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#351E0C

Tangerine · Black · Cinnamon

HEX
#351E0C
RGB
rgb(53, 30, 12)
HSL
hsl(26, 63%, 13%)
HSB
hsb(26, 77%, 21%)
CMYK
cmyk(0%, 43%, 77%, 79%)
Oklch
oklch(26.1% 0.046 56.9)

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

#8F5A2E

Tangerine · Sienna · Amber Brown

HEX
#8F5A2E
RGB
rgb(143, 90, 46)
HSL
hsl(27, 51%, 37%)
HSB
hsb(27, 68%, 56%)
CMYK
cmyk(0%, 37%, 68%, 44%)
Oklch
oklch(51.8% 0.091 58.4)

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

#E19E47

Ginger · SandyBrown · Warm Sun

HEX
#E19E47
RGB
rgb(225, 158, 71)
HSL
hsl(34, 72%, 58%)
HSB
hsb(34, 68%, 88%)
CMYK
cmyk(0%, 30%, 68%, 12%)
Oklch
oklch(74.9% 0.129 70.4)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#50858D

Slate Blue · SlateGray · Mint Ice

HEX
#50858D
RGB
rgb(80, 133, 141)
HSL
hsl(188, 28%, 43%)
HSB
hsb(188, 43%, 55%)
CMYK
cmyk(43%, 6%, 0%, 45%)
Oklch
oklch(58.3% 0.058 208.0)

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

#9DBFAF

Jade · DarkGray · Apple Green

HEX
#9DBFAF
RGB
rgb(157, 191, 175)
HSL
hsl(152, 21%, 68%)
HSB
hsb(152, 18%, 75%)
CMYK
cmyk(18%, 0%, 8%, 25%)
Oklch
oklch(77.5% 0.043 165.1)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

351E0C
0C2436

Analogous

360C0F
351E0C
36330C

Triadic

351E0C
0C361E
1E0C36

Split-Comp.

351E0C
0C3633
0C0F36

Tetradic

351E0C
0F360C
0C2436
330C36

Contrast Matrix WCAG 2.1 Contrast

351E0C
8F5A2E
E19E47
50858D
9DBFAF
—
2.7
Fail
6.8
AA
3.8
AA Large
7.8
AAA
2.7
Fail
—
2.5
Fail
1.4
Fail
2.9
Fail
6.8
AA
2.5
Fail
—
1.8
Fail
1.1
Fail
3.8
AA Large
1.4
Fail
1.8
Fail
—
2.1
Fail
7.8
AAA
2.9
Fail
1.1
Fail
2.1
Fail
—
White BG
15.6AAA
5.7AA
2.3Fail
4.1AA Large
2.0Fail
Black BG
1.3Fail
3.7AA Large
9.2AAA
5.1AA
10.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2B2B10
787839
C4C35C
67678B
ACACB3

Deuteranopia

2C2E11
7B7F3B
C8CD61
64608B
AAA7B4

Tritanopia

341415
8C4143
DE6D70
538A89
9FB6B7

Achromatopsia

232323
656565
A8A8A8
767676
B3B3B3

Shades & Tints Shades & Tints

#351E0C

Dark
Light

#8F5A2E

Dark
Light

#E19E47

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #351e0c;
  --color-2: #8f5a2e;
  --color-3: #e19e47;
  --color-4: #50858d;
  --color-5: #9dbfaf;
}

SCSS

$color-1: #351e0c;
$color-2: #8f5a2e;
$color-3: #e19e47;
$color-4: #50858d;
$color-5: #9dbfaf;

TAILWIND

colors: {
  'brand-1': '#351e0c',
  'brand-2': '#8f5a2e',
  'brand-3': '#e19e47',
  'brand-4': '#50858d',
  'brand-5': '#9dbfaf',
}

RGB Array

[53, 30, 12], [143, 90, 46], [225, 158, 71], [80, 133, 141], [157, 191, 175]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #351E0C, #8F5A2E, #E19E47, #50858D, #9DBFAF 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: #351e0c; --color-2: #8f5a2e; --color-3: #e19e47; --color-4: #50858d; --color-5: #9dbfaf. 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