#BEF522 + #78B554 + #327887 + #465573 + #56355A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#BEF522

Grass Green · GreenYellow · Olive Green

HEX

#BEF522

RGB

rgb(190, 245, 34)

HSL

hsl(76, 91%, 55%)

HSB

hsb(76, 86%, 96%)

CMYK

cmyk(22%, 0%, 86%, 4%)

Oklch

oklch(90.0% 0.219 124.7)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#78B554

Celadon · DarkSeaGreen · Olive Green

HEX

#78B554

RGB

rgb(120, 181, 84)

HSL

hsl(98, 40%, 52%)

HSB

hsb(98, 54%, 71%)

CMYK

cmyk(34%, 0%, 54%, 29%)

Oklch

oklch(71.0% 0.144 135.2)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#327887

Slate Blue · SteelBlue · Mint Ice

HEX

#327887

RGB

rgb(50, 120, 135)

HSL

hsl(191, 46%, 36%)

HSB

hsb(191, 63%, 53%)

CMYK

cmyk(63%, 11%, 0%, 47%)

Oklch

oklch(53.5% 0.073 214.1)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#465573

Indigo · DarkSlateBlue · Prussian Blue

HEX

#465573

RGB

rgb(70, 85, 115)

HSL

hsl(220, 24%, 36%)

HSB

hsb(220, 39%, 45%)

CMYK

cmyk(39%, 26%, 0%, 55%)

Oklch

oklch(44.9% 0.053 263.8)

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

#56355A

Dark Plum · DarkSlateGray · Eggplant

HEX

#56355A

RGB

rgb(86, 53, 90)

HSL

hsl(294, 26%, 28%)

HSB

hsb(294, 41%, 35%)

CMYK

cmyk(4%, 41%, 0%, 65%)

Oklch

oklch(38.4% 0.074 323.0)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BEF522

5C24F5

Analogous

F5C424

BEF522

55F524

Triadic

BEF522

24BDF5

F524BD

Split-Comp.

BEF522

2455F5

C424F5

Tetradic

BEF522

24F5C4

5C24F5

F52455

Contrast Matrix WCAG 2.1 Contrast

BEF522	78B554	327887	465573	56355A
—	1.9 Fail	3.9 AA Large	5.8 AA	7.9 AAA
1.9 Fail	—	2.0 Fail	3.0 AA Large	4.2 AA Large
3.9 AA Large	2.0 Fail	—	1.5 Fail	2.0 Fail
5.8 AA	3.0 AA Large	1.5 Fail	—	1.4 Fail
7.9 AAA	4.2 AA Large	2.0 Fail	1.4 Fail	—

White BG

1.3Fail

2.5Fail

5.0AA

7.5AAA

10.2AAA

Black BG

16.3AAA

8.5AAA

4.2AA Large

2.8Fail

2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D6D655

92936B

505183

4C4D6C

484751

Deuteranopia

D3CF61

8F8A71

4C4783

4C4B6A

4A4C4F

Tritanopia

C17D86

7B7E82

368180

476665

544A48

Achromatopsia

CDCDCD

989898

656565

545454

434343

Shades & Tints Shades & Tints

#BEF522

Dark

Light

#78B554

Dark

Light

#327887

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bef522;
  --color-2: #78b554;
  --color-3: #327887;
  --color-4: #465573;
  --color-5: #56355a;
}

SCSS

$color-1: #bef522;
$color-2: #78b554;
$color-3: #327887;
$color-4: #465573;
$color-5: #56355a;

TAILWIND

colors: {
  'brand-1': '#bef522',
  'brand-2': '#78b554',
  'brand-3': '#327887',
  'brand-4': '#465573',
  'brand-5': '#56355a',
}

RGB Array

[190, 245, 34], [120, 181, 84], [50, 120, 135], [70, 85, 115], [86, 53, 90]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BEF522, #78B554, #327887, #465573, #56355A 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: #bef522; --color-2: #78b554; --color-3: #327887; --color-4: #465573; --color-5: #56355a. 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