#100656 + #433F60 + #5B5578 + #B14E75 + #F30966 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#100656

Deep Indigo · MidnightBlue · Deep Sea Blue

HEX

#100656

RGB

rgb(16, 6, 86)

HSL

hsl(248, 87%, 18%)

HSB

hsb(248, 93%, 34%)

CMYK

cmyk(81%, 93%, 0%, 66%)

Oklch

oklch(22.4% 0.130 273.9)

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

#433F60

Deep Indigo · DarkSlateGray · Prussian Blue

HEX

#433F60

RGB

rgb(67, 63, 96)

HSL

hsl(247, 21%, 31%)

HSB

hsb(247, 34%, 38%)

CMYK

cmyk(30%, 34%, 0%, 62%)

Oklch

oklch(38.6% 0.056 289.1)

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

#5B5578

Deep Indigo · DimGray · Prussian Blue

HEX

#5B5578

RGB

rgb(91, 85, 120)

HSL

hsl(250, 17%, 40%)

HSB

hsb(250, 29%, 47%)

CMYK

cmyk(24%, 29%, 0%, 53%)

Oklch

oklch(46.9% 0.056 291.9)

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

#B14E75

Dark Violet · MediumVioletRed · Camellia

HEX

#B14E75

RGB

rgb(177, 78, 117)

HSL

hsl(336, 39%, 50%)

HSB

hsb(336, 56%, 69%)

CMYK

cmyk(0%, 56%, 34%, 31%)

Oklch

oklch(56.1% 0.135 357.6)

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

#F30966

Dark Violet · DeepPink · Camellia

HEX

#F30966

RGB

rgb(243, 9, 102)

HSL

hsl(336, 93%, 49%)

HSB

hsb(336, 96%, 95%)

CMYK

cmyk(0%, 96%, 58%, 5%)

Oklch

oklch(61.9% 0.245 9.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

100656

4B5606

Analogous

062356

100656

390656

Triadic

100656

561106

065611

Split-Comp.

100656

563906

235606

Tetradic

100656

560623

4B5606

065639

Contrast Matrix WCAG 2.1 Contrast

100656	433F60	5B5578	B14E75	F30966
—	1.8 Fail	2.6 Fail	3.6 AA Large	4.3 AA Large
1.8 Fail	—	1.4 Fail	2.0 Fail	2.4 Fail
2.6 Fail	1.4 Fail	—	1.4 Fail	1.7 Fail
3.6 AA Large	2.0 Fail	1.4 Fail	—	1.2 Fail
4.3 AA Large	2.4 Fail	1.7 Fail	1.2 Fail	—

White BG

17.8AAA

9.9AAA

7.0AA

5.0AA

4.2AA Large

Black BG

1.2Fail

2.1Fail

3.0AA Large

4.2AA Large

5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

0C0C43

414158

585870

86856C

8E8C4F

Deuteranopia

0C0D3E

424256

59596E

8C9369

9BAD4A

Tritanopia

103330

435250

5B6967

AC6462

E73E3A

Achromatopsia

121212

444444

5B5B5B

707070

5A5A5A

Shades & Tints Shades & Tints

#100656

Dark

Light

#433F60

Dark

Light

#5B5578

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #100656;
  --color-2: #433f60;
  --color-3: #5b5578;
  --color-4: #b14e75;
  --color-5: #f30966;
}

SCSS

$color-1: #100656;
$color-2: #433f60;
$color-3: #5b5578;
$color-4: #b14e75;
$color-5: #f30966;

TAILWIND

colors: {
  'brand-1': '#100656',
  'brand-2': '#433f60',
  'brand-3': '#5b5578',
  'brand-4': '#b14e75',
  'brand-5': '#f30966',
}

RGB Array

[16, 6, 86], [67, 63, 96], [91, 85, 120], [177, 78, 117], [243, 9, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #100656, #433F60, #5B5578, #B14E75, #F30966 is ideal for: tech websites, dark mode UIs, game UIs. 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: #100656; --color-2: #433f60; --color-3: #5b5578; --color-4: #b14e75; --color-5: #f30966. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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