← Back to Editor

#1A3C4D · #54808F · #ABA299 · #CF7A8B · #651523

cool

A 5-color cool 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

#1A3C4D

Slate Blue · DarkSlateGray · Deep Sea Blue

HEX
#1A3C4D
RGB
rgb(26, 60, 77)
HSL
hsl(200, 50%, 20%)
HSB
hsb(200, 66%, 30%)
CMYK
cmyk(66%, 22%, 0%, 70%)
Oklch
oklch(33.9% 0.049 232.6)

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

#54808F

Slate Blue · SlateGray · Mint Ice

HEX
#54808F
RGB
rgb(84, 128, 143)
HSL
hsl(195, 26%, 45%)
HSB
hsb(195, 41%, 56%)
CMYK
cmyk(41%, 10%, 0%, 44%)
Oklch
oklch(57.4% 0.053 221.4)

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

#ABA299

Ginger · DarkGray · Warm Sun

HEX
#ABA299
RGB
rgb(171, 162, 153)
HSL
hsl(30, 10%, 64%)
HSB
hsb(30, 11%, 67%)
CMYK
cmyk(0%, 5%, 11%, 33%)
Oklch
oklch(71.7% 0.017 67.6)

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

#CF7A8B

Peach Pink · LightCoral · Coral Red

HEX
#CF7A8B
RGB
rgb(207, 122, 139)
HSL
hsl(348, 47%, 65%)
HSB
hsb(348, 41%, 81%)
CMYK
cmyk(0%, 41%, 33%, 19%)
Oklch
oklch(67.6% 0.107 7.5)

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

#651523

Vermilion · Maroon · Wine Red

HEX
#651523
RGB
rgb(101, 21, 35)
HSL
hsl(350, 66%, 24%)
HSB
hsb(350, 79%, 40%)
CMYK
cmyk(0%, 79%, 65%, 60%)
Oklch
oklch(33.9% 0.112 16.0)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1A3C4D
4D2A1A

Analogous

1A4D44
1A3C4D
1A224D

Triadic

1A3C4D
4D1A3C
3C4D1A

Split-Comp.

1A3C4D
4D1A22
4D441A

Tetradic

1A3C4D
441A4D
4D2A1A
224D1A

Contrast Matrix WCAG 2.1 Contrast

1A3C4D
54808F
ABA299
CF7A8B
651523
—
2.7
Fail
4.7
AA
3.8
AA Large
1.1
Fail
2.7
Fail
—
1.7
Fail
1.4
Fail
2.9
Fail
4.7
AA
1.7
Fail
—
1.2
Fail
5.0
AA
3.8
AA Large
1.4
Fail
1.2
Fail
—
4.0
AA Large
1.1
Fail
2.9
Fail
5.0
AA
4.0
AA Large
—
White BG
11.7AAA
4.3AA Large
2.5Fail
3.1AA Large
12.5AAA
Black BG
1.8Fail
4.9AA
8.4AAA
6.8AA
1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

292949
67678B
A7A79B
AAA987
424220

Deuteranopia

272448
65618B
A8A89C
AFB586
474D1F

Tritanopia

1C4645
568988
AB9D9D
CB8483
611D1C

Achromatopsia

343434
757575
A4A4A4
959595
2F2F2F

Shades & Tints Shades & Tints

#1A3C4D

Dark
Light

#54808F

Dark
Light

#ABA299

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1a3c4d;
  --color-2: #54808f;
  --color-3: #aba299;
  --color-4: #cf7a8b;
  --color-5: #651523;
}

SCSS

$color-1: #1a3c4d;
$color-2: #54808f;
$color-3: #aba299;
$color-4: #cf7a8b;
$color-5: #651523;

TAILWIND

colors: {
  'brand-1': '#1a3c4d',
  'brand-2': '#54808f',
  'brand-3': '#aba299',
  'brand-4': '#cf7a8b',
  'brand-5': '#651523',
}

RGB Array

[26, 60, 77], [84, 128, 143], [171, 162, 153], [207, 122, 139], [101, 21, 35]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #1A3C4D, #54808F, #ABA299, #CF7A8B, #651523 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: #1a3c4d; --color-2: #54808f; --color-3: #aba299; --color-4: #cf7a8b; --color-5: #651523. 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 cool-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