#373447 + #525065 + #AB2B5B + #D0244C + #CAD14F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#373447

Deep Indigo · DarkSlateGray · Prussian Blue

HEX

#373447

RGB

rgb(55, 52, 71)

HSL

hsl(249, 15%, 24%)

HSB

hsb(249, 27%, 28%)

CMYK

cmyk(23%, 27%, 0%, 72%)

Oklch

oklch(33.6% 0.033 291.7)

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

#525065

Deep Indigo · DimGray · Prussian Blue

HEX

#525065

RGB

rgb(82, 80, 101)

HSL

hsl(246, 12%, 35%)

HSB

hsb(246, 21%, 40%)

CMYK

cmyk(19%, 21%, 0%, 60%)

Oklch

oklch(44.1% 0.034 289.3)

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

#AB2B5B

Dark Violet · Brown · Camellia

HEX

#AB2B5B

RGB

rgb(171, 43, 91)

HSL

hsl(338, 60%, 42%)

HSB

hsb(338, 75%, 67%)

CMYK

cmyk(0%, 75%, 47%, 33%)

Oklch

oklch(50.3% 0.167 2.9)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#D0244C

Vermilion · Crimson · Passion Red

HEX

#D0244C

RGB

rgb(208, 36, 76)

HSL

hsl(346, 70%, 48%)

HSB

hsb(346, 83%, 82%)

CMYK

cmyk(0%, 83%, 63%, 18%)

Oklch

oklch(55.9% 0.204 15.1)

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

#CAD14F

Autumn Sage · GreenYellow · Sunflower

HEX

#CAD14F

RGB

rgb(202, 209, 79)

HSL

hsl(63, 59%, 56%)

HSB

hsb(63, 62%, 82%)

CMYK

cmyk(3%, 0%, 62%, 18%)

Oklch

oklch(83.1% 0.151 112.2)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

373447

444634

Analogous

343A46

373447

403446

Triadic

373447

463734

344637

Split-Comp.

373447

464034

3A4634

Tetradic

373447

46343A

444634

344640

Contrast Matrix WCAG 2.1 Contrast

373447	525065	AB2B5B	D0244C	CAD14F
—	1.5 Fail	1.9 Fail	2.3 Fail	7.3 AAA
1.5 Fail	—	1.2 Fail	1.5 Fail	4.7 AA
1.9 Fail	1.2 Fail	—	1.3 Fail	3.9 AA Large
2.3 Fail	1.5 Fail	1.3 Fail	—	3.2 AA Large
7.3 AAA	4.7 AA	3.9 AA Large	3.2 AA Large	—

White BG

12.0AAA

7.8AAA

6.5AA

5.2AA

1.6Fail

Black BG

1.7Fail

2.7Fail

3.2AA Large

4.0AA Large

12.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

363642

515160

74724F

868442

CDCD6E

Deuteranopia

363641

51515F

7B854D

909C40

CDCC76

Tritanopia

373F3E

525C5B

A54644

C73B39

CA878D

Achromatopsia

373737

535353

575757

5C5C5C

C0C0C0

Shades & Tints Shades & Tints

#373447

Dark

Light

#525065

Dark

Light

#AB2B5B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #373447;
  --color-2: #525065;
  --color-3: #ab2b5b;
  --color-4: #d0244c;
  --color-5: #cad14f;
}

SCSS

$color-1: #373447;
$color-2: #525065;
$color-3: #ab2b5b;
$color-4: #d0244c;
$color-5: #cad14f;

TAILWIND

colors: {
  'brand-1': '#373447',
  'brand-2': '#525065',
  'brand-3': '#ab2b5b',
  'brand-4': '#d0244c',
  'brand-5': '#cad14f',
}

RGB Array

[55, 52, 71], [82, 80, 101], [171, 43, 91], [208, 36, 76], [202, 209, 79]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #373447, #525065, #AB2B5B, #D0244C, #CAD14F 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: #373447; --color-2: #525065; --color-3: #ab2b5b; --color-4: #d0244c; --color-5: #cad14f. 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