← Back to Editor

#35362F · #F0AE13 · #5C584E · #696356 · #DBDBDB

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

#35362F

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#35362F
RGB
rgb(53, 54, 47)
HSL
hsl(69, 7%, 20%)
HSB
hsb(69, 13%, 21%)
CMYK
cmyk(2%, 0%, 13%, 79%)
Oklch
oklch(32.9% 0.012 113.7)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#F0AE13

Ginger · Orange · Sunflower

HEX
#F0AE13
RGB
rgb(240, 174, 19)
HSL
hsl(42, 88%, 51%)
HSB
hsb(42, 92%, 94%)
CMYK
cmyk(0%, 27%, 92%, 6%)
Oklch
oklch(79.2% 0.161 80.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#5C584E

Ochre · DimGray · Charcoal

HEX
#5C584E
RGB
rgb(92, 88, 78)
HSL
hsl(43, 8%, 33%)
HSB
hsb(43, 15%, 36%)
CMYK
cmyk(0%, 4%, 15%, 64%)
Oklch
oklch(46.1% 0.017 88.8)

Traditional「Ochre」· Paint「Charcoal」· Creative Midnight Shadow

#696356

Ochre · DimGray · Honey Gold

HEX
#696356
RGB
rgb(105, 99, 86)
HSL
hsl(41, 10%, 37%)
HSB
hsb(41, 18%, 41%)
CMYK
cmyk(0%, 6%, 18%, 59%)
Oklch
oklch(50.1% 0.021 86.2)

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

#DBDBDB

Plain White · LightGray · Cloud White

HEX
#DBDBDB
RGB
rgb(219, 219, 219)
HSL
hsl(0, 0%, 86%)
HSB
hsb(0, 0%, 86%)
CMYK
cmyk(0%, 0%, 0%, 14%)
Oklch
oklch(89.1% 0.000 89.9)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

35362F
312F37

Analogous

37342F
35362F
32372F

Triadic

35362F
2F3537
372F35

Split-Comp.

35362F
2F3237
342F37

Tetradic

35362F
2F3734
312F37
372F32

Contrast Matrix WCAG 2.1 Contrast

35362F
F0AE13
5C584E
696356
DBDBDB
—
6.3
AA
1.7
Fail
2.0
Fail
8.8
AAA
6.3
AA
—
3.6
AA Large
3.1
AA Large
1.4
Fail
1.7
Fail
3.6
AA Large
—
1.2
Fail
5.1
AA
2.0
Fail
3.1
AA Large
1.2
Fail
—
4.3
AA Large
8.8
AAA
1.4
Fail
5.1
AA
4.3
AA Large
—
White BG
12.2AAA
2.0Fail
7.1AAA
6.0AA
1.4Fail
Black BG
1.7Fail
10.8AAA
3.0Fail
3.5AA Large
15.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

353531
D3D339
5A5A50
666659
DBDBDB

Deuteranopia

353531
D7DC42
5B5B51
67675A
DBDBDB

Tritanopia

353232
ED565D
5C5253
695C5C
DBDBDB

Achromatopsia

353535
B0B0B0
585858
636363
DBDBDB

Shades & Tints Shades & Tints

#35362F

Dark
Light

#F0AE13

Dark
Light

#5C584E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #35362f;
  --color-2: #f0ae13;
  --color-3: #5c584e;
  --color-4: #696356;
  --color-5: #dbdbdb;
}

SCSS

$color-1: #35362f;
$color-2: #f0ae13;
$color-3: #5c584e;
$color-4: #696356;
$color-5: #dbdbdb;

TAILWIND

colors: {
  'brand-1': '#35362f',
  'brand-2': '#f0ae13',
  'brand-3': '#5c584e',
  'brand-4': '#696356',
  'brand-5': '#dbdbdb',
}

RGB Array

[53, 54, 47], [240, 174, 19], [92, 88, 78], [105, 99, 86], [219, 219, 219]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #35362F, #F0AE13, #5C584E, #696356, #DBDBDB is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #35362f; --color-2: #f0ae13; --color-3: #5c584e; --color-4: #696356; --color-5: #dbdbdb. 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. Restrained colors convey professionalism and trust. 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