← Back to Editor

#415554 · #558A7E · #ACC4A0 · #F5EFB3 · #C2485B

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

#415554

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#415554
RGB
rgb(65, 85, 84)
HSL
hsl(177, 13%, 29%)
HSB
hsb(177, 24%, 33%)
CMYK
cmyk(24%, 0%, 1%, 67%)
Oklch
oklch(43.3% 0.025 192.5)

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

#558A7E

Mineral Blue · SlateGray · Mint Ice

HEX
#558A7E
RGB
rgb(85, 138, 126)
HSL
hsl(166, 24%, 44%)
HSB
hsb(166, 38%, 54%)
CMYK
cmyk(38%, 0%, 9%, 46%)
Oklch
oklch(59.3% 0.060 178.1)

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

#ACC4A0

Celadon · DarkGray · Apple Green

HEX
#ACC4A0
RGB
rgb(172, 196, 160)
HSL
hsl(100, 23%, 70%)
HSB
hsb(100, 18%, 77%)
CMYK
cmyk(12%, 0%, 18%, 23%)
Oklch
oklch(79.3% 0.056 135.2)

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

#F5EFB3

Fresh Green · Wheat · Lemon Cream

HEX
#F5EFB3
RGB
rgb(245, 239, 179)
HSL
hsl(55, 77%, 83%)
HSB
hsb(55, 27%, 96%)
CMYK
cmyk(0%, 2%, 27%, 4%)
Oklch
oklch(94.3% 0.077 103.0)

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

#C2485B

Crimson · Sienna · Passion Red

HEX
#C2485B
RGB
rgb(194, 72, 91)
HSL
hsl(351, 50%, 52%)
HSB
hsb(351, 63%, 76%)
CMYK
cmyk(0%, 63%, 53%, 24%)
Oklch
oklch(57.2% 0.156 14.2)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

415554
544041

Analogous

405449
415554
404B54

Triadic

415554
534054
545340

Split-Comp.

415554
54404B
544940

Tetradic

415554
494054
544041
4B5440

Contrast Matrix WCAG 2.1 Contrast

415554
558A7E
ACC4A0
F5EFB3
C2485B
—
2.0
Fail
4.2
AA Large
6.7
AA
1.6
Fail
2.0
Fail
—
2.1
Fail
3.4
AA Large
1.2
Fail
4.2
AA Large
2.1
Fail
—
1.6
Fail
2.6
Fail
6.7
AA
3.4
AA Large
1.6
Fail
—
4.1
AA Large
1.6
Fail
1.2
Fail
2.6
Fail
4.1
AA Large
—
White BG
7.9AAA
3.9AA Large
1.9Fail
1.2Fail
4.8AA
Black BG
2.7Fail
5.3AA
11.2AAA
17.9AAA
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

4A4A54
6C6C81
B6B7A9
F2F2C2
8D8C56

Deuteranopia

494754
696582
B5B3AB
F3F3C5
949D55

Tritanopia

425454
588384
ADB0B1
F5CDD0
BC5352

Achromatopsia

4F4F4F
797979
B9B9B9
EAEAEA
6F6F6F

Shades & Tints Shades & Tints

#415554

Dark
Light

#558A7E

Dark
Light

#ACC4A0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #415554;
  --color-2: #558a7e;
  --color-3: #acc4a0;
  --color-4: #f5efb3;
  --color-5: #c2485b;
}

SCSS

$color-1: #415554;
$color-2: #558a7e;
$color-3: #acc4a0;
$color-4: #f5efb3;
$color-5: #c2485b;

TAILWIND

colors: {
  'brand-1': '#415554',
  'brand-2': '#558a7e',
  'brand-3': '#acc4a0',
  'brand-4': '#f5efb3',
  'brand-5': '#c2485b',
}

RGB Array

[65, 85, 84], [85, 138, 126], [172, 196, 160], [245, 239, 179], [194, 72, 91]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #415554, #558A7E, #ACC4A0, #F5EFB3, #C2485B 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: #415554; --color-2: #558a7e; --color-3: #acc4a0; --color-4: #f5efb3; --color-5: #c2485b. 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