← Back to Editor

#1D287D · #4A4A82 · #6F5C7D · #B06469 · #FF773D

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 Library

Color Details Color Details

#1D287D

Indigo · MidnightBlue · Prussian Blue

HEX
#1D287D
RGB
rgb(29, 40, 125)
HSL
hsl(233, 62%, 30%)
HSB
hsb(233, 77%, 49%)
CMYK
cmyk(77%, 68%, 0%, 51%)
Oklch
oklch(33.0% 0.143 270.5)

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

#4A4A82

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX
#4A4A82
RGB
rgb(74, 74, 130)
HSL
hsl(240, 27%, 40%)
HSB
hsb(240, 43%, 51%)
CMYK
cmyk(43%, 43%, 0%, 49%)
Oklch
oklch(43.6% 0.091 282.0)

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

#6F5C7D

Dark Plum · DimGray · Violet

HEX
#6F5C7D
RGB
rgb(111, 92, 125)
HSL
hsl(275, 15%, 43%)
HSB
hsb(275, 26%, 49%)
CMYK
cmyk(11%, 26%, 0%, 51%)
Oklch
oklch(50.6% 0.056 310.5)

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

#B06469

Crimson · Gray · Passion Red

HEX
#B06469
RGB
rgb(176, 100, 105)
HSL
hsl(356, 32%, 54%)
HSB
hsb(356, 43%, 69%)
CMYK
cmyk(0%, 43%, 40%, 31%)
Oklch
oklch(59.1% 0.098 16.3)

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

#FF773D

Apricot · Coral · Warm Sun

HEX
#FF773D
RGB
rgb(255, 119, 61)
HSL
hsl(18, 100%, 62%)
HSB
hsb(18, 76%, 100%)
CMYK
cmyk(0%, 53%, 76%, 0%)
Oklch
oklch(72.2% 0.181 42.0)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1D287D
7C711D

Analogous

1D587C
1D287D
411D7C

Triadic

1D287D
7C1D28
287C1D

Split-Comp.

1D287D
7C411D
587C1D

Tetradic

1D287D
7C1D58
7C711D
1D7C41

Contrast Matrix WCAG 2.1 Contrast

1D287D
4A4A82
6F5C7D
B06469
FF773D
—
1.6
Fail
2.1
Fail
2.9
Fail
4.8
AA
1.6
Fail
—
1.4
Fail
1.9
Fail
3.1
AA Large
2.1
Fail
1.4
Fail
—
1.4
Fail
2.3
Fail
2.9
Fail
1.9
Fail
1.4
Fail
—
1.6
Fail
4.8
AA
3.1
AA Large
2.3
Fail
1.6
Fail
—
White BG
12.7AAA
8.1AAA
6.0AA
4.3AA Large
2.6Fail
Black BG
1.7Fail
2.6Fail
3.5AA Large
4.9AA
8.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

222268
4A4A74
676775
8F8E68
C4C34B

Deuteranopia

212064
4A4A71
686973
949968
CCD64E

Tritanopia

1E5855
4A6A67
6E6F6D
AC6767
F85659

Achromatopsia

2E2E2E
505050
656565
7B7B7B
999999

Shades & Tints Shades & Tints

#1D287D

Dark
Light

#4A4A82

Dark
Light

#6F5C7D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1d287d;
  --color-2: #4a4a82;
  --color-3: #6f5c7d;
  --color-4: #b06469;
  --color-5: #ff773d;
}

SCSS

$color-1: #1d287d;
$color-2: #4a4a82;
$color-3: #6f5c7d;
$color-4: #b06469;
$color-5: #ff773d;

TAILWIND

colors: {
  'brand-1': '#1d287d',
  'brand-2': '#4a4a82',
  'brand-3': '#6f5c7d',
  'brand-4': '#b06469',
  'brand-5': '#ff773d',
}

RGB Array

[29, 40, 125], [74, 74, 130], [111, 92, 125], [176, 100, 105], [255, 119, 61]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1D287D, #4A4A82, #6F5C7D, #B06469, #FF773D 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: #1d287d; --color-2: #4a4a82; --color-3: #6f5c7d; --color-4: #b06469; --color-5: #ff773d. 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