#424566 + #814F5A + #C07B5A + #C3A664 + #78C6AE · 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

#424566

Indigo · DarkSlateGray · Prussian Blue

HEX

#424566

RGB

rgb(66, 69, 102)

HSL

hsl(235, 21%, 33%)

HSB

hsb(235, 35%, 40%)

CMYK

cmyk(35%, 32%, 0%, 60%)

Oklch

oklch(40.2% 0.056 279.6)

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

#814F5A

Crimson · DimGray · Passion Red

HEX

#814F5A

RGB

rgb(129, 79, 90)

HSL

hsl(347, 24%, 41%)

HSB

hsb(347, 39%, 51%)

CMYK

cmyk(0%, 39%, 30%, 49%)

Oklch

oklch(48.8% 0.069 5.6)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#C07B5A

Tangerine · DarkSalmon · Warm Sun

HEX

#C07B5A

RGB

rgb(192, 123, 90)

HSL

hsl(19, 45%, 55%)

HSB

hsb(19, 53%, 75%)

CMYK

cmyk(0%, 36%, 53%, 25%)

Oklch

oklch(64.8% 0.098 46.1)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#C3A664

Ginger · Tan · Sunflower

HEX

#C3A664

RGB

rgb(195, 166, 100)

HSL

hsl(42, 44%, 58%)

HSB

hsb(42, 49%, 76%)

CMYK

cmyk(0%, 15%, 49%, 24%)

Oklch

oklch(73.6% 0.092 86.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#78C6AE

Jade · MediumAquaMarine · Lake Green

HEX

#78C6AE

RGB

rgb(120, 198, 174)

HSL

hsl(162, 41%, 62%)

HSB

hsb(162, 39%, 78%)

CMYK

cmyk(39%, 0%, 12%, 22%)

Oklch

oklch(76.9% 0.085 172.3)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

424566

666342

Analogous

425766

424566

514266

Triadic

424566

664245

456642

Split-Comp.

424566

665142

576642

Tetradic

424566

664257

666342

426651

Contrast Matrix WCAG 2.1 Contrast

424566	814F5A	C07B5A	C3A664	78C6AE
—	1.4 Fail	2.7 Fail	3.9 AA Large	4.6 AA
1.4 Fail	—	1.9 Fail	2.8 Fail	3.3 AA Large
2.7 Fail	1.9 Fail	—	1.4 Fail	1.7 Fail
3.9 AA Large	2.8 Fail	1.4 Fail	—	1.2 Fail
4.6 AA	3.3 AA Large	1.7 Fail	1.2 Fail	—

White BG

9.2AAA

6.6AA

3.4AA Large

2.3Fail

2.0Fail

Black BG

2.3Fail

3.2AA Large

6.2AA

9.0AAA

10.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

43435E

6B6B57

A2A262

B6B674

9A9AB4

Deuteranopia

43435C

6E7257

A6AB64

B8BA78

958FB5

Tritanopia

425856

7F5555

BD686A

C28183

7CB8B9

Achromatopsia

484848

5F5F5F

8C8C8C

A7A7A7

ACACAC

Shades & Tints Shades & Tints

#424566

Dark

Light

#814F5A

Dark

Light

#C07B5A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #424566;
  --color-2: #814f5a;
  --color-3: #c07b5a;
  --color-4: #c3a664;
  --color-5: #78c6ae;
}

SCSS

$color-1: #424566;
$color-2: #814f5a;
$color-3: #c07b5a;
$color-4: #c3a664;
$color-5: #78c6ae;

TAILWIND

colors: {
  'brand-1': '#424566',
  'brand-2': '#814f5a',
  'brand-3': '#c07b5a',
  'brand-4': '#c3a664',
  'brand-5': '#78c6ae',
}

RGB Array

[66, 69, 102], [129, 79, 90], [192, 123, 90], [195, 166, 100], [120, 198, 174]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #424566, #814F5A, #C07B5A, #C3A664, #78C6AE 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: #424566; --color-2: #814f5a; --color-3: #c07b5a; --color-4: #c3a664; --color-5: #78c6ae. 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