#3B0F2A + #3F283A + #595A52 + #6A745C + #170D01 · earth - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3B0F2A

Rose Purple · Black · Raspberry

HEX

#3B0F2A

RGB

rgb(59, 15, 42)

HSL

hsl(323, 59%, 15%)

HSB

hsb(323, 75%, 23%)

CMYK

cmyk(0%, 75%, 29%, 77%)

Oklch

oklch(25.3% 0.077 346.2)

Traditional「Rose Purple」· Paint「Raspberry」· Creative Blush Sunrise

#3F283A

Rose Purple · DarkSlateGray · Dark Purple

HEX

#3F283A

RGB

rgb(63, 40, 58)

HSL

hsl(313, 22%, 20%)

HSB

hsb(313, 37%, 25%)

CMYK

cmyk(0%, 37%, 8%, 75%)

Oklch

oklch(31.2% 0.045 334.7)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

#595A52

Ink Gray · DimGray · Charcoal

HEX

#595A52

RGB

rgb(89, 90, 82)

HSL

hsl(68, 5%, 34%)

HSB

hsb(68, 9%, 35%)

CMYK

cmyk(1%, 0%, 9%, 65%)

Oklch

oklch(46.4% 0.013 112.7)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#6A745C

Grass Green · DimGray · Olive Green

HEX

#6A745C

RGB

rgb(106, 116, 92)

HSL

hsl(85, 12%, 41%)

HSB

hsb(85, 21%, 45%)

CMYK

cmyk(9%, 0%, 21%, 55%)

Oklch

oklch(54.4% 0.038 126.0)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#170D01

Ochre · Black · Cinnamon

HEX

#170D01

RGB

rgb(23, 13, 1)

HSL

hsl(33, 92%, 5%)

HSB

hsb(33, 96%, 9%)

CMYK

cmyk(0%, 43%, 96%, 91%)

Oklch

oklch(16.9% 0.032 76.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3B0F2A

103D21

Analogous

38103D

3B0F2A

3D1015

Triadic

3B0F2A

2C3D10

102C3D

Split-Comp.

3B0F2A

153D10

103D38

Tetradic

3B0F2A

3D3810

103D21

10153D

Contrast Matrix WCAG 2.1 Contrast

3B0F2A	3F283A	595A52	6A745C	170D01
—	1.2 Fail	2.3 Fail	3.3 AA Large	1.2 Fail
1.2 Fail	—	1.9 Fail	2.7 Fail	1.4 Fail
2.3 Fail	1.9 Fail	—	1.4 Fail	2.7 Fail
3.3 AA Large	2.7 Fail	1.4 Fail	—	3.9 AA Large
1.2 Fail	1.4 Fail	2.7 Fail	3.9 AA Large	—

White BG

16.3AAA

13.3AAA

7.0AA

4.9AA

19.2AAA

Black BG

1.3Fail

1.6Fail

3.0AA Large

4.3AA Large

1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

282823

353536

595954

6E6E62

131304

Deuteranopia

2B2E22

363835

595954

6E6D63

131405

Tritanopia

391E1D

3E3231

595556

6A6667

160607

Achromatopsia

1F1F1F

313131

595959

6E6E6E

0F0F0F

Shades & Tints Shades & Tints

#3B0F2A

Dark

Light

#3F283A

Dark

Light

#595A52

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3b0f2a;
  --color-2: #3f283a;
  --color-3: #595a52;
  --color-4: #6a745c;
  --color-5: #170d01;
}

SCSS

$color-1: #3b0f2a;
$color-2: #3f283a;
$color-3: #595a52;
$color-4: #6a745c;
$color-5: #170d01;

TAILWIND

colors: {
  'brand-1': '#3b0f2a',
  'brand-2': '#3f283a',
  'brand-3': '#595a52',
  'brand-4': '#6a745c',
  'brand-5': '#170d01',
}

RGB Array

[59, 15, 42], [63, 40, 58], [89, 90, 82], [106, 116, 92], [23, 13, 1]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #3B0F2A, #3F283A, #595A52, #6A745C, #170D01 is ideal for: tech websites, dark mode UIs, game UIs. 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: #3b0f2a; --color-2: #3f283a; --color-3: #595a52; --color-4: #6a745c; --color-5: #170d01. 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. 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 earth-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