#680B2F + #753140 + #5E352F + #4B292B + #381D27 · 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

#680B2F

Dark Violet · Maroon · Raspberry

HEX

#680B2F

RGB

rgb(104, 11, 47)

HSL

hsl(337, 81%, 23%)

HSB

hsb(337, 89%, 41%)

CMYK

cmyk(0%, 89%, 55%, 59%)

Oklch

oklch(34.0% 0.126 5.1)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

#753140

Crimson · Brown · Wine Red

HEX

#753140

RGB

rgb(117, 49, 64)

HSL

hsl(347, 41%, 33%)

HSB

hsb(347, 58%, 46%)

CMYK

cmyk(0%, 58%, 45%, 54%)

Oklch

oklch(41.1% 0.097 8.6)

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

#5E352F

Crimson · DarkOliveGreen · Wine Red

HEX

#5E352F

RGB

rgb(94, 53, 47)

HSL

hsl(8, 33%, 28%)

HSB

hsb(8, 50%, 37%)

CMYK

cmyk(0%, 44%, 50%, 63%)

Oklch

oklch(37.8% 0.060 29.1)

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

#4B292B

Crimson · DarkSlateGray · Wine Red

HEX

#4B292B

RGB

rgb(75, 41, 43)

HSL

hsl(356, 29%, 23%)

HSB

hsb(356, 45%, 29%)

CMYK

cmyk(0%, 45%, 43%, 71%)

Oklch

oklch(32.6% 0.051 16.5)

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

#381D27

Dark Violet · DarkSlateGray · Raspberry

HEX

#381D27

RGB

rgb(56, 29, 39)

HSL

hsl(338, 32%, 17%)

HSB

hsb(338, 48%, 22%)

CMYK

cmyk(0%, 48%, 30%, 78%)

Oklch

oklch(27.1% 0.045 356.8)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

680B2F

0B6A46

Analogous

6A0B5F

680B2F

6A160B

Triadic

680B2F

306A0B

0B306A

Split-Comp.

680B2F

0B6A16

0B5F6A

Tetradic

680B2F

5F6A0B

0B6A46

160B6A

Contrast Matrix WCAG 2.1 Contrast

680B2F	753140	5E352F	4B292B	381D27
—	1.4 Fail	1.2 Fail	1.0 Fail	1.2 Fail
1.4 Fail	—	1.1 Fail	1.4 Fail	1.7 Fail
1.2 Fail	1.1 Fail	—	1.2 Fail	1.5 Fail
1.0 Fail	1.4 Fail	1.2 Fail	—	1.2 Fail
1.2 Fail	1.7 Fail	1.5 Fail	1.2 Fail	—

White BG

12.5AAA

9.3AAA

10.4AAA

12.7AAA

15.3AAA

Black BG

1.7Fail

2.3Fail

2.0Fail

1.7Fail

1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

403F26

58573C

4C4C30

3C3C2B

2C2C25

Deuteranopia

454C24

5C613C

4F5231

3E412A

2E3024

Tritanopia

631F1E

723A39

5C3232

492A2A

372322

Achromatopsia

2B2B2B

474747

414141

333333

262626

Shades & Tints Shades & Tints

#680B2F

Dark

Light

#753140

Dark

Light

#5E352F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #680b2f;
  --color-2: #753140;
  --color-3: #5e352f;
  --color-4: #4b292b;
  --color-5: #381d27;
}

SCSS

$color-1: #680b2f;
$color-2: #753140;
$color-3: #5e352f;
$color-4: #4b292b;
$color-5: #381d27;

TAILWIND

colors: {
  'brand-1': '#680b2f',
  'brand-2': '#753140',
  'brand-3': '#5e352f',
  'brand-4': '#4b292b',
  'brand-5': '#381d27',
}

RGB Array

[104, 11, 47], [117, 49, 64], [94, 53, 47], [75, 41, 43], [56, 29, 39]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #680B2F, #753140, #5E352F, #4B292B, #381D27 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: #680b2f; --color-2: #753140; --color-3: #5e352f; --color-4: #4b292b; --color-5: #381d27. 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