#55D9D2 + #A7C7AF + #CCB27E + #E37F76 + #875869 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#55D9D2

Mineral Blue · MediumTurquoise · Lake Green

HEX

#55D9D2

RGB

rgb(85, 217, 210)

HSL

hsl(177, 63%, 59%)

HSB

hsb(177, 61%, 85%)

CMYK

cmyk(61%, 0%, 3%, 15%)

Oklch

oklch(81.1% 0.115 190.2)

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

#A7C7AF

Celadon · DarkGray · Apple Green

HEX

#A7C7AF

RGB

rgb(167, 199, 175)

HSL

hsl(135, 22%, 72%)

HSB

hsb(135, 16%, 78%)

CMYK

cmyk(16%, 0%, 12%, 22%)

Oklch

oklch(79.9% 0.048 152.8)

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

#CCB27E

Ginger · Tan · Sunflower

HEX

#CCB27E

RGB

rgb(204, 178, 126)

HSL

hsl(40, 43%, 65%)

HSB

hsb(40, 38%, 80%)

CMYK

cmyk(0%, 13%, 38%, 20%)

Oklch

oklch(77.4% 0.075 84.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#E37F76

Peach Pink · LightCoral · Coral Red

HEX

#E37F76

RGB

rgb(227, 127, 118)

HSL

hsl(5, 66%, 68%)

HSB

hsb(5, 48%, 89%)

CMYK

cmyk(0%, 44%, 48%, 11%)

Oklch

oklch(70.4% 0.125 26.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#875869

Dark Violet · DimGray · Camellia

HEX

#875869

RGB

rgb(135, 88, 105)

HSL

hsl(338, 21%, 44%)

HSB

hsb(338, 35%, 53%)

CMYK

cmyk(0%, 35%, 22%, 47%)

Oklch

oklch(51.7% 0.066 356.3)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

55D9D2

D8555B

Analogous

55D890

55D9D2

559DD8

Triadic

55D9D2

D255D8

D8D255

Split-Comp.

55D9D2

D8559D

D89055

Tetradic

55D9D2

9055D8

D8555B

9DD855

Contrast Matrix WCAG 2.1 Contrast

55D9D2	A7C7AF	CCB27E	E37F76	875869
—	1.1 Fail	1.2 Fail	1.6 Fail	3.4 AA Large
1.1 Fail	—	1.1 Fail	1.5 Fail	3.1 AA Large
1.2 Fail	1.1 Fail	—	1.4 Fail	2.8 Fail
1.6 Fail	1.5 Fail	1.4 Fail	—	2.1 Fail
3.4 AA Large	3.1 AA Large	2.8 Fail	2.1 Fail	—

White BG

1.7Fail

1.8Fail

2.1Fail

2.8Fail

5.8AA

Black BG

12.2AAA

11.4AAA

10.2AAA

7.6AAA

3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8FD4

B5B5B5

C1C18B

B8B778

737265

Deuteranopia

877DD4

B3B1B6

C2C48E

BEC579

757964

Tritanopia

5CD5D5

A9B9BA

CB9597

DE7A7A

856261

Achromatopsia

B1B1B1

BBBBBB

B4B4B4

9C9C9C

686868

Shades & Tints Shades & Tints

#55D9D2

Dark

Light

#A7C7AF

Dark

Light

#CCB27E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #55d9d2;
  --color-2: #a7c7af;
  --color-3: #ccb27e;
  --color-4: #e37f76;
  --color-5: #875869;
}

SCSS

$color-1: #55d9d2;
$color-2: #a7c7af;
$color-3: #ccb27e;
$color-4: #e37f76;
$color-5: #875869;

TAILWIND

colors: {
  'brand-1': '#55d9d2',
  'brand-2': '#a7c7af',
  'brand-3': '#ccb27e',
  'brand-4': '#e37f76',
  'brand-5': '#875869',
}

RGB Array

[85, 217, 210], [167, 199, 175], [204, 178, 126], [227, 127, 118], [135, 88, 105]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #55D9D2, #A7C7AF, #CCB27E, #E37F76, #875869 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: #55d9d2; --color-2: #a7c7af; --color-3: #ccb27e; --color-4: #e37f76; --color-5: #875869. 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