#55DCD0 + #C9B512 + #F13972 + #302E36 + #323037 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#55DCD0

Mineral Blue · MediumTurquoise · Lake Green

HEX

#55DCD0

RGB

rgb(85, 220, 208)

HSL

hsl(175, 66%, 60%)

HSB

hsb(175, 61%, 86%)

CMYK

cmyk(61%, 0%, 5%, 14%)

Oklch

oklch(81.8% 0.118 186.9)

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

#C9B512

Autumn Sage · GoldenRod · Honey Gold

HEX

#C9B512

RGB

rgb(201, 181, 18)

HSL

hsl(53, 84%, 43%)

HSB

hsb(53, 91%, 79%)

CMYK

cmyk(0%, 10%, 91%, 21%)

Oklch

oklch(76.7% 0.157 101.2)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#F13972

Dark Violet · DeepPink · Rose Pink

HEX

#F13972

RGB

rgb(241, 57, 114)

HSL

hsl(341, 87%, 58%)

HSB

hsb(341, 76%, 95%)

CMYK

cmyk(0%, 76%, 53%, 5%)

Oklch

oklch(64.0% 0.220 8.1)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#302E36

Deep Indigo · DarkSlateGray · Dark Stone

HEX

#302E36

RGB

rgb(48, 46, 54)

HSL

hsl(255, 8%, 20%)

HSB

hsb(255, 15%, 21%)

CMYK

cmyk(11%, 15%, 0%, 79%)

Oklch

oklch(30.6% 0.014 297.0)

Traditional「Deep Indigo」· Paint「Dark Stone」· Creative Midnight Shadow

#323037

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#323037

RGB

rgb(50, 48, 55)

HSL

hsl(257, 7%, 20%)

HSB

hsb(257, 13%, 22%)

CMYK

cmyk(9%, 13%, 0%, 78%)

Oklch

oklch(31.4% 0.013 298.7)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

55DCD0

DC5661

Analogous

56DC8E

55DCD0

56A4DC

Triadic

55DCD0

D156DC

DCD156

Split-Comp.

55DCD0

DC56A4

DC8E56

Tetradic

55DCD0

8E56DC

DC5661

A4DC56

Contrast Matrix WCAG 2.1 Contrast

55DCD0	C9B512	F13972	302E36	323037
—	1.2 Fail	2.3 Fail	8.0 AAA	7.8 AAA
1.2 Fail	—	1.8 Fail	6.4 AA	6.3 AA
2.3 Fail	1.8 Fail	—	3.5 AA Large	3.5 AA Large
8.0 AAA	6.4 AA	3.5 AA Large	—	1.0 Fail
7.8 AAA	6.3 AA	3.5 AA Large	1.0 Fail	—

White BG

1.7Fail

2.1Fail

3.8AA Large

13.4AAA

13.0AAA

Black BG

12.5AAA

10.1AAA

5.6AA

1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8F91D3

C0C039

A1A064

2F2F34

313135

Deuteranopia

887ED4

C2C343

ACBA61

2F2F34

313135

Tritanopia

5CD5D6

C8595F

E85957

303332

323434

Achromatopsia

B2B2B2

A8A8A8

777777

303030

313131

Shades & Tints Shades & Tints

#55DCD0

Dark

Light

#C9B512

Dark

Light

#F13972

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #55dcd0;
  --color-2: #c9b512;
  --color-3: #f13972;
  --color-4: #302e36;
  --color-5: #323037;
}

SCSS

$color-1: #55dcd0;
$color-2: #c9b512;
$color-3: #f13972;
$color-4: #302e36;
$color-5: #323037;

TAILWIND

colors: {
  'brand-1': '#55dcd0',
  'brand-2': '#c9b512',
  'brand-3': '#f13972',
  'brand-4': '#302e36',
  'brand-5': '#323037',
}

RGB Array

[85, 220, 208], [201, 181, 18], [241, 57, 114], [48, 46, 54], [50, 48, 55]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #55DCD0, #C9B512, #F13972, #302E36, #323037 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: #55dcd0; --color-2: #c9b512; --color-3: #f13972; --color-4: #302e36; --color-5: #323037. 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