#372F46 + #9F407A + #DDB64D + #477887 + #E57530 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#372F46

Deep Indigo · DarkSlateGray · Eggplant

HEX

#372F46

RGB

rgb(55, 47, 70)

HSL

hsl(261, 20%, 23%)

HSB

hsb(261, 33%, 27%)

CMYK

cmyk(21%, 33%, 0%, 73%)

Oklch

oklch(32.4% 0.041 300.1)

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

#9F407A

Rose Purple · MediumVioletRed · Camellia

HEX

#9F407A

RGB

rgb(159, 64, 122)

HSL

hsl(323, 43%, 44%)

HSB

hsb(323, 60%, 62%)

CMYK

cmyk(0%, 60%, 23%, 38%)

Oklch

oklch(51.8% 0.143 345.6)

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

#DDB64D

Ginger · SandyBrown · Sunflower

HEX

#DDB64D

RGB

rgb(221, 182, 77)

HSL

hsl(44, 68%, 58%)

HSB

hsb(44, 65%, 87%)

CMYK

cmyk(0%, 18%, 65%, 13%)

Oklch

oklch(79.1% 0.130 88.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#477887

Slate Blue · SlateGray · Mint Ice

HEX

#477887

RGB

rgb(71, 120, 135)

HSL

hsl(194, 31%, 40%)

HSB

hsb(194, 47%, 53%)

CMYK

cmyk(47%, 11%, 0%, 47%)

Oklch

oklch(54.4% 0.058 219.5)

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

#E57530

Tangerine · Chocolate · Warm Sun

HEX

#E57530

RGB

rgb(229, 117, 48)

HSL

hsl(23, 78%, 54%)

HSB

hsb(23, 79%, 90%)

CMYK

cmyk(0%, 49%, 79%, 10%)

Oklch

oklch(68.1% 0.160 48.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

372F46

3E462F

Analogous

2F3246

372F46

432F46

Triadic

372F46

46372F

2F4637

Split-Comp.

372F46

46432F

32462F

Tetradic

372F46

462F32

3E462F

2F4643

Contrast Matrix WCAG 2.1 Contrast

372F46	9F407A	DDB64D	477887	E57530
—	2.1 Fail	6.6 AA	2.6 Fail	4.2 AA Large
2.1 Fail	—	3.1 AA Large	1.2 Fail	2.0 Fail
6.6 AA	3.1 AA Large	—	2.5 Fail	1.6 Fail
2.6 Fail	1.2 Fail	2.5 Fail	—	1.6 Fail
4.2 AA Large	2.0 Fail	1.6 Fail	1.6 Fail	—

White BG

12.7AAA

6.0AA

1.9Fail

4.9AA

3.0AA Large

Black BG

1.7Fail

3.5AA Large

10.9AAA

4.3AA Large

6.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

343340

76756C

CCCC66

5C5D83

B5B341

Deuteranopia

34353F

7B8369

CED16D

595683

BBC345

Tritanopia

373C3B

9A615E

DB7A7F

498180

DF4E51

Achromatopsia

343434

636363

B6B6B6

6B6B6B

8F8F8F

Shades & Tints Shades & Tints

#372F46

Dark

Light

#9F407A

Dark

Light

#DDB64D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #372f46;
  --color-2: #9f407a;
  --color-3: #ddb64d;
  --color-4: #477887;
  --color-5: #e57530;
}

SCSS

$color-1: #372f46;
$color-2: #9f407a;
$color-3: #ddb64d;
$color-4: #477887;
$color-5: #e57530;

TAILWIND

colors: {
  'brand-1': '#372f46',
  'brand-2': '#9f407a',
  'brand-3': '#ddb64d',
  'brand-4': '#477887',
  'brand-5': '#e57530',
}

RGB Array

[55, 47, 70], [159, 64, 122], [221, 182, 77], [71, 120, 135], [229, 117, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #372F46, #9F407A, #DDB64D, #477887, #E57530 is ideal for: corporate websites, product showcases, portfolios. 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: #372f46; --color-2: #9f407a; --color-3: #ddb64d; --color-4: #477887; --color-5: #e57530. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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