#2B5577 + #4F457A + #753456 + #B14B22 + #E27927 · 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

#2B5577

Slate Blue · DarkSlateGray · Prussian Blue

HEX

#2B5577

RGB

rgb(43, 85, 119)

HSL

hsl(207, 47%, 32%)

HSB

hsb(207, 64%, 47%)

CMYK

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

Oklch

oklch(43.5% 0.074 245.1)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#4F457A

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX

#4F457A

RGB

rgb(79, 69, 122)

HSL

hsl(251, 28%, 37%)

HSB

hsb(251, 43%, 48%)

CMYK

cmyk(35%, 43%, 0%, 52%)

Oklch

oklch(42.5% 0.086 290.9)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#753456

Rose Purple · DimGray · Camellia

HEX

#753456

RGB

rgb(117, 52, 86)

HSL

hsl(329, 38%, 33%)

HSB

hsb(329, 56%, 46%)

CMYK

cmyk(0%, 56%, 26%, 54%)

Oklch

oklch(42.3% 0.100 349.6)

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

#B14B22

Tangerine · Sienna · Amber Brown

HEX

#B14B22

RGB

rgb(177, 75, 34)

HSL

hsl(17, 68%, 41%)

HSB

hsb(17, 81%, 69%)

CMYK

cmyk(0%, 58%, 81%, 31%)

Oklch

oklch(54.0% 0.144 40.6)

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

#E27927

Tangerine · Chocolate · Warm Sun

HEX

#E27927

RGB

rgb(226, 121, 39)

HSL

hsl(26, 76%, 52%)

HSB

hsb(26, 83%, 89%)

CMYK

cmyk(0%, 46%, 83%, 11%)

Oklch

oklch(68.3% 0.157 53.1)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2B5577

784E2B

Analogous

2B7874

2B5577

2B2F78

Triadic

2B5577

782B55

55782B

Split-Comp.

2B5577

782B2F

78742B

Tetradic

2B5577

742B78

784E2B

2F782B

Contrast Matrix WCAG 2.1 Contrast

2B5577	4F457A	753456	B14B22	E27927
—	1.1 Fail	1.1 Fail	1.5 Fail	2.6 Fail
1.1 Fail	—	1.0 Fail	1.6 Fail	2.8 Fail
1.1 Fail	1.0 Fail	—	1.6 Fail	2.9 Fail
1.5 Fail	1.6 Fail	1.6 Fail	—	1.8 Fail
2.6 Fail	2.8 Fail	2.9 Fail	1.8 Fail	—

White BG

7.9AAA

8.5AAA

8.8AAA

5.4AA

3.0AA Large

Black BG

2.7Fail

2.5Fail

2.4Fail

3.9AA Large

7.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3D3E6F

4B4B6D

59584E

85842C

B5B43B

Deuteranopia

3B386D

4B4C6A

5D614C

8B922E

BBC340

Tritanopia

2D6867

4F6361

724746

AC3435

DD4B4E

Achromatopsia

4C4C4C

4E4E4E

4B4B4B

656565

8F8F8F

Shades & Tints Shades & Tints

#2B5577

Dark

Light

#4F457A

Dark

Light

#753456

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2b5577;
  --color-2: #4f457a;
  --color-3: #753456;
  --color-4: #b14b22;
  --color-5: #e27927;
}

SCSS

$color-1: #2b5577;
$color-2: #4f457a;
$color-3: #753456;
$color-4: #b14b22;
$color-5: #e27927;

TAILWIND

colors: {
  'brand-1': '#2b5577',
  'brand-2': '#4f457a',
  'brand-3': '#753456',
  'brand-4': '#b14b22',
  'brand-5': '#e27927',
}

RGB Array

[43, 85, 119], [79, 69, 122], [117, 52, 86], [177, 75, 34], [226, 121, 39]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #2B5577, #4F457A, #753456, #B14B22, #E27927 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: #2b5577; --color-2: #4f457a; --color-3: #753456; --color-4: #b14b22; --color-5: #e27927. 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