#4A466B + #6F5D66 + #957462 + #BA8B5D + #DFA258 · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#4A466B

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX

#4A466B

RGB

rgb(74, 70, 107)

HSL

hsl(246, 21%, 35%)

HSB

hsb(246, 35%, 42%)

CMYK

cmyk(31%, 35%, 0%, 58%)

Oklch

oklch(41.4% 0.061 288.4)

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

#6F5D66

Dark Violet · DimGray · Charcoal

HEX

#6F5D66

RGB

rgb(111, 93, 102)

HSL

hsl(330, 9%, 40%)

HSB

hsb(330, 16%, 44%)

CMYK

cmyk(0%, 16%, 8%, 56%)

Oklch

oklch(49.9% 0.027 346.5)

Traditional「Dark Violet」· Paint「Charcoal」· Creative Midnight Shadow

#957462

Tangerine · Gray · Amber Brown

HEX

#957462

RGB

rgb(149, 116, 98)

HSL

hsl(21, 21%, 48%)

HSB

hsb(21, 34%, 58%)

CMYK

cmyk(0%, 22%, 34%, 42%)

Oklch

oklch(58.6% 0.050 50.0)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#BA8B5D

Ginger · DarkSalmon · Warm Sun

HEX

#BA8B5D

RGB

rgb(186, 139, 93)

HSL

hsl(30, 40%, 55%)

HSB

hsb(30, 50%, 73%)

CMYK

cmyk(0%, 25%, 50%, 27%)

Oklch

oklch(67.2% 0.084 65.0)

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

#DFA258

Ginger · SandyBrown · Warm Sun

HEX

#DFA258

RGB

rgb(223, 162, 88)

HSL

hsl(33, 68%, 61%)

HSB

hsb(33, 61%, 87%)

CMYK

cmyk(0%, 27%, 61%, 13%)

Oklch

oklch(75.6% 0.116 69.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4A466B

686C47

Analogous

47566C

4A466B

5D476C

Triadic

4A466B

6C4A47

476C4A

Split-Comp.

4A466B

6C5D47

566C47

Tetradic

4A466B

6C4756

686C47

476C5D

Contrast Matrix WCAG 2.1 Contrast

4A466B	6F5D66	957462	BA8B5D	DFA258
—	1.4 Fail	2.1 Fail	2.9 Fail	4.0 AA Large
1.4 Fail	—	1.4 Fail	2.0 Fail	2.8 Fail
2.1 Fail	1.4 Fail	—	1.4 Fail	1.9 Fail
2.9 Fail	2.0 Fail	1.4 Fail	—	1.4 Fail
4.0 AA Large	2.8 Fail	1.9 Fail	1.4 Fail	—

White BG

8.8AAA

6.1AA

4.2AA Large

3.0AA Large

2.2Fail

Black BG

2.4Fail

3.4AA Large

5.0AA

6.9AA

9.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

484862

676764

878666

A6A568

C5C46A

Deuteranopia

494960

686A63

898B67

A8AC6B

C8CD6E

Tritanopia

4A5B59

6E6262

936A6B

B87173

DC787B

Achromatopsia

4B4B4B

636363

7C7C7C

949494

ACACAC

Shades & Tints Shades & Tints

#4A466B

Dark

Light

#6F5D66

Dark

Light

#957462

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4a466b;
  --color-2: #6f5d66;
  --color-3: #957462;
  --color-4: #ba8b5d;
  --color-5: #dfa258;
}

SCSS

$color-1: #4a466b;
$color-2: #6f5d66;
$color-3: #957462;
$color-4: #ba8b5d;
$color-5: #dfa258;

TAILWIND

colors: {
  'brand-1': '#4a466b',
  'brand-2': '#6f5d66',
  'brand-3': '#957462',
  'brand-4': '#ba8b5d',
  'brand-5': '#dfa258',
}

RGB Array

[74, 70, 107], [111, 93, 102], [149, 116, 98], [186, 139, 93], [223, 162, 88]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #4A466B, #6F5D66, #957462, #BA8B5D, #DFA258 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: #4a466b; --color-2: #6f5d66; --color-3: #957462; --color-4: #ba8b5d; --color-5: #dfa258. 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