#131F46 + #3D387B + #3A6363 + #DD6C28 + #66639A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#131F46

Indigo · MidnightBlue · Deep Sea Blue

HEX

#131F46

RGB

rgb(19, 31, 70)

HSL

hsl(226, 57%, 17%)

HSB

hsb(226, 73%, 27%)

CMYK

cmyk(73%, 56%, 0%, 73%)

Oklch

oklch(25.3% 0.075 267.9)

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

#3D387B

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX

#3D387B

RGB

rgb(61, 56, 123)

HSL

hsl(244, 37%, 35%)

HSB

hsb(244, 54%, 48%)

CMYK

cmyk(50%, 54%, 0%, 52%)

Oklch

oklch(38.3% 0.110 283.3)

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

#3A6363

Slate Blue · DarkSlateGray · Mint Ice

HEX

#3A6363

RGB

rgb(58, 99, 99)

HSL

hsl(180, 26%, 31%)

HSB

hsb(180, 41%, 39%)

CMYK

cmyk(41%, 0%, 0%, 61%)

Oklch

oklch(47.0% 0.046 195.7)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#DD6C28

Tangerine · Chocolate · Warm Sun

HEX

#DD6C28

RGB

rgb(221, 108, 40)

HSL

hsl(23, 73%, 51%)

HSB

hsb(23, 82%, 87%)

CMYK

cmyk(0%, 51%, 82%, 13%)

Oklch

oklch(65.5% 0.161 47.4)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#66639A

Deep Indigo · SlateGray · Navy Blue

HEX

#66639A

RGB

rgb(102, 99, 154)

HSL

hsl(243, 22%, 50%)

HSB

hsb(243, 36%, 60%)

CMYK

cmyk(34%, 36%, 0%, 40%)

Oklch

oklch(52.6% 0.086 285.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

131F46

443913

Analogous

133744

131F46

201344

Triadic

131F46

44131E

1E4413

Split-Comp.

131F46

442013

374413

Tetradic

131F46

441337

443913

134420

Contrast Matrix WCAG 2.1 Contrast

131F46	3D387B	3A6363	DD6C28	66639A
—	1.6 Fail	2.4 Fail	4.8 AA	2.9 Fail
1.6 Fail	—	1.5 Fail	3.0 AA Large	1.9 Fail
2.4 Fail	1.5 Fail	—	2.0 Fail	1.2 Fail
4.8 AA	3.0 AA Large	2.0 Fail	—	1.6 Fail
2.9 Fail	1.9 Fail	1.2 Fail	1.6 Fail	—

White BG

16.0AAA

10.2AAA

6.7AA

3.4AA Large

5.5AA

Black BG

1.3Fail

2.1Fail

3.1AA Large

6.3AA

3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

18183D

3B3B6B

4C4C63

ACAB38

65658D

Deuteranopia

18173A

3B3C67

494663

B3BB3C

65658A

Tritanopia

143533

3D5E5B

3C6363

D74548

668280

Achromatopsia

202020

414141

575757

868686

6A6A6A

Shades & Tints Shades & Tints

#131F46

Dark

Light

#3D387B

Dark

Light

#3A6363

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #131f46;
  --color-2: #3d387b;
  --color-3: #3a6363;
  --color-4: #dd6c28;
  --color-5: #66639a;
}

SCSS

$color-1: #131f46;
$color-2: #3d387b;
$color-3: #3a6363;
$color-4: #dd6c28;
$color-5: #66639a;

TAILWIND

colors: {
  'brand-1': '#131f46',
  'brand-2': '#3d387b',
  'brand-3': '#3a6363',
  'brand-4': '#dd6c28',
  'brand-5': '#66639a',
}

RGB Array

[19, 31, 70], [61, 56, 123], [58, 99, 99], [221, 108, 40], [102, 99, 154]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #131F46, #3D387B, #3A6363, #DD6C28, #66639A 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: #131f46; --color-2: #3d387b; --color-3: #3a6363; --color-4: #dd6c28; --color-5: #66639a. 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