← Back to Editor

#543C69 · #7DA5AB · #FCCC5D · #F5E64D · #F7FDFF

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#543C69

Dark Plum · DarkSlateBlue · Eggplant

HEX
#543C69
RGB
rgb(84, 60, 105)
HSL
hsl(272, 27%, 32%)
HSB
hsb(272, 43%, 41%)
CMYK
cmyk(20%, 43%, 0%, 59%)
Oklch
oklch(40.3% 0.079 307.8)

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

#7DA5AB

Slate Blue · CadetBlue · Lake Green

HEX
#7DA5AB
RGB
rgb(125, 165, 171)
HSL
hsl(188, 21%, 58%)
HSB
hsb(188, 27%, 67%)
CMYK
cmyk(27%, 4%, 0%, 33%)
Oklch
oklch(69.5% 0.044 207.6)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#FCCC5D

Ginger · SandyBrown · Sunflower

HEX
#FCCC5D
RGB
rgb(252, 204, 93)
HSL
hsl(42, 96%, 68%)
HSB
hsb(42, 63%, 99%)
CMYK
cmyk(0%, 19%, 63%, 1%)
Oklch
oklch(86.7% 0.138 85.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#F5E64D

Fresh Green · Khaki · Sunflower

HEX
#F5E64D
RGB
rgb(245, 230, 77)
HSL
hsl(55, 89%, 63%)
HSB
hsb(55, 69%, 96%)
CMYK
cmyk(0%, 6%, 69%, 4%)
Oklch
oklch(91.1% 0.167 103.7)

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

#F7FDFF

Sky Blue · White · Glacier Blue

HEX
#F7FDFF
RGB
rgb(247, 253, 255)
HSL
hsl(195, 100%, 98%)
HSB
hsb(195, 3%, 100%)
CMYK
cmyk(3%, 1%, 0%, 0%)
Oklch
oklch(99.0% 0.007 219.6)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

543C69
50683C

Analogous

3D3C68
543C69
683C66

Triadic

543C69
68533C
3C6853

Split-Comp.

543C69
66683C
3C683D

Tetradic

543C69
683D3C
50683C
3C6668

Contrast Matrix WCAG 2.1 Contrast

543C69
7DA5AB
FCCC5D
F5E64D
F7FDFF
—
3.5
AA Large
6.3
AA
7.3
AAA
9.2
AAA
3.5
AA Large
—
1.8
Fail
2.1
Fail
2.6
Fail
6.3
AA
1.8
Fail
—
1.2
Fail
1.5
Fail
7.3
AAA
2.1
Fail
1.2
Fail
—
1.3
Fail
9.2
AAA
2.6
Fail
1.5
Fail
1.3
Fail
—
White BG
9.4AAA
2.7Fail
1.5Fail
1.3Fail
1.0Fail
Black BG
2.2Fail
7.8AAA
13.9AAA
16.3AAA
20.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4A495E
8E8FAA
E7E778
EFEE72
FAFAFF

Deuteranopia

4B4D5C
8C89A9
EAEE7E
EFF17B
F9F9FE

Tritanopia

535654
7FA8A8
FA8D92
F48F96
F7FEFE

Achromatopsia

484848
9A9A9A
CECECE
D9D9D9
FBFBFB

Shades & Tints Shades & Tints

#543C69

Dark
Light

#7DA5AB

Dark
Light

#FCCC5D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #543c69;
  --color-2: #7da5ab;
  --color-3: #fccc5d;
  --color-4: #f5e64d;
  --color-5: #f7fdff;
}

SCSS

$color-1: #543c69;
$color-2: #7da5ab;
$color-3: #fccc5d;
$color-4: #f5e64d;
$color-5: #f7fdff;

TAILWIND

colors: {
  'brand-1': '#543c69',
  'brand-2': '#7da5ab',
  'brand-3': '#fccc5d',
  'brand-4': '#f5e64d',
  'brand-5': '#f7fdff',
}

RGB Array

[84, 60, 105], [125, 165, 171], [252, 204, 93], [245, 230, 77], [247, 253, 255]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #543C69, #7DA5AB, #FCCC5D, #F5E64D, #F7FDFF is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #543c69; --color-2: #7da5ab; --color-3: #fccc5d; --color-4: #f5e64d; --color-5: #f7fdff. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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