#105265 + #337586 + #578A88 + #7AA085 + #A0B97D · 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

#105265

Lake Blue · DarkSlateGray · Peacock Green

HEX

#105265

RGB

rgb(16, 82, 101)

HSL

hsl(193, 73%, 23%)

HSB

hsb(193, 84%, 40%)

CMYK

cmyk(84%, 19%, 0%, 60%)

Oklch

oklch(40.9% 0.069 222.4)

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

#337586

Slate Blue · SteelBlue · Mint Ice

HEX

#337586

RGB

rgb(51, 117, 134)

HSL

hsl(192, 45%, 36%)

HSB

hsb(192, 62%, 53%)

CMYK

cmyk(62%, 13%, 0%, 47%)

Oklch

oklch(52.7% 0.071 217.3)

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

#578A88

Mineral Blue · SlateGray · Mint Ice

HEX

#578A88

RGB

rgb(87, 138, 136)

HSL

hsl(178, 23%, 44%)

HSB

hsb(178, 37%, 54%)

CMYK

cmyk(37%, 0%, 1%, 46%)

Oklch

oklch(59.7% 0.055 192.6)

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

#7AA085

Celadon · LightSlateGray · Olive Green

HEX

#7AA085

RGB

rgb(122, 160, 133)

HSL

hsl(137, 17%, 55%)

HSB

hsb(137, 24%, 63%)

CMYK

cmyk(24%, 0%, 17%, 37%)

Oklch

oklch(67.0% 0.058 153.7)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#A0B97D

Willow Green · DarkSeaGreen · Apple Green

HEX

#A0B97D

RGB

rgb(160, 185, 125)

HSL

hsl(85, 30%, 61%)

HSB

hsb(85, 32%, 73%)

CMYK

cmyk(14%, 0%, 32%, 27%)

Oklch

oklch(75.2% 0.086 126.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

105265

652210

Analogous

10654D

105265

102865

Triadic

105265

651053

536510

Split-Comp.

105265

651028

654D10

Tetradic

105265

4D1065

652210

286510

Contrast Matrix WCAG 2.1 Contrast

105265	337586	578A88	7AA085	A0B97D
—	1.7 Fail	2.2 Fail	3.0 Fail	4.0 AA Large
1.7 Fail	—	1.3 Fail	1.8 Fail	2.4 Fail
2.2 Fail	1.3 Fail	—	1.3 Fail	1.8 Fail
3.0 Fail	1.8 Fail	1.3 Fail	—	1.4 Fail
4.0 AA Large	2.4 Fail	1.8 Fail	1.4 Fail	—

White BG

8.7AAA

5.2AA

3.9AA Large

2.9Fail

2.2Fail

Black BG

2.4Fail

4.0AA Large

5.4AA

7.2AAA

9.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2D2D60

505082

6D6E88

8A8B8C

ABAB8C

Deuteranopia

29245F

4C4781

6A6689

88858D

A9A88F

Tritanopia

135D5C

367F7E

5A8989

7C9192

A1979A

Achromatopsia

404040

636363

7B7B7B

929292

ABABAB

Shades & Tints Shades & Tints

#105265

Dark

Light

#337586

Dark

Light

#578A88

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #105265;
  --color-2: #337586;
  --color-3: #578a88;
  --color-4: #7aa085;
  --color-5: #a0b97d;
}

SCSS

$color-1: #105265;
$color-2: #337586;
$color-3: #578a88;
$color-4: #7aa085;
$color-5: #a0b97d;

TAILWIND

colors: {
  'brand-1': '#105265',
  'brand-2': '#337586',
  'brand-3': '#578a88',
  'brand-4': '#7aa085',
  'brand-5': '#a0b97d',
}

RGB Array

[16, 82, 101], [51, 117, 134], [87, 138, 136], [122, 160, 133], [160, 185, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #105265, #337586, #578A88, #7AA085, #A0B97D is ideal for: corporate websites, product showcases, portfolios. 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: #105265; --color-2: #337586; --color-3: #578a88; --color-4: #7aa085; --color-5: #a0b97d. 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. 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