#555D8A + #3D79A1 + #2C9CB0 + #6BBF9C + #ACD982 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#555D8A

Indigo · DarkSlateBlue · Navy Blue

HEX

#555D8A

RGB

rgb(85, 93, 138)

HSL

hsl(231, 24%, 44%)

HSB

hsb(231, 38%, 54%)

CMYK

cmyk(38%, 33%, 0%, 46%)

Oklch

oklch(49.1% 0.073 275.7)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#3D79A1

Slate Blue · SteelBlue · Navy Blue

HEX

#3D79A1

RGB

rgb(61, 121, 161)

HSL

hsl(204, 45%, 44%)

HSB

hsb(204, 62%, 63%)

CMYK

cmyk(62%, 25%, 0%, 37%)

Oklch

oklch(55.3% 0.088 240.2)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#2C9CB0

Lake Blue · LightSeaGreen · Mint Ice

HEX

#2C9CB0

RGB

rgb(44, 156, 176)

HSL

hsl(189, 60%, 43%)

HSB

hsb(189, 75%, 69%)

CMYK

cmyk(75%, 11%, 0%, 31%)

Oklch

oklch(64.0% 0.100 212.4)

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

#6BBF9C

Mineral Blue · MediumAquaMarine · Olive Green

HEX

#6BBF9C

RGB

rgb(107, 191, 156)

HSL

hsl(155, 40%, 58%)

HSB

hsb(155, 44%, 75%)

CMYK

cmyk(44%, 0%, 18%, 25%)

Oklch

oklch(74.1% 0.098 165.1)

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

#ACD982

Emerald · LightGreen · Apple Green

HEX

#ACD982

RGB

rgb(172, 217, 130)

HSL

hsl(91, 53%, 68%)

HSB

hsb(91, 40%, 85%)

CMYK

cmyk(21%, 0%, 40%, 15%)

Oklch

oklch(83.3% 0.124 130.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

555D8A

8B8355

Analogous

55788B

555D8A

68558B

Triadic

555D8A

8B555D

5D8B55

Split-Comp.

555D8A

8B6855

788B55

Tetradic

555D8A

8B5578

8B8355

558B68

Contrast Matrix WCAG 2.1 Contrast

555D8A	3D79A1	2C9CB0	6BBF9C	ACD982
—	1.3 Fail	2.0 Fail	2.9 Fail	3.9 AA Large
1.3 Fail	—	1.5 Fail	2.1 Fail	2.9 Fail
2.0 Fail	1.5 Fail	—	1.5 Fail	2.0 Fail
2.9 Fail	2.1 Fail	1.5 Fail	—	1.4 Fail
3.9 AA Large	2.9 Fail	2.0 Fail	1.4 Fail	—

White BG

6.3AA

4.7AA

3.2AA Large

2.2Fail

1.6Fail

Black BG

3.3AA Large

4.4AA Large

6.5AA

9.6AAA

13.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

58597F

575897

5C5EAB

8F90A4

BFC097

Deuteranopia

58577D

544F95

564EAA

8B84A7

BDBA9C

Tritanopia

557775

40908E

32A7A7

6FABAD

AEA8AB

Achromatopsia

606060

6C6C6C

7D7D7D

A2A2A2

C2C2C2

Shades & Tints Shades & Tints

#555D8A

Dark

Light

#3D79A1

Dark

Light

#2C9CB0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #555d8a;
  --color-2: #3d79a1;
  --color-3: #2c9cb0;
  --color-4: #6bbf9c;
  --color-5: #acd982;
}

SCSS

$color-1: #555d8a;
$color-2: #3d79a1;
$color-3: #2c9cb0;
$color-4: #6bbf9c;
$color-5: #acd982;

TAILWIND

colors: {
  'brand-1': '#555d8a',
  'brand-2': '#3d79a1',
  'brand-3': '#2c9cb0',
  'brand-4': '#6bbf9c',
  'brand-5': '#acd982',
}

RGB Array

[85, 93, 138], [61, 121, 161], [44, 156, 176], [107, 191, 156], [172, 217, 130]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #555D8A, #3D79A1, #2C9CB0, #6BBF9C, #ACD982 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: #555d8a; --color-2: #3d79a1; --color-3: #2c9cb0; --color-4: #6bbf9c; --color-5: #acd982. 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