#FED384 + #CC617F + #9E4470 + #93698E + #A297B8 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FED384

Goose Yellow · Khaki · Peach Orange

HEX

#FED384

RGB

rgb(254, 211, 132)

HSL

hsl(39, 98%, 76%)

HSB

hsb(39, 48%, 100%)

CMYK

cmyk(0%, 17%, 48%, 0%)

Oklch

oklch(88.7% 0.109 81.8)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#CC617F

Dark Violet · LightCoral · Rose Pink

HEX

#CC617F

RGB

rgb(204, 97, 127)

HSL

hsl(343, 51%, 59%)

HSB

hsb(343, 52%, 80%)

CMYK

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

Oklch

oklch(63.0% 0.139 4.2)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#9E4470

Dark Violet · DimGray · Camellia

HEX

#9E4470

RGB

rgb(158, 68, 112)

HSL

hsl(331, 40%, 44%)

HSB

hsb(331, 57%, 62%)

CMYK

cmyk(0%, 57%, 29%, 38%)

Oklch

oklch(51.8% 0.130 352.0)

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

#93698E

Rose Purple · Gray · Violet

HEX

#93698E

RGB

rgb(147, 105, 142)

HSL

hsl(307, 17%, 49%)

HSB

hsb(307, 29%, 58%)

CMYK

cmyk(0%, 29%, 3%, 42%)

Oklch

oklch(57.6% 0.075 330.6)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#A297B8

Wisteria · DarkGray · Lilac Purple

HEX

#A297B8

RGB

rgb(162, 151, 184)

HSL

hsl(260, 19%, 66%)

HSB

hsb(260, 18%, 72%)

CMYK

cmyk(12%, 18%, 0%, 28%)

Oklch

oklch(69.7% 0.049 300.4)

Traditional「Wisteria」· Paint「Lilac Purple」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FED384

86B0FE

Analogous

FE9886

FED384

ECFE86

Triadic

FED384

86FED4

D486FE

Split-Comp.

FED384

86ECFE

9886FE

Tetradic

FED384

86FE98

86B0FE

FE86EC

Contrast Matrix WCAG 2.1 Contrast

FED384	CC617F	9E4470	93698E	A297B8
—	2.7 Fail	4.2 AA Large	3.2 AA Large	1.9 Fail
2.7 Fail	—	1.6 Fail	1.2 Fail	1.4 Fail
4.2 AA Large	1.6 Fail	—	1.3 Fail	2.2 Fail
3.2 AA Large	1.2 Fail	1.3 Fail	—	1.6 Fail
1.9 Fail	1.4 Fail	2.2 Fail	1.6 Fail	—

White BG

1.4Fail

3.8AA Large

6.0AA

4.5AA

2.7Fail

Black BG

14.9AAA

5.6AA

3.5AA Large

4.7AA

7.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBEB97

9E9D78

777665

818085

9D9DB0

Deuteranopia

EEF19C

A4AC76

7C8363

838683

9E9FAE

Tritanopia

FCA6AA

C77271

9A5D5B

917E7C

A1AAA8

Achromatopsia

D7D7D7

848484

646464

7A7A7A

9E9E9E

Shades & Tints Shades & Tints

#FED384

Dark

Light

#CC617F

Dark

Light

#9E4470

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fed384;
  --color-2: #cc617f;
  --color-3: #9e4470;
  --color-4: #93698e;
  --color-5: #a297b8;
}

SCSS

$color-1: #fed384;
$color-2: #cc617f;
$color-3: #9e4470;
$color-4: #93698e;
$color-5: #a297b8;

TAILWIND

colors: {
  'brand-1': '#fed384',
  'brand-2': '#cc617f',
  'brand-3': '#9e4470',
  'brand-4': '#93698e',
  'brand-5': '#a297b8',
}

RGB Array

[254, 211, 132], [204, 97, 127], [158, 68, 112], [147, 105, 142], [162, 151, 184]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FED384, #CC617F, #9E4470, #93698E, #A297B8 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: #fed384; --color-2: #cc617f; --color-3: #9e4470; --color-4: #93698e; --color-5: #a297b8. 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