#FAED3F + #B28E90 + #918DB2 + #7B7D96 + #554A46 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FAED3F

Fresh Green · Yellow · Sunflower

HEX

#FAED3F

RGB

rgb(250, 237, 63)

HSL

hsl(56, 95%, 61%)

HSB

hsb(56, 75%, 98%)

CMYK

cmyk(0%, 5%, 75%, 2%)

Oklch

oklch(92.8% 0.180 105.0)

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

#B28E90

Peach Pink · DarkGray · Coral Red

HEX

#B28E90

RGB

rgb(178, 142, 144)

HSL

hsl(357, 19%, 63%)

HSB

hsb(357, 20%, 70%)

CMYK

cmyk(0%, 20%, 19%, 30%)

Oklch

oklch(68.1% 0.044 14.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#918DB2

Wisteria · LightSlateGray · Cobalt Blue

HEX

#918DB2

RGB

rgb(145, 141, 178)

HSL

hsl(246, 19%, 63%)

HSB

hsb(246, 21%, 70%)

CMYK

cmyk(19%, 21%, 0%, 30%)

Oklch

oklch(66.0% 0.055 289.8)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#7B7D96

Azure · LightSlateGray · Navy Blue

HEX

#7B7D96

RGB

rgb(123, 125, 150)

HSL

hsl(236, 11%, 54%)

HSB

hsb(236, 18%, 59%)

CMYK

cmyk(18%, 17%, 0%, 41%)

Oklch

oklch(59.7% 0.038 281.6)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#554A46

Tangerine · DarkSlateGray · Amber Brown

HEX

#554A46

RGB

rgb(85, 74, 70)

HSL

hsl(16, 10%, 30%)

HSB

hsb(16, 18%, 33%)

CMYK

cmyk(0%, 13%, 18%, 67%)

Oklch

oklch(41.9% 0.016 41.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FAED3F

3D4AFA

Analogous

FA8F3D

FAED3F

A8FA3D

Triadic

FAED3F

3DFAED

ED3DFA

Split-Comp.

FAED3F

3DA8FA

8F3DFA

Tetradic

FAED3F

3DFA8F

3D4AFA

FA3DA8

Contrast Matrix WCAG 2.1 Contrast

FAED3F	B28E90	918DB2	7B7D96	554A46
—	2.4 Fail	2.6 Fail	3.3 AA Large	7.0 AAA
2.4 Fail	—	1.1 Fail	1.4 Fail	2.9 Fail
2.6 Fail	1.1 Fail	—	1.3 Fail	2.7 Fail
3.3 AA Large	1.4 Fail	1.3 Fail	—	2.1 Fail
7.0 AAA	2.9 Fail	2.7 Fail	2.1 Fail	—

White BG

1.2Fail

2.9Fail

3.2AA Large

4.0AA Large

8.6AAA

Black BG

17.3AAA

7.2AAA

6.7AA

5.2AA

2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F4F469

A2A290

8F8FA9

7C7C90

505047

Deuteranopia

F5F673

A5A78F

9090A7

7C7C8F

515247

Tritanopia

F98A92

B08F8F

91A2A0

7B8B8A

544848

Achromatopsia

DDDDDD

999999

929292

7F7F7F

4D4D4D

Shades & Tints Shades & Tints

#FAED3F

Dark

Light

#B28E90

Dark

Light

#918DB2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #faed3f;
  --color-2: #b28e90;
  --color-3: #918db2;
  --color-4: #7b7d96;
  --color-5: #554a46;
}

SCSS

$color-1: #faed3f;
$color-2: #b28e90;
$color-3: #918db2;
$color-4: #7b7d96;
$color-5: #554a46;

TAILWIND

colors: {
  'brand-1': '#faed3f',
  'brand-2': '#b28e90',
  'brand-3': '#918db2',
  'brand-4': '#7b7d96',
  'brand-5': '#554a46',
}

RGB Array

[250, 237, 63], [178, 142, 144], [145, 141, 178], [123, 125, 150], [85, 74, 70]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FAED3F, #B28E90, #918DB2, #7B7D96, #554A46 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: #faed3f; --color-2: #b28e90; --color-3: #918db2; --color-4: #7b7d96; --color-5: #554a46. 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