#ECB413 + #7E7191 + #4B3C6A + #381C5A + #13858D · 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

#ECB413

Ochre · GoldenRod · Honey Gold

HEX

#ECB413

RGB

rgb(236, 180, 19)

HSL

hsl(45, 85%, 50%)

HSB

hsb(45, 92%, 93%)

CMYK

cmyk(0%, 24%, 92%, 7%)

Oklch

oklch(79.9% 0.161 85.4)

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

#7E7191

Deep Indigo · SlateGray · Violet

HEX

#7E7191

RGB

rgb(126, 113, 145)

HSL

hsl(264, 13%, 51%)

HSB

hsb(264, 22%, 57%)

CMYK

cmyk(13%, 22%, 0%, 43%)

Oklch

oklch(57.2% 0.051 303.3)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

#4B3C6A

Deep Indigo · DarkSlateBlue · Eggplant

HEX

#4B3C6A

RGB

rgb(75, 60, 106)

HSL

hsl(260, 28%, 33%)

HSB

hsb(260, 43%, 42%)

CMYK

cmyk(29%, 43%, 0%, 58%)

Oklch

oklch(39.3% 0.078 297.8)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#381C5A

Deep Indigo · MidnightBlue · Eggplant

HEX

#381C5A

RGB

rgb(56, 28, 90)

HSL

hsl(267, 53%, 23%)

HSB

hsb(267, 69%, 35%)

CMYK

cmyk(38%, 69%, 0%, 65%)

Oklch

oklch(30.1% 0.107 300.9)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#13858D

Lake Blue · Teal · Mint Ice

HEX

#13858D

RGB

rgb(19, 133, 141)

HSL

hsl(184, 76%, 31%)

HSB

hsb(184, 87%, 55%)

CMYK

cmyk(87%, 6%, 0%, 45%)

Oklch

oklch(56.3% 0.092 202.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECB413

1349EC

Analogous

EC4913

ECB413

B6EC13

Triadic

ECB413

13ECB6

B613EC

Split-Comp.

ECB413

13B6EC

4913EC

Tetradic

ECB413

13EC49

1349EC

EC13B6

Contrast Matrix WCAG 2.1 Contrast

ECB413	7E7191	4B3C6A	381C5A	13858D
—	2.4 Fail	5.2 AA	7.5 AAA	2.3 Fail
2.4 Fail	—	2.2 Fail	3.1 AA Large	1.0 Fail
5.2 AA	2.2 Fail	—	1.5 Fail	2.2 Fail
7.5 AAA	3.1 AA Large	1.5 Fail	—	3.2 AA Large
2.3 Fail	1.0 Fail	2.2 Fail	3.2 AA Large	—

White BG

1.9Fail

4.5AA

9.8AAA

14.2AAA

4.4AA Large

Black BG

11.1AAA

4.7AA

2.2Fail

1.5Fail

4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D4D33A

787889

45445F

2C2C4B

44458B

Deuteranopia

D7DB43

797A87

45475C

2E3047

3E358B

Tritanopia

E9595F

7D8382

4A5654

373F3D

198A89

Achromatopsia

B2B2B2

797979

464646

2B2B2B

646464

Shades & Tints Shades & Tints

#ECB413

Dark

Light

#7E7191

Dark

Light

#4B3C6A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ecb413;
  --color-2: #7e7191;
  --color-3: #4b3c6a;
  --color-4: #381c5a;
  --color-5: #13858d;
}

SCSS

$color-1: #ecb413;
$color-2: #7e7191;
$color-3: #4b3c6a;
$color-4: #381c5a;
$color-5: #13858d;

TAILWIND

colors: {
  'brand-1': '#ecb413',
  'brand-2': '#7e7191',
  'brand-3': '#4b3c6a',
  'brand-4': '#381c5a',
  'brand-5': '#13858d',
}

RGB Array

[236, 180, 19], [126, 113, 145], [75, 60, 106], [56, 28, 90], [19, 133, 141]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #ECB413, #7E7191, #4B3C6A, #381C5A, #13858D 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: #ecb413; --color-2: #7e7191; --color-3: #4b3c6a; --color-4: #381c5a; --color-5: #13858d. 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