#2C4D66 + #456983 + #7E94A4 + #CB8792 + #EF3E5A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#2C4D66

Slate Blue · DarkSlateGray · Prussian Blue

HEX

#2C4D66

RGB

rgb(44, 77, 102)

HSL

hsl(206, 40%, 29%)

HSB

hsb(206, 57%, 40%)

CMYK

cmyk(57%, 25%, 0%, 60%)

Oklch

oklch(40.6% 0.057 242.7)

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

#456983

Slate Blue · DimGray · Prussian Blue

HEX

#456983

RGB

rgb(69, 105, 131)

HSL

hsl(205, 31%, 39%)

HSB

hsb(205, 47%, 51%)

CMYK

cmyk(47%, 20%, 0%, 49%)

Oklch

oklch(50.4% 0.059 240.8)

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

#7E94A4

Slate Blue · LightSlateGray · Navy Blue

HEX

#7E94A4

RGB

rgb(126, 148, 164)

HSL

hsl(205, 17%, 57%)

HSB

hsb(205, 23%, 64%)

CMYK

cmyk(23%, 10%, 0%, 36%)

Oklch

oklch(65.5% 0.035 239.7)

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

#CB8792

Peach Pink · DarkSalmon · Coral Red

HEX

#CB8792

RGB

rgb(203, 135, 146)

HSL

hsl(350, 40%, 66%)

HSB

hsb(350, 33%, 80%)

CMYK

cmyk(0%, 33%, 28%, 20%)

Oklch

oklch(69.5% 0.084 8.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#EF3E5A

Vermilion · Tomato · Passion Red

HEX

#EF3E5A

RGB

rgb(239, 62, 90)

HSL

hsl(351, 85%, 59%)

HSB

hsb(351, 74%, 94%)

CMYK

cmyk(0%, 74%, 62%, 6%)

Oklch

oklch(63.5% 0.212 17.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2C4D66

68462C

Analogous

2C6864

2C4D66

2C3068

Triadic

2C4D66

682C4E

4E682C

Split-Comp.

2C4D66

682C30

68642C

Tetradic

2C4D66

642C68

68462C

30682C

Contrast Matrix WCAG 2.1 Contrast

2C4D66	456983	7E94A4	CB8792	EF3E5A
—	1.5 Fail	2.8 Fail	3.1 AA Large	2.3 Fail
1.5 Fail	—	1.8 Fail	2.1 Fail	1.5 Fail
2.8 Fail	1.8 Fail	—	1.1 Fail	1.2 Fail
3.1 AA Large	2.1 Fail	1.1 Fail	—	1.3 Fail
2.3 Fail	1.5 Fail	1.2 Fail	1.3 Fail	—

White BG

8.9AAA

5.8AA

3.2AA Large

2.8Fail

3.8AA Large

Black BG

2.4Fail

3.6AA Large

6.7AA

7.4AAA

5.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3A3B60

55557D

8888A0

AEAD8F

A2A153

Deuteranopia

38365E

53507B

86859F

B2B78F

ADBA52

Tritanopia

2E5B5A

477877

7F9D9C

C88D8D

E64E4D

Achromatopsia

464646

616161

8F8F8F

9D9D9D

767676

Shades & Tints Shades & Tints

#2C4D66

Dark

Light

#456983

Dark

Light

#7E94A4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2c4d66;
  --color-2: #456983;
  --color-3: #7e94a4;
  --color-4: #cb8792;
  --color-5: #ef3e5a;
}

SCSS

$color-1: #2c4d66;
$color-2: #456983;
$color-3: #7e94a4;
$color-4: #cb8792;
$color-5: #ef3e5a;

TAILWIND

colors: {
  'brand-1': '#2c4d66',
  'brand-2': '#456983',
  'brand-3': '#7e94a4',
  'brand-4': '#cb8792',
  'brand-5': '#ef3e5a',
}

RGB Array

[44, 77, 102], [69, 105, 131], [126, 148, 164], [203, 135, 146], [239, 62, 90]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2C4D66, #456983, #7E94A4, #CB8792, #EF3E5A 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: #2c4d66; --color-2: #456983; --color-3: #7e94a4; --color-4: #cb8792; --color-5: #ef3e5a. 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