← Back to Editor

#2C3E64 · #425887 · #AF6773 · #E28C73 · #FAF6ED

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#2C3E64

Indigo · DarkSlateGray · Prussian Blue

HEX
#2C3E64
RGB
rgb(44, 62, 100)
HSL
hsl(221, 39%, 28%)
HSB
hsb(221, 56%, 39%)
CMYK
cmyk(56%, 38%, 0%, 61%)
Oklch
oklch(36.8% 0.070 264.0)

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

#425887

Indigo · DarkSlateBlue · Prussian Blue

HEX
#425887
RGB
rgb(66, 88, 135)
HSL
hsl(221, 34%, 39%)
HSB
hsb(221, 51%, 53%)
CMYK
cmyk(51%, 35%, 0%, 47%)
Oklch
oklch(46.4% 0.082 264.4)

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

#AF6773

Crimson · Gray · Passion Red

HEX
#AF6773
RGB
rgb(175, 103, 115)
HSL
hsl(350, 31%, 55%)
HSB
hsb(350, 41%, 69%)
CMYK
cmyk(0%, 41%, 34%, 31%)
Oklch
oklch(59.7% 0.093 9.5)

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

#E28C73

Peach Pink · DarkSalmon · Coral Red

HEX
#E28C73
RGB
rgb(226, 140, 115)
HSL
hsl(14, 66%, 67%)
HSB
hsb(14, 49%, 89%)
CMYK
cmyk(0%, 38%, 49%, 11%)
Oklch
oklch(72.4% 0.112 37.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#FAF6ED

Goose Yellow · SeaShell · Lemon Cream

HEX
#FAF6ED
RGB
rgb(250, 246, 237)
HSL
hsl(42, 57%, 95%)
HSB
hsb(42, 5%, 98%)
CMYK
cmyk(0%, 2%, 5%, 2%)
Oklch
oklch(97.4% 0.013 86.8)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2C3E64
63522C

Analogous

2C5963
2C3E64
362C63

Triadic

2C3E64
632C3D
3D632C

Split-Comp.

2C3E64
63362C
59632C

Tetradic

2C3E64
632C59
63522C
2C6336

Contrast Matrix WCAG 2.1 Contrast

2C3E64
425887
AF6773
E28C73
FAF6ED
—
1.5
Fail
2.5
Fail
4.2
AA Large
9.8
AAA
1.5
Fail
—
1.7
Fail
2.8
Fail
6.5
AA
2.5
Fail
1.7
Fail
—
1.6
Fail
3.9
AA Large
4.2
AA Large
2.8
Fail
1.6
Fail
—
2.4
Fail
9.8
AAA
6.5
AA
3.9
AA Large
2.4
Fail
—
White BG
10.6AAA
7.1AAA
4.2AA Large
2.6Fail
1.1Fail
Black BG
2.0Fail
3.0Fail
5.0AA
8.2AAA
19.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

34345B
4C4C7C
908F70
BDBC79
F8F8EF

Deuteranopia

333159
4A4979
94996F
C2C87B
F9F9F0

Tritanopia

2D5452
437371
AB6E6D
DE7E7F
FAF1F1

Achromatopsia

3D3D3D
575757
7E7E7E
A3A3A3
F6F6F6

Shades & Tints Shades & Tints

#2C3E64

Dark
Light

#425887

Dark
Light

#AF6773

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2c3e64;
  --color-2: #425887;
  --color-3: #af6773;
  --color-4: #e28c73;
  --color-5: #faf6ed;
}

SCSS

$color-1: #2c3e64;
$color-2: #425887;
$color-3: #af6773;
$color-4: #e28c73;
$color-5: #faf6ed;

TAILWIND

colors: {
  'brand-1': '#2c3e64',
  'brand-2': '#425887',
  'brand-3': '#af6773',
  'brand-4': '#e28c73',
  'brand-5': '#faf6ed',
}

RGB Array

[44, 62, 100], [66, 88, 135], [175, 103, 115], [226, 140, 115], [250, 246, 237]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2C3E64, #425887, #AF6773, #E28C73, #FAF6ED is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #2c3e64; --color-2: #425887; --color-3: #af6773; --color-4: #e28c73; --color-5: #faf6ed. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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