#470F30 + #46214F + #285C63 + #089E97 + #57B5A1 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#470F30

Rose Purple · DarkSlateGray · Raspberry

HEX

#470F30

RGB

rgb(71, 15, 48)

HSL

hsl(325, 65%, 17%)

HSB

hsb(325, 79%, 28%)

CMYK

cmyk(0%, 79%, 32%, 72%)

Oklch

oklch(27.9% 0.093 348.6)

Traditional「Rose Purple」· Paint「Raspberry」· Creative Blush Sunrise

#46214F

Dark Plum · DarkSlateGray · Eggplant

HEX

#46214F

RGB

rgb(70, 33, 79)

HSL

hsl(288, 41%, 22%)

HSB

hsb(288, 58%, 31%)

CMYK

cmyk(11%, 58%, 0%, 69%)

Oklch

oklch(32.0% 0.090 319.5)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#285C63

Slate Blue · DarkSlateGray · Mint Ice

HEX

#285C63

RGB

rgb(40, 92, 99)

HSL

hsl(187, 42%, 27%)

HSB

hsb(187, 60%, 39%)

CMYK

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

Oklch

oklch(44.2% 0.056 207.1)

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

#089E97

Mineral Blue · LightSeaGreen · Mint Ice

HEX

#089E97

RGB

rgb(8, 158, 151)

HSL

hsl(177, 90%, 33%)

HSB

hsb(177, 95%, 62%)

CMYK

cmyk(95%, 0%, 4%, 38%)

Oklch

oklch(63.1% 0.108 189.2)

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

#57B5A1

Mineral Blue · CadetBlue · Lake Green

HEX

#57B5A1

RGB

rgb(87, 181, 161)

HSL

hsl(167, 39%, 53%)

HSB

hsb(167, 52%, 71%)

CMYK

cmyk(52%, 0%, 11%, 29%)

Oklch

oklch(71.0% 0.095 177.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

470F30

0F4827

Analogous

430F48

470F30

480F14

Triadic

470F30

30480F

0F3048

Split-Comp.

470F30

14480F

0F4843

Tetradic

470F30

48430F

0F4827

0F1448

Contrast Matrix WCAG 2.1 Contrast

470F30	46214F	285C63	089E97	57B5A1
—	1.2 Fail	2.0 Fail	4.6 AA	6.2 AA
1.2 Fail	—	1.8 Fail	4.0 AA Large	5.4 AA
2.0 Fail	1.8 Fail	—	2.3 Fail	3.0 AA Large
4.6 AA	4.0 AA Large	2.3 Fail	—	1.3 Fail
6.2 AA	5.4 AA	3.0 AA Large	1.3 Fail	—

White BG

15.2AAA

13.2AAA

7.5AAA

3.3AA Large

2.5Fail

Black BG

1.4Fail

1.6Fail

2.8Fail

6.3AA

8.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2F2E28

363644

3F3F61

494A99

8081A6

Deuteranopia

323626

383B41

3C3861

403599

7A73A7

Tritanopia

442220

443B39

2B6060

109A9A

5CAAAB

Achromatopsia

242424

313131

4D4D4D

707070

979797

Shades & Tints Shades & Tints

#470F30

Dark

Light

#46214F

Dark

Light

#285C63

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #470f30;
  --color-2: #46214f;
  --color-3: #285c63;
  --color-4: #089e97;
  --color-5: #57b5a1;
}

SCSS

$color-1: #470f30;
$color-2: #46214f;
$color-3: #285c63;
$color-4: #089e97;
$color-5: #57b5a1;

TAILWIND

colors: {
  'brand-1': '#470f30',
  'brand-2': '#46214f',
  'brand-3': '#285c63',
  'brand-4': '#089e97',
  'brand-5': '#57b5a1',
}

RGB Array

[71, 15, 48], [70, 33, 79], [40, 92, 99], [8, 158, 151], [87, 181, 161]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #470F30, #46214F, #285C63, #089E97, #57B5A1 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: #470f30; --color-2: #46214f; --color-3: #285c63; --color-4: #089e97; --color-5: #57b5a1. 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