← Back to Editor

#554060 · #636A76 · #9FDAA4 · #FADCA7 · #EFCF7A

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 LibraryData Visualization

Color Details Color Details

#554060

Dark Plum · DarkSlateGray · Eggplant

HEX
#554060
RGB
rgb(85, 64, 96)
HSL
hsl(279, 20%, 31%)
HSB
hsb(279, 33%, 38%)
CMYK
cmyk(11%, 33%, 0%, 62%)
Oklch
oklch(40.7% 0.058 313.7)

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

#636A76

Indigo · DimGray · Warm Gray

HEX
#636A76
RGB
rgb(99, 106, 118)
HSL
hsl(218, 9%, 43%)
HSB
hsb(218, 16%, 46%)
CMYK
cmyk(16%, 10%, 0%, 54%)
Oklch
oklch(52.3% 0.021 261.3)

Traditional「Indigo」· Paint「Warm Gray」· Creative Urban Concrete

#9FDAA4

Celadon · LightGreen · Apple Green

HEX
#9FDAA4
RGB
rgb(159, 218, 164)
HSL
hsl(125, 44%, 74%)
HSB
hsb(125, 27%, 85%)
CMYK
cmyk(27%, 0%, 25%, 15%)
Oklch
oklch(83.4% 0.096 146.8)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#FADCA7

Goose Yellow · Wheat · Peach Orange

HEX
#FADCA7
RGB
rgb(250, 220, 167)
HSL
hsl(38, 89%, 82%)
HSB
hsb(38, 33%, 98%)
CMYK
cmyk(0%, 12%, 33%, 2%)
Oklch
oklch(90.7% 0.076 81.6)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#EFCF7A

Goose Yellow · Khaki · Sunflower

HEX
#EFCF7A
RGB
rgb(239, 207, 122)
HSL
hsl(44, 79%, 71%)
HSB
hsb(44, 49%, 94%)
CMYK
cmyk(0%, 13%, 49%, 6%)
Oklch
oklch(86.4% 0.111 89.4)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

554060
4A5F3F

Analogous

443F5F
554060
5F3F5A

Triadic

554060
5F543F
3F5F54

Split-Comp.

554060
5A5F3F
3F5F44

Tetradic

554060
5F443F
4A5F3F
3F5A5F

Contrast Matrix WCAG 2.1 Contrast

554060
636A76
9FDAA4
FADCA7
EFCF7A
—
1.7
Fail
5.7
AA
6.9
AA
6.1
AA
1.7
Fail
—
3.4
AA Large
4.1
AA Large
3.6
AA Large
5.7
AA
3.4
AA Large
—
1.2
Fail
1.1
Fail
6.9
AA
4.1
AA Large
1.2
Fail
—
1.1
Fail
6.1
AA
3.6
AA Large
1.1
Fail
1.1
Fail
—
White BG
9.2AAA
5.4AA
1.6Fail
1.3Fail
1.5Fail
Black BG
2.3Fail
3.9AA Large
13.0AAA
15.9AAA
13.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4C4C58
666673
B9B9B1
EDEDB4
E1E18F

Deuteranopia

4D4F56
666572
B5B1B4
EFF1B7
E3E594

Tritanopia

545251
637170
A2BBBE
F9BEC0
ED9FA2

Achromatopsia

4A4A4A
696969
C2C2C2
DFDFDF
CFCFCF

Shades & Tints Shades & Tints

#554060

Dark
Light

#636A76

Dark
Light

#9FDAA4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #554060;
  --color-2: #636a76;
  --color-3: #9fdaa4;
  --color-4: #fadca7;
  --color-5: #efcf7a;
}

SCSS

$color-1: #554060;
$color-2: #636a76;
$color-3: #9fdaa4;
$color-4: #fadca7;
$color-5: #efcf7a;

TAILWIND

colors: {
  'brand-1': '#554060',
  'brand-2': '#636a76',
  'brand-3': '#9fdaa4',
  'brand-4': '#fadca7',
  'brand-5': '#efcf7a',
}

RGB Array

[85, 64, 96], [99, 106, 118], [159, 218, 164], [250, 220, 167], [239, 207, 122]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #554060, #636A76, #9FDAA4, #FADCA7, #EFCF7A is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #554060; --color-2: #636a76; --color-3: #9fdaa4; --color-4: #fadca7; --color-5: #efcf7a. 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 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