← Back to Editor

#11334A · #364854 · #6A6054 · #8A826D · #B0AF87

cool

A 5-color cool palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#11334A

Lake Blue · DarkSlateGray · Deep Sea Blue

HEX
#11334A
RGB
rgb(17, 51, 74)
HSL
hsl(204, 63%, 18%)
HSB
hsb(204, 77%, 29%)
CMYK
cmyk(77%, 31%, 0%, 71%)
Oklch
oklch(30.8% 0.057 241.7)

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

#364854

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#364854
RGB
rgb(54, 72, 84)
HSL
hsl(204, 22%, 27%)
HSB
hsb(204, 36%, 33%)
CMYK
cmyk(36%, 14%, 0%, 67%)
Oklch
oklch(39.1% 0.031 237.8)

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

#6A6054

Ochre · DimGray · Amber Brown

HEX
#6A6054
RGB
rgb(106, 96, 84)
HSL
hsl(33, 12%, 37%)
HSB
hsb(33, 21%, 42%)
CMYK
cmyk(0%, 9%, 21%, 58%)
Oklch
oklch(49.5% 0.023 72.3)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#8A826D

Ochre · Gray · Honey Gold

HEX
#8A826D
RGB
rgb(138, 130, 109)
HSL
hsl(43, 12%, 48%)
HSB
hsb(43, 21%, 54%)
CMYK
cmyk(0%, 6%, 21%, 46%)
Oklch
oklch(60.8% 0.032 89.6)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#B0AF87

Fresh Green · Tan · Sunflower

HEX
#B0AF87
RGB
rgb(176, 175, 135)
HSL
hsl(59, 21%, 61%)
HSB
hsb(59, 23%, 69%)
CMYK
cmyk(0%, 1%, 23%, 31%)
Oklch
oklch(74.5% 0.055 106.5)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

11334A
4B2811

Analogous

114B45
11334A
11174B

Triadic

11334A
4B1134
344B11

Split-Comp.

11334A
4B1117
4B4511

Tetradic

11334A
45114B
4B2811
174B11

Contrast Matrix WCAG 2.1 Contrast

11334A
364854
6A6054
8A826D
B0AF87
—
1.4
Fail
2.1
Fail
3.4
AA Large
5.8
AA
1.4
Fail
—
1.5
Fail
2.5
Fail
4.2
AA Large
2.1
Fail
1.5
Fail
—
1.6
Fail
2.7
Fail
3.4
AA Large
2.5
Fail
1.6
Fail
—
1.7
Fail
5.8
AA
4.2
AA Large
2.7
Fail
1.7
Fail
—
White BG
13.2AAA
9.5AAA
6.2AA
3.8AA Large
2.3Fail
Black BG
1.6Fail
2.2Fail
3.4AA Large
5.5AA
9.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

202044
3E3E51
666657
878672
B0B091

Deuteranopia

1E1B43
3D3B50
666758
878873
B0B093

Tritanopia

13403F
374F4E
69595A
8A7677
B0989A

Achromatopsia

2B2B2B
444444
626262
828282
ABABAB

Shades & Tints Shades & Tints

#11334A

Dark
Light

#364854

Dark
Light

#6A6054

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #11334a;
  --color-2: #364854;
  --color-3: #6a6054;
  --color-4: #8a826d;
  --color-5: #b0af87;
}

SCSS

$color-1: #11334a;
$color-2: #364854;
$color-3: #6a6054;
$color-4: #8a826d;
$color-5: #b0af87;

TAILWIND

colors: {
  'brand-1': '#11334a',
  'brand-2': '#364854',
  'brand-3': '#6a6054',
  'brand-4': '#8a826d',
  'brand-5': '#b0af87',
}

RGB Array

[17, 51, 74], [54, 72, 84], [106, 96, 84], [138, 130, 109], [176, 175, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #11334A, #364854, #6A6054, #8A826D, #B0AF87 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #11334a; --color-2: #364854; --color-3: #6a6054; --color-4: #8a826d; --color-5: #b0af87. 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. 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 finance, legal, luxury industries. Restrained colors convey professionalism and trust. 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