#89757A + #C3346D + #CC646A + #D69568 + #D5C984 · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#89757A

Crimson · Gray · Warm Gray

HEX

#89757A

RGB

rgb(137, 117, 122)

HSL

hsl(345, 8%, 50%)

HSB

hsb(345, 15%, 54%)

CMYK

cmyk(0%, 15%, 11%, 46%)

Oklch

oklch(58.3% 0.026 1.1)

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

#C3346D

Dark Violet · MediumVioletRed · Camellia

HEX

#C3346D

RGB

rgb(195, 52, 109)

HSL

hsl(336, 58%, 48%)

HSB

hsb(336, 73%, 76%)

CMYK

cmyk(0%, 73%, 44%, 24%)

Oklch

oklch(55.7% 0.184 1.1)

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

#CC646A

Crimson · LightCoral · Passion Red

HEX

#CC646A

RGB

rgb(204, 100, 106)

HSL

hsl(357, 50%, 60%)

HSB

hsb(357, 51%, 80%)

CMYK

cmyk(0%, 51%, 48%, 20%)

Oklch

oklch(62.9% 0.132 18.1)

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

#D69568

Apricot · DarkSalmon · Warm Sun

HEX

#D69568

RGB

rgb(214, 149, 104)

HSL

hsl(25, 57%, 62%)

HSB

hsb(25, 51%, 84%)

CMYK

cmyk(0%, 30%, 51%, 16%)

Oklch

oklch(72.4% 0.099 55.2)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#D5C984

Fresh Green · BurlyWood · Sunflower

HEX

#D5C984

RGB

rgb(213, 201, 132)

HSL

hsl(51, 49%, 68%)

HSB

hsb(51, 38%, 84%)

CMYK

cmyk(0%, 6%, 38%, 16%)

Oklch

oklch(83.0% 0.090 99.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

89757A

758A85

Analogous

8A7585

89757A

8A7A75

Triadic

89757A

7A8A75

757A8A

Split-Comp.

89757A

758A7A

75858A

Tetradic

89757A

858A75

758A85

7A758A

Contrast Matrix WCAG 2.1 Contrast

89757A	C3346D	CC646A	D69568	D5C984
—	1.2 Fail	1.1 Fail	1.7 Fail	2.6 Fail
1.2 Fail	—	1.4 Fail	2.1 Fail	3.1 AA Large
1.1 Fail	1.4 Fail	—	1.5 Fail	2.2 Fail
1.7 Fail	2.1 Fail	1.5 Fail	—	1.5 Fail
2.6 Fail	3.1 AA Large	2.2 Fail	1.5 Fail	—

White BG

4.3AA Large

5.2AA

3.8AA Large

2.5Fail

1.7Fail

Black BG

4.9AA

4.0AA Large

5.6AA

8.4AAA

12.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

808079

85845F

9F9E69

BAB973

D0D095

Deuteranopia

828379

8D985C

A5AD68

BEC276

D1D199

Tritanopia

887878

BC5452

C76767

D37B7D

D4A2A5

Achromatopsia

7C7C7C

656565

848484

A3A3A3

C5C5C5

Shades & Tints Shades & Tints

#89757A

Dark

Light

#C3346D

Dark

Light

#CC646A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #89757a;
  --color-2: #c3346d;
  --color-3: #cc646a;
  --color-4: #d69568;
  --color-5: #d5c984;
}

SCSS

$color-1: #89757a;
$color-2: #c3346d;
$color-3: #cc646a;
$color-4: #d69568;
$color-5: #d5c984;

TAILWIND

colors: {
  'brand-1': '#89757a',
  'brand-2': '#c3346d',
  'brand-3': '#cc646a',
  'brand-4': '#d69568',
  'brand-5': '#d5c984',
}

RGB Array

[137, 117, 122], [195, 52, 109], [204, 100, 106], [214, 149, 104], [213, 201, 132]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #89757A, #C3346D, #CC646A, #D69568, #D5C984 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: #89757a; --color-2: #c3346d; --color-3: #cc646a; --color-4: #d69568; --color-5: #d5c984. 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 sunset-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