← Back to Editor

#2F2317 · #746635 · #9D6D19 · #D3C3A1 · #4C635D

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

#2F2317

Ochre · Black · Cinnamon

HEX
#2F2317
RGB
rgb(47, 35, 23)
HSL
hsl(30, 34%, 14%)
HSB
hsb(30, 51%, 18%)
CMYK
cmyk(0%, 26%, 51%, 82%)
Oklch
oklch(26.7% 0.028 66.2)

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

#746635

Ochre · DarkOliveGreen · Honey Gold

HEX
#746635
RGB
rgb(116, 102, 53)
HSL
hsl(47, 37%, 33%)
HSB
hsb(47, 54%, 45%)
CMYK
cmyk(0%, 12%, 54%, 55%)
Oklch
oklch(51.2% 0.070 93.8)

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

#9D6D19

Ochre · Sienna · Amber Brown

HEX
#9D6D19
RGB
rgb(157, 109, 25)
HSL
hsl(38, 73%, 36%)
HSB
hsb(38, 84%, 62%)
CMYK
cmyk(0%, 31%, 84%, 38%)
Oklch
oklch(57.1% 0.111 75.6)

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

#D3C3A1

Goose Yellow · Tan · Sunflower

HEX
#D3C3A1
RGB
rgb(211, 195, 161)
HSL
hsl(41, 36%, 73%)
HSB
hsb(41, 24%, 83%)
CMYK
cmyk(0%, 8%, 24%, 17%)
Oklch
oklch(82.2% 0.049 85.8)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#4C635D

Mineral Blue · DimGray · Mint Ice

HEX
#4C635D
RGB
rgb(76, 99, 93)
HSL
hsl(164, 13%, 34%)
HSB
hsb(164, 23%, 39%)
CMYK
cmyk(23%, 0%, 6%, 61%)
Oklch
oklch(47.9% 0.029 177.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2F2317
182430

Analogous

301818
2F2317
303018

Triadic

2F2317
183024
241830

Split-Comp.

2F2317
183030
181830

Tetradic

2F2317
183018
182430
301830

Contrast Matrix WCAG 2.1 Contrast

2F2317
746635
9D6D19
D3C3A1
4C635D
—
2.7
Fail
3.4
AA Large
8.8
AAA
2.4
Fail
2.7
Fail
—
1.3
Fail
3.3
AA Large
1.1
Fail
3.4
AA Large
1.3
Fail
—
2.6
Fail
1.4
Fail
8.8
AAA
3.3
AA Large
2.6
Fail
—
3.7
AA Large
2.4
Fail
1.1
Fail
1.4
Fail
3.7
AA Large
—
White BG
15.3AAA
5.7AA
4.5AA
1.7Fail
6.5AA
Black BG
1.4Fail
3.7AA Large
4.6AA
12.1AAA
3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

2A2A1A
6E6E41
88882D
CCCCA9
56565E

Deuteranopia

2B2B1B
6F7044
8B8F32
CDCEAB
55535F

Tritanopia

2E1C1D
734A4C
9B3D41
D2B0B1
4D6060

Achromatopsia

252525
656565
727272
C4C4C4
5B5B5B

Shades & Tints Shades & Tints

#2F2317

Dark
Light

#746635

Dark
Light

#9D6D19

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2f2317;
  --color-2: #746635;
  --color-3: #9d6d19;
  --color-4: #d3c3a1;
  --color-5: #4c635d;
}

SCSS

$color-1: #2f2317;
$color-2: #746635;
$color-3: #9d6d19;
$color-4: #d3c3a1;
$color-5: #4c635d;

TAILWIND

colors: {
  'brand-1': '#2f2317',
  'brand-2': '#746635',
  'brand-3': '#9d6d19',
  'brand-4': '#d3c3a1',
  'brand-5': '#4c635d',
}

RGB Array

[47, 35, 23], [116, 102, 53], [157, 109, 25], [211, 195, 161], [76, 99, 93]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2F2317, #746635, #9D6D19, #D3C3A1, #4C635D 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: #2f2317; --color-2: #746635; --color-3: #9d6d19; --color-4: #d3c3a1; --color-5: #4c635d. 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