#402B45 + #2B6359 + #74A668 + #9E4C65 + #C77575 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#402B45

Dark Plum · DarkSlateGray · Eggplant

HEX

#402B45

RGB

rgb(64, 43, 69)

HSL

hsl(288, 23%, 22%)

HSB

hsb(288, 38%, 27%)

CMYK

cmyk(7%, 38%, 0%, 73%)

Oklch

oklch(32.5% 0.053 319.8)

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

#2B6359

Mineral Blue · DarkSlateGray · Mint Ice

HEX

#2B6359

RGB

rgb(43, 99, 89)

HSL

hsl(169, 39%, 28%)

HSB

hsb(169, 57%, 39%)

CMYK

cmyk(57%, 0%, 10%, 61%)

Oklch

oklch(45.9% 0.061 180.1)

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

#74A668

Celadon · Gray · Olive Green

HEX

#74A668

RGB

rgb(116, 166, 104)

HSL

hsl(108, 26%, 53%)

HSB

hsb(108, 37%, 65%)

CMYK

cmyk(30%, 0%, 37%, 35%)

Oklch

oklch(67.4% 0.103 139.6)

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

#9E4C65

Dark Violet · Sienna · Camellia

HEX

#9E4C65

RGB

rgb(158, 76, 101)

HSL

hsl(342, 35%, 46%)

HSB

hsb(342, 52%, 62%)

CMYK

cmyk(0%, 52%, 36%, 38%)

Oklch

oklch(52.6% 0.112 2.4)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#C77575

Peach Pink · LightCoral · Coral Red

HEX

#C77575

RGB

rgb(199, 117, 117)

HSL

hsl(0, 42%, 62%)

HSB

hsb(0, 41%, 78%)

CMYK

cmyk(0%, 41%, 41%, 22%)

Oklch

oklch(65.2% 0.103 20.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

402B45

30452B

Analogous

332B45

402B45

452B3D

Triadic

402B45

45402B

2B4540

Split-Comp.

402B45

3D452B

2B4533

Tetradic

402B45

45332B

30452B

2B3D45

Contrast Matrix WCAG 2.1 Contrast

402B45	2B6359	74A668	9E4C65	C77575
—	1.8 Fail	4.5 AA Large	2.2 Fail	3.8 AA Large
1.8 Fail	—	2.4 Fail	1.2 Fail	2.1 Fail
4.5 AA Large	2.4 Fail	—	2.0 Fail	1.2 Fail
2.2 Fail	1.2 Fail	2.0 Fail	—	1.7 Fail
3.8 AA Large	2.1 Fail	1.2 Fail	1.7 Fail	—

White BG

12.7AAA

6.9AA

2.8Fail

5.7AA

3.4AA Large

Black BG

1.6Fail

3.0AA Large

7.4AAA

3.7AA Large

6.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

37373F

43445B

8A8A77

7A7A5F

A3A375

Deuteranopia

383A3D

403C5C

87837B

7F855D

A8AE75

Tritanopia

3F3A39

2E5D5E

768385

9A5A59

C37575

Achromatopsia

343434

515151

909090

676767

8E8E8E

Shades & Tints Shades & Tints

#402B45

Dark

Light

#2B6359

Dark

Light

#74A668

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #402b45;
  --color-2: #2b6359;
  --color-3: #74a668;
  --color-4: #9e4c65;
  --color-5: #c77575;
}

SCSS

$color-1: #402b45;
$color-2: #2b6359;
$color-3: #74a668;
$color-4: #9e4c65;
$color-5: #c77575;

TAILWIND

colors: {
  'brand-1': '#402b45',
  'brand-2': '#2b6359',
  'brand-3': '#74a668',
  'brand-4': '#9e4c65',
  'brand-5': '#c77575',
}

RGB Array

[64, 43, 69], [43, 99, 89], [116, 166, 104], [158, 76, 101], [199, 117, 117]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #402B45, #2B6359, #74A668, #9E4C65, #C77575 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: #402b45; --color-2: #2b6359; --color-3: #74a668; --color-4: #9e4c65; --color-5: #c77575. 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 general-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