← Back to Editor

#943B5B · #FE6860 · #F2B660 · #9D977C · #434B56

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#943B5B

Dark Violet · Sienna · Camellia

HEX
#943B5B
RGB
rgb(148, 59, 91)
HSL
hsl(338, 43%, 41%)
HSB
hsb(338, 60%, 58%)
CMYK
cmyk(0%, 60%, 39%, 42%)
Oklch
oklch(48.3% 0.124 0.4)

TraditionalDark Violet」· PaintCamellia」· Creative Blush Sunrise

#FE6860

Peach Pink · Tomato · Coral Red

HEX
#FE6860
RGB
rgb(254, 104, 96)
HSL
hsl(3, 99%, 69%)
HSB
hsb(3, 62%, 100%)
CMYK
cmyk(0%, 59%, 62%, 0%)
Oklch
oklch(70.4% 0.185 26.0)

TraditionalPeach Pink」· PaintCoral Red」· Creative Blush Sunrise

#F2B660

Ginger · SandyBrown · Warm Sun

HEX
#F2B660
RGB
rgb(242, 182, 96)
HSL
hsl(35, 85%, 66%)
HSB
hsb(35, 60%, 95%)
CMYK
cmyk(0%, 25%, 60%, 5%)
Oklch
oklch(81.5% 0.124 74.3)

TraditionalGinger」· PaintWarm Sun」· Creative Honey Glow

#9D977C

Ginger · Gray · Sunflower

HEX
#9D977C
RGB
rgb(157, 151, 124)
HSL
hsl(49, 14%, 55%)
HSB
hsb(49, 21%, 62%)
CMYK
cmyk(0%, 4%, 21%, 38%)
Oklch
oklch(67.4% 0.039 96.9)

TraditionalGinger」· PaintSunflower」· Creative Blush Sunrise

#434B56

Indigo · DarkSlateGray · Prussian Blue

HEX
#434B56
RGB
rgb(67, 75, 86)
HSL
hsl(215, 12%, 30%)
HSB
hsb(215, 22%, 34%)
CMYK
cmyk(22%, 13%, 0%, 66%)
Oklch
oklch(41.0% 0.021 256.4)

TraditionalIndigo」· PaintPrussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

943B5B
3C9675

Analogous

963C8A
943B5B
96483C

Triadic

943B5B
5D963C
3C5D96

Split-Comp.

943B5B
3C9648
3C8A96

Tetradic

943B5B
8A963C
3C9675
483C96

Contrast Matrix WCAG 2.1 Contrast

943B5B
FE6860
F2B660
9D977C
434B56
2.4
Fail
3.8
AA Large
2.4
Fail
1.3
Fail
2.4
Fail
1.6
Fail
1.0
Fail
3.1
AA Large
3.8
AA Large
1.6
Fail
1.6
Fail
4.9
AA
2.4
Fail
1.0
Fail
1.6
Fail
3.0
AA Large
1.3
Fail
3.1
AA Large
4.9
AA
3.0
AA Large
White BG
6.9AA
2.9Fail
1.8Fail
2.9Fail
8.8AAA
Black BG
3.0AA Large
7.4AAA
11.6AAA
7.2AAA
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6D6D53
BDBC62
D8D775
9A9A83
464753

Deuteranopia

737951
C6D162
DCE07A
9B9B84
464553

Tritanopia

904D4C
F66364
EF8589
9D8889
435151

Achromatopsia

595959
949494
BEBEBE
969696
4A4A4A

Shades & Tints Shades & Tints

#943B5B

Dark
Light

#FE6860

Dark
Light

#F2B660

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #943b5b;
  --color-2: #fe6860;
  --color-3: #f2b660;
  --color-4: #9d977c;
  --color-5: #434b56;
}

SCSS

$color-1: #943b5b;
$color-2: #fe6860;
$color-3: #f2b660;
$color-4: #9d977c;
$color-5: #434b56;

TAILWIND

colors: {
  'brand-1': '#943b5b',
  'brand-2': '#fe6860',
  'brand-3': '#f2b660',
  'brand-4': '#9d977c',
  'brand-5': '#434b56',
}

RGB Array

[148, 59, 91], [254, 104, 96], [242, 182, 96], [157, 151, 124], [67, 75, 86]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #943B5B, #FE6860, #F2B660, #9D977C, #434B56 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: #943b5b; --color-2: #fe6860; --color-3: #f2b660; --color-4: #9d977c; --color-5: #434b56. 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