#818398 + #2C3058 + #723860 + #C75076 + #FF1059 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#818398

Azure · LightSlateGray · Navy Blue

HEX

#818398

RGB

rgb(129, 131, 152)

HSL

hsl(235, 10%, 55%)

HSB

hsb(235, 15%, 60%)

CMYK

cmyk(15%, 14%, 0%, 40%)

Oklch

oklch(61.6% 0.032 281.1)

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

#2C3058

Indigo · DarkSlateGray · Prussian Blue

HEX

#2C3058

RGB

rgb(44, 48, 88)

HSL

hsl(235, 33%, 26%)

HSB

hsb(235, 50%, 35%)

CMYK

cmyk(50%, 45%, 0%, 65%)

Oklch

oklch(32.6% 0.071 277.4)

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

#723860

Rose Purple · DimGray · Eggplant

HEX

#723860

RGB

rgb(114, 56, 96)

HSL

hsl(319, 34%, 33%)

HSB

hsb(319, 51%, 45%)

CMYK

cmyk(0%, 51%, 16%, 55%)

Oklch

oklch(43.0% 0.097 340.3)

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

#C75076

Dark Violet · MediumVioletRed · Rose Pink

HEX

#C75076

RGB

rgb(199, 80, 118)

HSL

hsl(341, 52%, 55%)

HSB

hsb(341, 60%, 78%)

CMYK

cmyk(0%, 60%, 41%, 22%)

Oklch

oklch(59.7% 0.155 3.1)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#FF1059

Dark Violet · Crimson · Rose Pink

HEX

#FF1059

RGB

rgb(255, 16, 89)

HSL

hsl(342, 100%, 53%)

HSB

hsb(342, 94%, 100%)

CMYK

cmyk(0%, 94%, 65%, 0%)

Oklch

oklch(63.9% 0.251 14.8)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

818398

989681

Analogous

818E98

818398

8A8198

Triadic

818398

988183

839881

Split-Comp.

818398

988A81

8E9881

Tetradic

818398

98818E

989681

81988A

Contrast Matrix WCAG 2.1 Contrast

818398	2C3058	723860	C75076	FF1059
—	3.4 AA Large	2.3 Fail	1.2 Fail	1.0 Fail
3.4 AA Large	—	1.5 Fail	2.9 Fail	3.3 AA Large
2.3 Fail	1.5 Fail	—	2.0 Fail	2.2 Fail
1.2 Fail	2.9 Fail	2.0 Fail	—	1.1 Fail
1.0 Fail	3.3 AA Large	2.2 Fail	1.1 Fail	—

White BG

3.7AA Large

12.6AAA

8.6AAA

4.3AA Large

3.8AA Large

Black BG

5.6AA

1.7Fail

2.5Fail

4.8AA

5.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

828293

2E2E4E

595856

93926D

989547

Deuteranopia

828292

2E2D4C

5C6154

9AA36B

A5B743

Tritanopia

818F8E

2C4745

6F4F4D

C16664

F33936

Achromatopsia

858585

333333

4E4E4E

787878

606060

Shades & Tints Shades & Tints

#818398

Dark

Light

#2C3058

Dark

Light

#723860

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #818398;
  --color-2: #2c3058;
  --color-3: #723860;
  --color-4: #c75076;
  --color-5: #ff1059;
}

SCSS

$color-1: #818398;
$color-2: #2c3058;
$color-3: #723860;
$color-4: #c75076;
$color-5: #ff1059;

TAILWIND

colors: {
  'brand-1': '#818398',
  'brand-2': '#2c3058',
  'brand-3': '#723860',
  'brand-4': '#c75076',
  'brand-5': '#ff1059',
}

RGB Array

[129, 131, 152], [44, 48, 88], [114, 56, 96], [199, 80, 118], [255, 16, 89]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #818398, #2C3058, #723860, #C75076, #FF1059 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: #818398; --color-2: #2c3058; --color-3: #723860; --color-4: #c75076; --color-5: #ff1059. 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