#515778 + #438F85 + #88AD5F + #FEC321 + #FFED4D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#515778

Indigo · DarkSlateBlue · Prussian Blue

HEX

#515778

RGB

rgb(81, 87, 120)

HSL

hsl(231, 19%, 39%)

HSB

hsb(231, 33%, 47%)

CMYK

cmyk(33%, 27%, 0%, 53%)

Oklch

oklch(46.5% 0.054 276.1)

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

#438F85

Mineral Blue · CadetBlue · Mint Ice

HEX

#438F85

RGB

rgb(67, 143, 133)

HSL

hsl(172, 36%, 41%)

HSB

hsb(172, 53%, 56%)

CMYK

cmyk(53%, 0%, 7%, 44%)

Oklch

oklch(59.9% 0.077 184.0)

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

#88AD5F

Grass Green · DarkSeaGreen · Olive Green

HEX

#88AD5F

RGB

rgb(136, 173, 95)

HSL

hsl(88, 32%, 53%)

HSB

hsb(88, 45%, 68%)

CMYK

cmyk(21%, 0%, 45%, 32%)

Oklch

oklch(70.2% 0.113 129.7)

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

#FEC321

Ginger · Gold · Sunflower

HEX

#FEC321

RGB

rgb(254, 195, 33)

HSL

hsl(44, 99%, 56%)

HSB

hsb(44, 87%, 100%)

CMYK

cmyk(0%, 23%, 87%, 0%)

Oklch

oklch(84.8% 0.168 85.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#FFED4D

Fresh Green · Khaki · Sunflower

HEX

#FFED4D

RGB

rgb(255, 237, 77)

HSL

hsl(54, 100%, 65%)

HSB

hsb(54, 70%, 100%)

CMYK

cmyk(0%, 7%, 70%, 0%)

Oklch

oklch(93.4% 0.172 102.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

515778

767151

Analogous

516976

515778

5E5176

Triadic

515778

765156

567651

Split-Comp.

515778

765E51

697651

Tetradic

515778

765169

767151

51765E

Contrast Matrix WCAG 2.1 Contrast

515778	438F85	88AD5F	FEC321	FFED4D
—	1.8 Fail	2.7 Fail	4.4 AA Large	5.9 AA
1.8 Fail	—	1.5 Fail	2.4 Fail	3.2 AA Large
2.7 Fail	1.5 Fail	—	1.6 Fail	2.1 Fail
4.4 AA Large	2.4 Fail	1.6 Fail	—	1.3 Fail
5.9 AA	3.2 AA Large	2.1 Fail	1.3 Fail	—

White BG

7.0AAA

3.8AA Large

2.6Fail

1.6Fail

1.2Fail

Black BG

3.0Fail

5.5AA

8.2AAA

13.0AAA

17.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

545470

646587

989872

E4E448

F7F774

Deuteranopia

53536E

605A88

969376

E8EC52

F8FA7D

Tritanopia

516A68

47898A

8A8184

FB676E

FE9299

Achromatopsia

595959

777777

999999

C2C2C2

E0E0E0

Shades & Tints Shades & Tints

#515778

Dark

Light

#438F85

Dark

Light

#88AD5F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #515778;
  --color-2: #438f85;
  --color-3: #88ad5f;
  --color-4: #fec321;
  --color-5: #ffed4d;
}

SCSS

$color-1: #515778;
$color-2: #438f85;
$color-3: #88ad5f;
$color-4: #fec321;
$color-5: #ffed4d;

TAILWIND

colors: {
  'brand-1': '#515778',
  'brand-2': '#438f85',
  'brand-3': '#88ad5f',
  'brand-4': '#fec321',
  'brand-5': '#ffed4d',
}

RGB Array

[81, 87, 120], [67, 143, 133], [136, 173, 95], [254, 195, 33], [255, 237, 77]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #515778, #438F85, #88AD5F, #FEC321, #FFED4D 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: #515778; --color-2: #438f85; --color-3: #88ad5f; --color-4: #fec321; --color-5: #ffed4d. 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