#1D313C + #1D4D57 + #9A7C5A + #963B38 + #5B432B · earth - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#1D313C

Slate Blue · DarkSlateGray · Deep Sea Blue

HEX

#1D313C

RGB

rgb(29, 49, 60)

HSL

hsl(201, 35%, 17%)

HSB

hsb(201, 52%, 24%)

CMYK

cmyk(52%, 18%, 0%, 76%)

Oklch

oklch(30.1% 0.033 233.4)

Traditional「Slate Blue」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#1D4D57

Slate Blue · DarkSlateGray · Peacock Green

HEX

#1D4D57

RGB

rgb(29, 77, 87)

HSL

hsl(190, 50%, 23%)

HSB

hsb(190, 67%, 34%)

CMYK

cmyk(67%, 11%, 0%, 66%)

Oklch

oklch(39.2% 0.054 213.6)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#9A7C5A

Ochre · Gray · Amber Brown

HEX

#9A7C5A

RGB

rgb(154, 124, 90)

HSL

hsl(32, 26%, 48%)

HSB

hsb(32, 42%, 60%)

CMYK

cmyk(0%, 19%, 42%, 40%)

Oklch

oklch(60.6% 0.061 69.8)

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

#963B38

Crimson · Brown · Wine Red

HEX

#963B38

RGB

rgb(150, 59, 56)

HSL

hsl(2, 46%, 40%)

HSB

hsb(2, 63%, 59%)

CMYK

cmyk(0%, 61%, 63%, 41%)

Oklch

oklch(47.7% 0.123 24.8)

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

#5B432B

Ochre · DarkOliveGreen · Amber Brown

HEX

#5B432B

RGB

rgb(91, 67, 43)

HSL

hsl(30, 36%, 26%)

HSB

hsb(30, 53%, 36%)

CMYK

cmyk(0%, 26%, 53%, 64%)

Oklch

oklch(40.3% 0.050 65.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1D313C

3B271C

Analogous

1C3B36

1D313C

1C213B

Triadic

1D313C

3B1C30

303B1C

Split-Comp.

1D313C

3B1C21

3B361C

Tetradic

1D313C

361C3B

3B271C

213B1C

Contrast Matrix WCAG 2.1 Contrast

1D313C	1D4D57	9A7C5A	963B38	5B432B
—	1.4 Fail	3.5 AA Large	1.9 Fail	1.5 Fail
1.4 Fail	—	2.4 Fail	1.3 Fail	1.0 Fail
3.5 AA Large	2.4 Fail	—	1.8 Fail	2.4 Fail
1.9 Fail	1.3 Fail	1.8 Fail	—	1.3 Fail
1.5 Fail	1.0 Fail	2.4 Fail	1.3 Fail	—

White BG

13.5AAA

9.3AAA

3.9AA Large

7.0AAA

9.2AAA

Black BG

1.6Fail

2.3Fail

5.4AA

3.0Fail

2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

262639

323255

8D8D62

6F6E39

515031

Deuteranopia

252339

2F2B54

8F9164

747B39

525432

Tritanopia

1E3737

1F5352

98696A

913939

5A3536

Achromatopsia

2C2C2C

404040

818181

565656

474747

Shades & Tints Shades & Tints

#1D313C

Dark

Light

#1D4D57

Dark

Light

#9A7C5A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1d313c;
  --color-2: #1d4d57;
  --color-3: #9a7c5a;
  --color-4: #963b38;
  --color-5: #5b432b;
}

SCSS

$color-1: #1d313c;
$color-2: #1d4d57;
$color-3: #9a7c5a;
$color-4: #963b38;
$color-5: #5b432b;

TAILWIND

colors: {
  'brand-1': '#1d313c',
  'brand-2': '#1d4d57',
  'brand-3': '#9a7c5a',
  'brand-4': '#963b38',
  'brand-5': '#5b432b',
}

RGB Array

[29, 49, 60], [29, 77, 87], [154, 124, 90], [150, 59, 56], [91, 67, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #1D313C, #1D4D57, #9A7C5A, #963B38, #5B432B 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: #1d313c; --color-2: #1d4d57; --color-3: #9a7c5a; --color-4: #963b38; --color-5: #5b432b. 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