← Back to Editor

#62B3A0 · #D9C3A1 · #D8B354 · #FF527F · #8B5784

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

#62B3A0

Mineral Blue · CadetBlue · Lake Green

HEX
#62B3A0
RGB
rgb(98, 179, 160)
HSL
hsl(166, 35%, 54%)
HSB
hsb(166, 45%, 70%)
CMYK
cmyk(45%, 0%, 11%, 30%)
Oklch
oklch(71.0% 0.085 176.7)

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

#D9C3A1

Goose Yellow · Tan · Warm Sun

HEX
#D9C3A1
RGB
rgb(217, 195, 161)
HSL
hsl(36, 42%, 74%)
HSB
hsb(36, 26%, 85%)
CMYK
cmyk(0%, 10%, 26%, 15%)
Oklch
oklch(82.7% 0.052 78.6)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#D8B354

Ginger · SandyBrown · Sunflower

HEX
#D8B354
RGB
rgb(216, 179, 84)
HSL
hsl(43, 63%, 59%)
HSB
hsb(43, 61%, 85%)
CMYK
cmyk(0%, 17%, 61%, 15%)
Oklch
oklch(78.1% 0.121 88.0)

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

#FF527F

Rouge · Salmon · Rose Pink

HEX
#FF527F
RGB
rgb(255, 82, 127)
HSL
hsl(344, 100%, 66%)
HSB
hsb(344, 68%, 100%)
CMYK
cmyk(0%, 68%, 50%, 0%)
Oklch
oklch(68.7% 0.210 9.0)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#8B5784

Rose Purple · Gray · Violet

HEX
#8B5784
RGB
rgb(139, 87, 132)
HSL
hsl(308, 23%, 44%)
HSB
hsb(308, 37%, 55%)
CMYK
cmyk(0%, 37%, 5%, 45%)
Oklch
oklch(53.0% 0.093 331.7)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

62B3A0
B36174

Analogous

61B377
62B3A0
619DB3

Triadic

62B3A0
A061B3
B3A061

Split-Comp.

62B3A0
B3619D
B37761

Tetradic

62B3A0
7761B3
B36174
9DB361

Contrast Matrix WCAG 2.1 Contrast

62B3A0
D9C3A1
D8B354
FF527F
8B5784
—
1.4
Fail
1.2
Fail
1.3
Fail
2.2
Fail
1.4
Fail
—
1.2
Fail
1.8
Fail
3.2
AA Large
1.2
Fail
1.2
Fail
—
1.6
Fail
2.8
Fail
1.3
Fail
1.8
Fail
1.6
Fail
—
1.8
Fail
2.2
Fail
3.2
AA Large
2.8
Fail
1.8
Fail
—
White BG
2.5Fail
1.7Fail
2.0Fail
3.1AA Large
5.5AA
Black BG
8.5AAA
12.3AAA
10.5AAA
6.8AA
3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

8586A5
CFCFA9
C8C86B
B4B374
747479

Deuteranopia

807AA6
D1D2AB
CACD71
BECB71
787B76

Tritanopia

66A8A9
D8B0B1
D67D81
F66C6A
88716F

Achromatopsia

999999
C6C6C6
B3B3B3
8B8B8B
6C6C6C

Shades & Tints Shades & Tints

#62B3A0

Dark
Light

#D9C3A1

Dark
Light

#D8B354

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #62b3a0;
  --color-2: #d9c3a1;
  --color-3: #d8b354;
  --color-4: #ff527f;
  --color-5: #8b5784;
}

SCSS

$color-1: #62b3a0;
$color-2: #d9c3a1;
$color-3: #d8b354;
$color-4: #ff527f;
$color-5: #8b5784;

TAILWIND

colors: {
  'brand-1': '#62b3a0',
  'brand-2': '#d9c3a1',
  'brand-3': '#d8b354',
  'brand-4': '#ff527f',
  'brand-5': '#8b5784',
}

RGB Array

[98, 179, 160], [217, 195, 161], [216, 179, 84], [255, 82, 127], [139, 87, 132]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #62B3A0, #D9C3A1, #D8B354, #FF527F, #8B5784 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: #62b3a0; --color-2: #d9c3a1; --color-3: #d8b354; --color-4: #ff527f; --color-5: #8b5784. 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