#DE2327 + #A93D37 + #745647 + #3F7057 + #0A8967 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#DE2327

Vermilion · Crimson · Passion Red

HEX

#DE2327

RGB

rgb(222, 35, 39)

HSL

hsl(359, 74%, 50%)

HSB

hsb(359, 84%, 87%)

CMYK

cmyk(0%, 84%, 82%, 13%)

Oklch

oklch(57.9% 0.218 26.8)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#A93D37

Crimson · Brown · Passion Red

HEX

#A93D37

RGB

rgb(169, 61, 55)

HSL

hsl(3, 51%, 44%)

HSB

hsb(3, 67%, 66%)

CMYK

cmyk(0%, 64%, 67%, 34%)

Oklch

oklch(51.1% 0.143 26.6)

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

#745647

Tangerine · DimGray · Amber Brown

HEX

#745647

RGB

rgb(116, 86, 71)

HSL

hsl(20, 24%, 37%)

HSB

hsb(20, 39%, 45%)

CMYK

cmyk(0%, 26%, 39%, 55%)

Oklch

oklch(48.0% 0.046 47.7)

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

#3F7057

Celadon · SeaGreen · Forest Green

HEX

#3F7057

RGB

rgb(63, 112, 87)

HSL

hsl(149, 28%, 34%)

HSB

hsb(149, 44%, 44%)

CMYK

cmyk(44%, 0%, 22%, 56%)

Oklch

oklch(50.3% 0.067 160.4)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#0A8967

Mineral Blue · Teal · Mint Ice

HEX

#0A8967

RGB

rgb(10, 137, 103)

HSL

hsl(164, 86%, 29%)

HSB

hsb(164, 93%, 54%)

CMYK

cmyk(93%, 0%, 25%, 46%)

Oklch

oklch(56.0% 0.112 167.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DE2327

21DEDB

Analogous

DE2183

DE2327

DE7C21

Triadic

DE2327

24DE21

2124DE

Split-Comp.

DE2327

21DE7C

2183DE

Tetradic

DE2327

83DE21

21DEDB

7C21DE

Contrast Matrix WCAG 2.1 Contrast

DE2327	A93D37	745647	3F7057	0A8967
—	1.3 Fail	1.4 Fail	1.2 Fail	1.1 Fail
1.3 Fail	—	1.1 Fail	1.1 Fail	1.4 Fail
1.4 Fail	1.1 Fail	—	1.2 Fail	1.5 Fail
1.2 Fail	1.1 Fail	1.2 Fail	—	1.3 Fail
1.1 Fail	1.4 Fail	1.5 Fail	1.3 Fail	—

White BG

4.8AA

6.2AA

6.6AA

5.7AA

4.4AA Large

Black BG

4.4AA Large

3.4AA Large

3.2AA Large

3.7AA Large

4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8D8B26

7A7938

67674B

54555D

41426F

Deuteranopia

98A626

818939

696B4C

514E5F

3A3071

Tritanopia

D52525

A43A3A

724D4E

416263

107677

Achromatopsia

5B5B5B

5D5D5D

5E5E5E

5F5F5F

Shades & Tints Shades & Tints

#DE2327

Dark

Light

#A93D37

Dark

Light

#745647

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #de2327;
  --color-2: #a93d37;
  --color-3: #745647;
  --color-4: #3f7057;
  --color-5: #0a8967;
}

SCSS

$color-1: #de2327;
$color-2: #a93d37;
$color-3: #745647;
$color-4: #3f7057;
$color-5: #0a8967;

TAILWIND

colors: {
  'brand-1': '#de2327',
  'brand-2': '#a93d37',
  'brand-3': '#745647',
  'brand-4': '#3f7057',
  'brand-5': '#0a8967',
}

RGB Array

[222, 35, 39], [169, 61, 55], [116, 86, 71], [63, 112, 87], [10, 137, 103]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DE2327, #A93D37, #745647, #3F7057, #0A8967 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: #de2327; --color-2: #a93d37; --color-3: #745647; --color-4: #3f7057; --color-5: #0a8967. 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