← Back to Editor

#122547 · #60A3A8 · #FFFFFF · #DB6B7C · #D1CBC5

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

#122547

Indigo · MidnightBlue · Deep Sea Blue

HEX
#122547
RGB
rgb(18, 37, 71)
HSL
hsl(218, 60%, 17%)
HSB
hsb(218, 75%, 28%)
CMYK
cmyk(75%, 48%, 0%, 72%)
Oklch
oklch(26.9% 0.068 261.1)

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

#60A3A8

Slate Blue · CadetBlue · Lake Green

HEX
#60A3A8
RGB
rgb(96, 163, 168)
HSL
hsl(184, 29%, 52%)
HSB
hsb(184, 43%, 66%)
CMYK
cmyk(43%, 3%, 0%, 34%)
Oklch
oklch(67.3% 0.069 201.8)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#DB6B7C

Peach Pink · LightCoral · Coral Red

HEX
#DB6B7C
RGB
rgb(219, 107, 124)
HSL
hsl(351, 61%, 64%)
HSB
hsb(351, 51%, 86%)
CMYK
cmyk(0%, 51%, 43%, 14%)
Oklch
oklch(66.4% 0.141 12.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#D1CBC5

Goose Yellow · LightGray · Peach Orange

HEX
#D1CBC5
RGB
rgb(209, 203, 197)
HSL
hsl(30, 12%, 80%)
HSB
hsb(30, 6%, 82%)
CMYK
cmyk(0%, 3%, 6%, 18%)
Oklch
oklch(84.5% 0.011 67.7)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

122547
453211

Analogous

113E45
122547
181145

Triadic

122547
451124
244511

Split-Comp.

122547
451811
3E4511

Tetradic

122547
45113E
453211
114518

Contrast Matrix WCAG 2.1 Contrast

122547
60A3A8
FFFFFF
DB6B7C
D1CBC5
—
5.3
AA
15.2
AAA
4.6
AA
9.5
AAA
5.3
AA
—
2.9
Fail
1.1
Fail
1.8
Fail
15.2
AAA
2.9
Fail
—
3.3
AA Large
1.6
Fail
4.6
AA
1.1
Fail
3.3
AA Large
—
2.0
Fail
9.5
AAA
1.8
Fail
1.6
Fail
2.0
Fail
—
White BG
15.2AAA
2.9Fail
1.0Fail
3.3AA Large
1.6Fail
Black BG
1.4Fail
7.3AAA
21.0AAA
6.4AA
13.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1A1A3F
7D7EA7
FFFFFF
ABA978
CECEC6

Deuteranopia

19183D
7974A7
FFFFFF
B1B977
CFCFC7

Tritanopia

133837
63A6A6
FFFFFF
D57574
D1C8C8

Achromatopsia

232323
909090
FFFFFF
8E8E8E
CCCCCC

Shades & Tints Shades & Tints

#122547

Dark
Light

#60A3A8

Dark
Light

#FFFFFF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #122547;
  --color-2: #60a3a8;
  --color-3: #ffffff;
  --color-4: #db6b7c;
  --color-5: #d1cbc5;
}

SCSS

$color-1: #122547;
$color-2: #60a3a8;
$color-3: #ffffff;
$color-4: #db6b7c;
$color-5: #d1cbc5;

TAILWIND

colors: {
  'brand-1': '#122547',
  'brand-2': '#60a3a8',
  'brand-3': '#ffffff',
  'brand-4': '#db6b7c',
  'brand-5': '#d1cbc5',
}

RGB Array

[18, 37, 71], [96, 163, 168], [255, 255, 255], [219, 107, 124], [209, 203, 197]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #122547, #60A3A8, #FFFFFF, #DB6B7C, #D1CBC5 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: #122547; --color-2: #60a3a8; --color-3: #ffffff; --color-4: #db6b7c; --color-5: #d1cbc5. 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