← Back to Editor

#546E68 · #548C80 · #FFA321 · #FFBC21 · #30A188

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#546E68

Mineral Blue · DimGray · Mint Ice

HEX
#546E68
RGB
rgb(84, 110, 104)
HSL
hsl(166, 13%, 38%)
HSB
hsb(166, 24%, 43%)
CMYK
cmyk(24%, 0%, 5%, 57%)
Oklch
oklch(51.6% 0.032 179.3)

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

#548C80

Mineral Blue · SlateGray · Mint Ice

HEX
#548C80
RGB
rgb(84, 140, 128)
HSL
hsl(167, 25%, 44%)
HSB
hsb(167, 40%, 55%)
CMYK
cmyk(40%, 0%, 9%, 45%)
Oklch
oklch(59.8% 0.062 178.8)

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

#FFA321

Ginger · Orange · Warm Sun

HEX
#FFA321
RGB
rgb(255, 163, 33)
HSL
hsl(35, 100%, 56%)
HSB
hsb(35, 87%, 100%)
CMYK
cmyk(0%, 36%, 87%, 0%)
Oklch
oklch(79.0% 0.166 67.9)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#FFBC21

Ginger · Orange · Sunflower

HEX
#FFBC21
RGB
rgb(255, 188, 33)
HSL
hsl(42, 100%, 56%)
HSB
hsb(42, 87%, 100%)
CMYK
cmyk(0%, 26%, 87%, 0%)
Oklch
oklch(83.5% 0.166 81.4)

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

#30A188

Mineral Blue · MediumSeaGreen · Mint Ice

HEX
#30A188
RGB
rgb(48, 161, 136)
HSL
hsl(167, 54%, 41%)
HSB
hsb(167, 70%, 63%)
CMYK
cmyk(70%, 0%, 16%, 37%)
Oklch
oklch(64.0% 0.107 174.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

546E68
6D545A

Analogous

546D5B
546E68
54676D

Triadic

546E68
68546D
6D6854

Split-Comp.

546E68
6D5467
6D5B54

Tetradic

546E68
5B546D
6D545A
676D54

Contrast Matrix WCAG 2.1 Contrast

546E68
548C80
FFA321
FFBC21
30A188
—
1.4
Fail
2.8
Fail
3.3
AA Large
1.7
Fail
1.4
Fail
—
1.9
Fail
2.3
Fail
1.2
Fail
2.8
Fail
1.9
Fail
—
1.2
Fail
1.6
Fail
3.3
AA Large
2.3
Fail
1.2
Fail
—
1.9
Fail
1.7
Fail
1.2
Fail
1.6
Fail
1.9
Fail
—
White BG
5.5AA
3.9AA Large
2.0Fail
1.7Fail
3.2AA Large
Black BG
3.8AA Large
5.4AA
10.5AAA
12.5AAA
6.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5F5F69
6C6D83
D7D640
E2E147
61628E

Deuteranopia

5E5C6A
696584
DDE348
E6EB50
5A5290

Tritanopia

556B6B
578586
FA595F
FC646B
369394

Achromatopsia

666666
7A7A7A
B0B0B0
BEBEBE
7C7C7C

Shades & Tints Shades & Tints

#546E68

Dark
Light

#548C80

Dark
Light

#FFA321

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #546e68;
  --color-2: #548c80;
  --color-3: #ffa321;
  --color-4: #ffbc21;
  --color-5: #30a188;
}

SCSS

$color-1: #546e68;
$color-2: #548c80;
$color-3: #ffa321;
$color-4: #ffbc21;
$color-5: #30a188;

TAILWIND

colors: {
  'brand-1': '#546e68',
  'brand-2': '#548c80',
  'brand-3': '#ffa321',
  'brand-4': '#ffbc21',
  'brand-5': '#30a188',
}

RGB Array

[84, 110, 104], [84, 140, 128], [255, 163, 33], [255, 188, 33], [48, 161, 136]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #546E68, #548C80, #FFA321, #FFBC21, #30A188 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: #546e68; --color-2: #548c80; --color-3: #ffa321; --color-4: #ffbc21; --color-5: #30a188. 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