← Back to Editor

#3E3B34 · #786757 · #BBB97E · #FDE368 · #FFBC4F

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

#3E3B34

Ochre · DarkSlateGray · Dark Stone

HEX
#3E3B34
RGB
rgb(62, 59, 52)
HSL
hsl(42, 9%, 22%)
HSB
hsb(42, 16%, 24%)
CMYK
cmyk(0%, 5%, 16%, 76%)
Oklch
oklch(35.3% 0.013 87.6)

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

#786757

Tangerine · DimGray · Amber Brown

HEX
#786757
RGB
rgb(120, 103, 87)
HSL
hsl(29, 16%, 41%)
HSB
hsb(29, 27%, 47%)
CMYK
cmyk(0%, 14%, 27%, 53%)
Oklch
oklch(52.5% 0.033 65.3)

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

#BBB97E

Fresh Green · Tan · Sunflower

HEX
#BBB97E
RGB
rgb(187, 185, 126)
HSL
hsl(58, 31%, 61%)
HSB
hsb(58, 33%, 73%)
CMYK
cmyk(0%, 1%, 33%, 27%)
Oklch
oklch(77.3% 0.078 106.4)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#FDE368

Fresh Green · Khaki · Sunflower

HEX
#FDE368
RGB
rgb(253, 227, 104)
HSL
hsl(50, 97%, 70%)
HSB
hsb(50, 59%, 99%)
CMYK
cmyk(0%, 10%, 59%, 1%)
Oklch
oklch(91.4% 0.144 97.5)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#FFBC4F

Ginger · SandyBrown · Warm Sun

HEX
#FFBC4F
RGB
rgb(255, 188, 79)
HSL
hsl(37, 100%, 65%)
HSB
hsb(37, 69%, 100%)
CMYK
cmyk(0%, 26%, 69%, 0%)
Oklch
oklch(83.8% 0.145 76.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3E3B34
33363D

Analogous

3D3533
3E3B34
3B3D33

Triadic

3E3B34
333D3A
3A333D

Split-Comp.

3E3B34
333B3D
35333D

Tetradic

3E3B34
333D35
33363D
3D333B

Contrast Matrix WCAG 2.1 Contrast

3E3B34
786757
BBB97E
FDE368
FFBC4F
—
2.1
Fail
5.5
AA
8.7
AAA
6.7
AA
2.1
Fail
—
2.7
Fail
4.2
AA Large
3.2
AA Large
5.5
AA
2.7
Fail
—
1.6
Fail
1.2
Fail
8.7
AAA
4.2
AA Large
1.6
Fail
—
1.3
Fail
6.7
AA
3.2
AA Large
1.2
Fail
1.3
Fail
—
White BG
11.2AAA
5.4AA
2.0Fail
1.3Fail
1.7Fail
Black BG
1.9Fail
3.9AA Large
10.4AAA
16.4AAA
12.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3D3D36
71705B
BABA8C
F2F286
E2E169

Deuteranopia

3D3D36
72735C
BABA90
F3F58D
E6EB70

Tritanopia

3E3737
775E5F
BB989A
FC9DA2
FC7E83

Achromatopsia

3B3B3B
6A6A6A
B3B3B3
DDDDDD
C4C4C4

Shades & Tints Shades & Tints

#3E3B34

Dark
Light

#786757

Dark
Light

#BBB97E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3e3b34;
  --color-2: #786757;
  --color-3: #bbb97e;
  --color-4: #fde368;
  --color-5: #ffbc4f;
}

SCSS

$color-1: #3e3b34;
$color-2: #786757;
$color-3: #bbb97e;
$color-4: #fde368;
$color-5: #ffbc4f;

TAILWIND

colors: {
  'brand-1': '#3e3b34',
  'brand-2': '#786757',
  'brand-3': '#bbb97e',
  'brand-4': '#fde368',
  'brand-5': '#ffbc4f',
}

RGB Array

[62, 59, 52], [120, 103, 87], [187, 185, 126], [253, 227, 104], [255, 188, 79]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3E3B34, #786757, #BBB97E, #FDE368, #FFBC4F 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: #3e3b34; --color-2: #786757; --color-3: #bbb97e; --color-4: #fde368; --color-5: #ffbc4f. 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