← Back to Editor

#352412 · #534015 · #963336 · #8A774D · #F0CEA0

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

#352412

Ochre · Black · Cinnamon

HEX
#352412
RGB
rgb(53, 36, 18)
HSL
hsl(31, 49%, 14%)
HSB
hsb(31, 66%, 21%)
CMYK
cmyk(0%, 32%, 66%, 79%)
Oklch
oklch(27.6% 0.039 66.6)

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

#534015

Ochre · DarkOliveGreen · Amber Gold

HEX
#534015
RGB
rgb(83, 64, 21)
HSL
hsl(42, 60%, 20%)
HSB
hsb(42, 75%, 33%)
CMYK
cmyk(0%, 23%, 75%, 67%)
Oklch
oklch(38.3% 0.065 84.7)

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

#963336

Crimson · Brown · Wine Red

HEX
#963336
RGB
rgb(150, 51, 54)
HSL
hsl(358, 49%, 39%)
HSB
hsb(358, 66%, 59%)
CMYK
cmyk(0%, 66%, 64%, 41%)
Oklch
oklch(46.6% 0.133 22.2)

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

#8A774D

Ochre · DimGray · Honey Gold

HEX
#8A774D
RGB
rgb(138, 119, 77)
HSL
hsl(41, 28%, 42%)
HSB
hsb(41, 44%, 54%)
CMYK
cmyk(0%, 14%, 44%, 46%)
Oklch
oklch(57.7% 0.063 86.1)

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

#F0CEA0

Goose Yellow · Wheat · Peach Orange

HEX
#F0CEA0
RGB
rgb(240, 206, 160)
HSL
hsl(35, 73%, 78%)
HSB
hsb(35, 33%, 94%)
CMYK
cmyk(0%, 14%, 33%, 6%)
Oklch
oklch(86.9% 0.071 75.0)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

352412
122335

Analogous

351312
352412
353512

Triadic

352412
123524
241235

Split-Comp.

352412
123535
131235

Tetradic

352412
123513
122335
351235

Contrast Matrix WCAG 2.1 Contrast

352412
534015
963336
8A774D
F0CEA0
—
1.5
Fail
2.0
Fail
3.4
AA Large
9.9
AAA
1.5
Fail
—
1.3
Fail
2.3
Fail
6.6
AA
2.0
Fail
1.3
Fail
—
1.7
Fail
5.0
AA
3.4
AA Large
2.3
Fail
1.7
Fail
—
2.9
Fail
9.9
AAA
6.6
AA
5.0
AA
2.9
Fail
—
White BG
14.9AAA
9.9AAA
7.4AAA
4.4AA Large
1.5Fail
Black BG
1.4Fail
2.1Fail
2.8Fail
4.8AA
14.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2D16
4B4B1F
6B6A35
828257
E1E1AB

Deuteranopia

2F3017
4C4D22
717835
83845A
E3E6AE

Tritanopia

341A1B
522829
913535
895F61
EEB4B6

Achromatopsia

272727
414141
515151
787878
D3D3D3

Shades & Tints Shades & Tints

#352412

Dark
Light

#534015

Dark
Light

#963336

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #352412;
  --color-2: #534015;
  --color-3: #963336;
  --color-4: #8a774d;
  --color-5: #f0cea0;
}

SCSS

$color-1: #352412;
$color-2: #534015;
$color-3: #963336;
$color-4: #8a774d;
$color-5: #f0cea0;

TAILWIND

colors: {
  'brand-1': '#352412',
  'brand-2': '#534015',
  'brand-3': '#963336',
  'brand-4': '#8a774d',
  'brand-5': '#f0cea0',
}

RGB Array

[53, 36, 18], [83, 64, 21], [150, 51, 54], [138, 119, 77], [240, 206, 160]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #352412, #534015, #963336, #8A774D, #F0CEA0 is ideal for: tech websites, dark mode UIs, game UIs, 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: #352412; --color-2: #534015; --color-3: #963336; --color-4: #8a774d; --color-5: #f0cea0. 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. 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