#ED6E07 + #2C1C1F + #524052 + #595D71 + #698396 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#ED6E07

Tangerine · Chocolate · Amber Brown

HEX

#ED6E07

RGB

rgb(237, 110, 7)

HSL

hsl(27, 94%, 48%)

HSB

hsb(27, 97%, 93%)

CMYK

cmyk(0%, 54%, 97%, 7%)

Oklch

oklch(68.0% 0.181 48.9)

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

#2C1C1F

Crimson · Black · Deep Berry

HEX

#2C1C1F

RGB

rgb(44, 28, 31)

HSL

hsl(349, 22%, 14%)

HSB

hsb(349, 36%, 17%)

CMYK

cmyk(0%, 36%, 30%, 83%)

Oklch

oklch(24.8% 0.026 6.7)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#524052

Rose Purple · DarkSlateGray · Eggplant

HEX

#524052

RGB

rgb(82, 64, 82)

HSL

hsl(300, 12%, 29%)

HSB

hsb(300, 22%, 32%)

CMYK

cmyk(0%, 22%, 0%, 68%)

Oklch

oklch(39.7% 0.038 326.3)

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

#595D71

Indigo · DimGray · Prussian Blue

HEX

#595D71

RGB

rgb(89, 93, 113)

HSL

hsl(230, 12%, 40%)

HSB

hsb(230, 21%, 44%)

CMYK

cmyk(21%, 18%, 0%, 56%)

Oklch

oklch(48.2% 0.033 276.2)

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

#698396

Slate Blue · SlateGray · Navy Blue

HEX

#698396

RGB

rgb(105, 131, 150)

HSL

hsl(205, 18%, 50%)

HSB

hsb(205, 30%, 59%)

CMYK

cmyk(30%, 13%, 0%, 41%)

Oklch

oklch(59.7% 0.042 240.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ED6E07

0786ED

Analogous

ED0713

ED6E07

EDE207

Triadic

ED6E07

07ED6F

6F07ED

Split-Comp.

ED6E07

07EDE2

0713ED

Tetradic

ED6E07

13ED07

0786ED

E207ED

Contrast Matrix WCAG 2.1 Contrast

ED6E07	2C1C1F	524052	595D71	698396
—	5.3 AA	3.1 AA Large	2.1 Fail	1.3 Fail
5.3 AA	—	1.7 Fail	2.5 Fail	4.1 AA Large
3.1 AA Large	1.7 Fail	—	1.5 Fail	2.4 Fail
2.1 Fail	2.5 Fail	1.5 Fail	—	1.6 Fail
1.3 Fail	4.1 AA Large	2.4 Fail	1.6 Fail	—

White BG

3.1AA Large

16.2AAA

9.5AAA

6.5AA

4.0AA Large

Black BG

6.8AA

1.3Fail

2.2Fail

3.2AA Large

5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B520

25251E

4A4A4E

5B5B6C

747491

Deuteranopia

BDC726

26271E

4B4D4D

5B5A6B

737190

Tritanopia

E73438

2B1E1E

514A49

596868

6A8E8D

Achromatopsia

888888

212121

474747

5E5E5E

7D7D7D

Shades & Tints Shades & Tints

#ED6E07

Dark

Light

#2C1C1F

Dark

Light

#524052

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ed6e07;
  --color-2: #2c1c1f;
  --color-3: #524052;
  --color-4: #595d71;
  --color-5: #698396;
}

SCSS

$color-1: #ed6e07;
$color-2: #2c1c1f;
$color-3: #524052;
$color-4: #595d71;
$color-5: #698396;

TAILWIND

colors: {
  'brand-1': '#ed6e07',
  'brand-2': '#2c1c1f',
  'brand-3': '#524052',
  'brand-4': '#595d71',
  'brand-5': '#698396',
}

RGB Array

[237, 110, 7], [44, 28, 31], [82, 64, 82], [89, 93, 113], [105, 131, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ED6E07, #2C1C1F, #524052, #595D71, #698396 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: #ed6e07; --color-2: #2c1c1f; --color-3: #524052; --color-4: #595d71; --color-5: #698396. 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 general-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