← Back to Editor

#3C505A · #465B5E · #6E8273 · #ACBFA1 · #E2E8C0

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#3C505A

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#3C505A
RGB
rgb(60, 80, 90)
HSL
hsl(200, 20%, 29%)
HSB
hsb(200, 33%, 35%)
CMYK
cmyk(33%, 11%, 0%, 65%)
Oklch
oklch(41.9% 0.030 230.0)

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

#465B5E

Slate Blue · DarkSlateGray · Mint Ice

HEX
#465B5E
RGB
rgb(70, 91, 94)
HSL
hsl(188, 15%, 32%)
HSB
hsb(188, 26%, 37%)
CMYK
cmyk(26%, 3%, 0%, 63%)
Oklch
oklch(45.5% 0.026 207.1)

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

#6E8273

Celadon · Gray · Warm Gray

HEX
#6E8273
RGB
rgb(110, 130, 115)
HSL
hsl(135, 8%, 47%)
HSB
hsb(135, 15%, 51%)
CMYK
cmyk(15%, 0%, 12%, 49%)
Oklch
oklch(58.6% 0.033 152.9)

Traditional「Celadon」· Paint「Warm Gray」· Creative Urban Concrete

#ACBFA1

Celadon · DarkGray · Apple Green

HEX
#ACBFA1
RGB
rgb(172, 191, 161)
HSL
hsl(98, 19%, 69%)
HSB
hsb(98, 16%, 75%)
CMYK
cmyk(10%, 0%, 16%, 25%)
Oklch
oklch(78.2% 0.047 134.0)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#E2E8C0

Fresh Green · Wheat · Lemon Cream

HEX
#E2E8C0
RGB
rgb(226, 232, 192)
HSL
hsl(69, 47%, 83%)
HSB
hsb(69, 17%, 91%)
CMYK
cmyk(3%, 0%, 17%, 9%)
Oklch
oklch(91.6% 0.053 114.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3C505A
59453B

Analogous

3B5954
3C505A
3B4059

Triadic

3C505A
593B4F
4F593B

Split-Comp.

3C505A
593B40
59543B

Tetradic

3C505A
543B59
59453B
40593B

Contrast Matrix WCAG 2.1 Contrast

3C505A
465B5E
6E8273
ACBFA1
E2E8C0
—
1.2
Fail
2.1
Fail
4.3
AA Large
6.6
AA
1.2
Fail
—
1.7
Fail
3.7
AA Large
5.7
AA
2.1
Fail
1.7
Fail
—
2.1
Fail
3.2
AA Large
4.3
AA Large
3.7
AA Large
2.1
Fail
—
1.5
Fail
6.6
AA
5.7
AA
3.2
AA Large
1.5
Fail
—
White BG
8.4AAA
7.2AAA
4.1AA Large
2.0Fail
1.3Fail
Black BG
2.5Fail
2.9Fail
5.1AA
10.7AAA
16.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

454558
4F4F5D
777777
B4B4A8
E5E5CA

Deuteranopia

444257
4E4C5D
767478
B3B2AA
E4E4CC

Tritanopia

3D5655
475D5D
6F797A
ADAEAF
E2D1D3

Achromatopsia

4B4B4B
555555
7A7A7A
B6B6B6
E2E2E2

Shades & Tints Shades & Tints

#3C505A

Dark
Light

#465B5E

Dark
Light

#6E8273

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3c505a;
  --color-2: #465b5e;
  --color-3: #6e8273;
  --color-4: #acbfa1;
  --color-5: #e2e8c0;
}

SCSS

$color-1: #3c505a;
$color-2: #465b5e;
$color-3: #6e8273;
$color-4: #acbfa1;
$color-5: #e2e8c0;

TAILWIND

colors: {
  'brand-1': '#3c505a',
  'brand-2': '#465b5e',
  'brand-3': '#6e8273',
  'brand-4': '#acbfa1',
  'brand-5': '#e2e8c0',
}

RGB Array

[60, 80, 90], [70, 91, 94], [110, 130, 115], [172, 191, 161], [226, 232, 192]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #3C505A, #465B5E, #6E8273, #ACBFA1, #E2E8C0 is ideal for: brand design, premium product pages, magazine layouts, 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: #3c505a; --color-2: #465b5e; --color-3: #6e8273; --color-4: #acbfa1; --color-5: #e2e8c0. 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. 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