#33737F + #2D6471 + #285463 + #1C3648 + #11172C · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#33737F

Slate Blue · SeaGreen · Mint Ice

HEX

#33737F

RGB

rgb(51, 115, 127)

HSL

hsl(189, 43%, 35%)

HSB

hsb(189, 60%, 50%)

CMYK

cmyk(60%, 9%, 0%, 50%)

Oklch

oklch(51.9% 0.068 211.6)

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

#2D6471

Slate Blue · DarkSlateGray · Mint Ice

HEX

#2D6471

RGB

rgb(45, 100, 113)

HSL

hsl(191, 43%, 31%)

HSB

hsb(191, 60%, 44%)

CMYK

cmyk(60%, 12%, 0%, 56%)

Oklch

oklch(47.2% 0.061 215.5)

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

#285463

Slate Blue · DarkSlateGray · Mint Ice

HEX

#285463

RGB

rgb(40, 84, 99)

HSL

hsl(195, 42%, 27%)

HSB

hsb(195, 60%, 39%)

CMYK

cmyk(60%, 15%, 0%, 61%)

Oklch

oklch(42.1% 0.054 222.8)

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

#1C3648

Slate Blue · DarkSlateGray · Deep Sea Blue

HEX

#1C3648

RGB

rgb(28, 54, 72)

HSL

hsl(205, 44%, 20%)

HSB

hsb(205, 61%, 28%)

CMYK

cmyk(61%, 25%, 0%, 72%)

Oklch

oklch(32.1% 0.045 240.4)

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

#11172C

Indigo · Black · Deep Sea Blue

HEX

#11172C

RGB

rgb(17, 23, 44)

HSL

hsl(227, 44%, 12%)

HSB

hsb(227, 61%, 17%)

CMYK

cmyk(61%, 48%, 0%, 83%)

Oklch

oklch(21.1% 0.043 270.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

33737F

803E33

Analogous

338065

33737F

334E80

Triadic

33737F

803374

748033

Split-Comp.

33737F

80334E

806533

Tetradic

33737F

653380

803E33

4E8033

Contrast Matrix WCAG 2.1 Contrast

33737F	2D6471	285463	1C3648	11172C
—	1.2 Fail	1.5 Fail	2.3 Fail	3.3 AA Large
1.2 Fail	—	1.2 Fail	1.9 Fail	2.7 Fail
1.5 Fail	1.2 Fail	—	1.5 Fail	2.1 Fail
2.3 Fail	1.9 Fail	1.5 Fail	—	1.4 Fail
3.3 AA Large	2.7 Fail	2.1 Fail	1.4 Fail	—

White BG

5.4AA

6.6AA

8.3AAA

12.6AAA

17.8AAA

Black BG

3.9AA Large

3.2AA Large

2.5Fail

1.7Fail

1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

4F4F7C

45456E

3B3B5F

272744

141427

Deuteranopia

4B467B

423E6D

39355F

262443

131326

Tritanopia

367A79

306B6B

2A5D5C

1D403F

112322

Achromatopsia

616161

555555

494949

303030

181818

Shades & Tints Shades & Tints

#33737F

Dark

Light

#2D6471

Dark

Light

#285463

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #33737f;
  --color-2: #2d6471;
  --color-3: #285463;
  --color-4: #1c3648;
  --color-5: #11172c;
}

SCSS

$color-1: #33737f;
$color-2: #2d6471;
$color-3: #285463;
$color-4: #1c3648;
$color-5: #11172c;

TAILWIND

colors: {
  'brand-1': '#33737f',
  'brand-2': '#2d6471',
  'brand-3': '#285463',
  'brand-4': '#1c3648',
  'brand-5': '#11172c',
}

RGB Array

[51, 115, 127], [45, 100, 113], [40, 84, 99], [28, 54, 72], [17, 23, 44]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #33737F, #2D6471, #285463, #1C3648, #11172C 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: #33737f; --color-2: #2d6471; --color-3: #285463; --color-4: #1c3648; --color-5: #11172c. 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 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