Now offer period OUR API HAS BEEN EXPANDED

New API V3.0: Get our API at a special price. Get it now. Get more detailed color conversion results - perfect for web projects, plugins, internal tools or SaaS applications. Valid from 2025-10-21 up to and including 2025-11-21 (23:59 CET)

API packages & prices X

CSS Gradients:
CMYK 29 / 1 / 0 / 53

Information

close all

2-color gradients - Complementary color

Let CSS suggest color gradients from two hues such as the base hue and the complementary color.

Find examples of linear and radial color transitions.

Easy for web design: Copy the CSS code for easy integration on your website.

2-color gradients - Lighter colors

Let CSS suggest color gradients from two hues such as the base hue and a lighter hue.

Find examples of linear and radial color transitions from Lighter colors.

Simple for web design: copy the CSS code for easy integration on your website.

2-color gradients - Darker colors

Let CSS suggest color gradients from two hues such as the base hue and a darker hue.

Find examples of linear and radial color transitions from Darker colors.

Simple for web design: copy the CSS code for easy integration on your website.

Display options

Description

Dark color: low color values appear darker.

The breakdown of the color into the RGB color system: of 255 maximum color components, 85 red, 119 green and 120 blue.

The mixing ratio of these colors results in the displayed hue in the middle of the overlaps.

In the illustration you can see how the color is composed of the three components: red (top),green (bottom right) and blue (bottom left). In the middle you can see the result color.

In the CMYK color system the color is composed as follows: In this color tone, out of 100 maximum color components, 29 cyan, 1 magenta, none yellow and 53 key.

The mixing ratio of these colors results in the displayed hue in the middle of the overlaps.

In the diagram you can see how the color is composed of the four components cyan (top left),magenta (top right),yellow (bottom right) and black or key (bottom left). In the middle you can see the result color.

Verification of their color palette as a manufacturer!

Provide designers and agencies with accurate color values.

Let's go

2-color gradients of CMYK 29 / 1 / 0 / 53 - Complementary color

Lineal

HEX #557778 to HEX #AA8887

CSS-Code:

background-image: linear-gradient(135deg, #557778 3%, #AA8887 88%);

Radial

HEX #557778 to HEX #AA8887

CSS-Code:

background-image: radial-gradient(circle, #557778 3%, #AA8887 91%);

HEX #AA8887 to HEX #557778

CSS-Code:

background-image: linear-gradient(135deg, #AA8887 3%, #557778 86%);

HEX #AA8887 to HEX #557778

CSS-Code:

background-image: radial-gradient(circle, #AA8887 6%, #557778 94%);

2-color gradients of CMYK 29 / 1 / 0 / 53 - Lighter colors

Lineal

HEX #557778 to HEX #55776F

CSS-Code:

background-image: linear-gradient(135deg, #557778 5%, #55776F 100%);

Radial

HEX #557778 to HEX #55776F

CSS-Code:

background-image: radial-gradient(circle, #557778 14%, #55776F 100%);

HEX #55776F to HEX #557778

CSS-Code:

background-image: linear-gradient(135deg, #55776F 13%, #557778 92%);

HEX #55776F to HEX #557778

CSS-Code:

background-image: radial-gradient(circle, #55776F 7%, #557778 94%);

HEX #557778 to HEX #557777

CSS-Code:

background-image: linear-gradient(135deg, #557778 1%, #557777 91%);

HEX #557778 to HEX #557777

CSS-Code:

background-image: radial-gradient(circle, #557778 8%, #557777 86%);

HEX #557777 to HEX #557778

CSS-Code:

background-image: linear-gradient(135deg, #557777 13%, #557778 88%);

HEX #557777 to HEX #557778

CSS-Code:

background-image: radial-gradient(circle, #557777 10%, #557778 97%);

HEX #557778 to HEX #556E77

CSS-Code:

background-image: linear-gradient(135deg, #557778 2%, #556E77 91%);

HEX #557778 to HEX #556E77

CSS-Code:

background-image: radial-gradient(circle, #557778 9%, #556E77 89%);

HEX #556E77 to HEX #557778

CSS-Code:

background-image: linear-gradient(135deg, #556E77 12%, #557778 86%);

HEX #556E77 to HEX #557778

CSS-Code:

background-image: radial-gradient(circle, #556E77 5%, #557778 99%);

HEX #557778 to HEX #556477

CSS-Code:

background-image: linear-gradient(135deg, #557778 5%, #556477 96%);

HEX #557778 to HEX #556477

CSS-Code:

background-image: radial-gradient(circle, #557778 5%, #556477 97%);

HEX #556477 to HEX #557778

CSS-Code:

background-image: linear-gradient(135deg, #556477 13%, #557778 87%);

HEX #556477 to HEX #557778

CSS-Code:

background-image: radial-gradient(circle, #556477 5%, #557778 93%);

2-color gradients of CMYK 29 / 1 / 0 / 53 - Darker colors

Lineal

HEX #557778 to HEX #445E5F

CSS-Code:

background-image: linear-gradient(135deg, #557778 9%, #445E5F 92%);

Radial

HEX #557778 to HEX #445E5F

CSS-Code:

background-image: radial-gradient(circle, #557778 14%, #445E5F 87%);

HEX #445E5F to HEX #557778

CSS-Code:

background-image: linear-gradient(135deg, #445E5F 5%, #557778 88%);

HEX #445E5F to HEX #557778

CSS-Code:

background-image: radial-gradient(circle, #445E5F 11%, #557778 94%);

HEX #557778 to HEX #557677

CSS-Code:

background-image: linear-gradient(135deg, #557778 11%, #557677 91%);

HEX #557778 to HEX #557677

CSS-Code:

background-image: radial-gradient(circle, #557778 6%, #557677 100%);

HEX #557677 to HEX #557778

CSS-Code:

background-image: linear-gradient(135deg, #557677 13%, #557778 98%);

HEX #557677 to HEX #557778

CSS-Code:

background-image: radial-gradient(circle, #557677 13%, #557778 92%);

HEX #557778 to HEX #668E8F

CSS-Code:

background-image: linear-gradient(135deg, #557778 8%, #668E8F 89%);

HEX #557778 to HEX #668E8F

CSS-Code:

background-image: radial-gradient(circle, #557778 3%, #668E8F 88%);

HEX #668E8F to HEX #557778

CSS-Code:

background-image: linear-gradient(135deg, #668E8F 5%, #557778 89%);

HEX #668E8F to HEX #557778

CSS-Code:

background-image: radial-gradient(circle, #668E8F 14%, #557778 90%);

HEX #557778 to HEX #7CA1A2

CSS-Code:

background-image: linear-gradient(135deg, #557778 7%, #7CA1A2 97%);

HEX #557778 to HEX #7CA1A2

CSS-Code:

background-image: radial-gradient(circle, #557778 7%, #7CA1A2 92%);

HEX #7CA1A2 to HEX #557778

CSS-Code:

background-image: linear-gradient(135deg, #7CA1A2 6%, #557778 96%);

HEX #7CA1A2 to HEX #557778

CSS-Code:

background-image: radial-gradient(circle, #7CA1A2 12%, #557778 90%);

2-color gradients of CMYK 29 / 1 / 0 / 53 - Analogue colors

Lineal

HEX #557778 to HEX #55776F

CSS-Code:

background-image: linear-gradient(135deg, #557778 8%, #55776F 100%);

Radial

HEX #557778 to HEX #55776F

CSS-Code:

background-image: radial-gradient(circle, #557778 8%, #55776F 91%);

HEX #55776F to HEX #557778

CSS-Code:

background-image: linear-gradient(135deg, #55776F 6%, #557778 89%);

HEX #55776F to HEX #557778

CSS-Code:

background-image: radial-gradient(circle, #55776F 2%, #557778 91%);

HEX #557778 to HEX #557777

CSS-Code:

background-image: linear-gradient(135deg, #557778 2%, #557777 99%);

HEX #557778 to HEX #557777

CSS-Code:

background-image: radial-gradient(circle, #557778 11%, #557777 91%);

HEX #557777 to HEX #557778

CSS-Code:

background-image: linear-gradient(135deg, #557777 3%, #557778 96%);

HEX #557777 to HEX #557778

CSS-Code:

background-image: radial-gradient(circle, #557777 3%, #557778 94%);

HEX #557778 to HEX #556E77

CSS-Code:

background-image: linear-gradient(135deg, #557778 6%, #556E77 100%);

HEX #557778 to HEX #556E77

CSS-Code:

background-image: radial-gradient(circle, #557778 13%, #556E77 100%);

HEX #556E77 to HEX #557778

CSS-Code:

background-image: linear-gradient(135deg, #556E77 1%, #557778 90%);

HEX #556E77 to HEX #557778

CSS-Code:

background-image: radial-gradient(circle, #556E77 3%, #557778 96%);

HEX #557778 to HEX #556477

CSS-Code:

background-image: linear-gradient(135deg, #557778 7%, #556477 97%);

HEX #557778 to HEX #556477

CSS-Code:

background-image: radial-gradient(circle, #557778 2%, #556477 100%);

HEX #556477 to HEX #557778

CSS-Code:

background-image: linear-gradient(135deg, #556477 5%, #557778 97%);

HEX #556477 to HEX #557778

CSS-Code:

background-image: radial-gradient(circle, #556477 7%, #557778 97%);

2-color gradients of CMYK 29 / 1 / 0 / 53 - Monochromatic colors

Lineal

HEX #557778 to HEX #445E5F

CSS-Code:

background-image: linear-gradient(135deg, #557778 2%, #445E5F 97%);

Radial

HEX #557778 to HEX #445E5F

CSS-Code:

background-image: radial-gradient(circle, #557778 3%, #445E5F 86%);

HEX #445E5F to HEX #557778

CSS-Code:

background-image: linear-gradient(135deg, #445E5F 12%, #557778 94%);

HEX #445E5F to HEX #557778

CSS-Code:

background-image: radial-gradient(circle, #445E5F 13%, #557778 89%);

HEX #557778 to HEX #557677

CSS-Code:

background-image: linear-gradient(135deg, #557778 1%, #557677 100%);

HEX #557778 to HEX #557677

CSS-Code:

background-image: radial-gradient(circle, #557778 12%, #557677 99%);

HEX #557677 to HEX #557778

CSS-Code:

background-image: linear-gradient(135deg, #557677 10%, #557778 98%);

HEX #557677 to HEX #557778

CSS-Code:

background-image: radial-gradient(circle, #557677 8%, #557778 97%);

HEX #557778 to HEX #668E8F

CSS-Code:

background-image: linear-gradient(135deg, #557778 2%, #668E8F 98%);

HEX #557778 to HEX #668E8F

CSS-Code:

background-image: radial-gradient(circle, #557778 3%, #668E8F 94%);

HEX #668E8F to HEX #557778

CSS-Code:

background-image: linear-gradient(135deg, #668E8F 12%, #557778 92%);

HEX #668E8F to HEX #557778

CSS-Code:

background-image: radial-gradient(circle, #668E8F 14%, #557778 94%);

HEX #557778 to HEX #7CA1A2

CSS-Code:

background-image: linear-gradient(135deg, #557778 4%, #7CA1A2 97%);

HEX #557778 to HEX #7CA1A2

CSS-Code:

background-image: radial-gradient(circle, #557778 11%, #7CA1A2 98%);

HEX #7CA1A2 to HEX #557778

CSS-Code:

background-image: linear-gradient(135deg, #7CA1A2 5%, #557778 100%);

HEX #7CA1A2 to HEX #557778

CSS-Code:

background-image: radial-gradient(circle, #7CA1A2 3%, #557778 100%);

2-color gradients of CMYK 29 / 1 / 0 / 53 - Partial complementary colors

Lineal

HEX #557778 to HEX #5C5577

CSS-Code:

background-image: linear-gradient(135deg, #557778 14%, #5C5577 95%);

Radial

HEX #557778 to HEX #5C5577

CSS-Code:

background-image: radial-gradient(circle, #557778 11%, #5C5577 92%);

HEX #5C5577 to HEX #557778

CSS-Code:

background-image: linear-gradient(135deg, #5C5577 2%, #557778 100%);

HEX #5C5577 to HEX #557778

CSS-Code:

background-image: radial-gradient(circle, #5C5577 4%, #557778 99%);

HEX #557778 to HEX #776A55

CSS-Code:

background-image: linear-gradient(135deg, #557778 14%, #776A55 100%);

HEX #557778 to HEX #776A55

CSS-Code:

background-image: radial-gradient(circle, #557778 12%, #776A55 90%);

HEX #776A55 to HEX #557778

CSS-Code:

background-image: linear-gradient(135deg, #776A55 9%, #557778 86%);

HEX #776A55 to HEX #557778

CSS-Code:

background-image: radial-gradient(circle, #776A55 0%, #557778 91%);

2-color gradients of CMYK 29 / 1 / 0 / 53 - Triadic colors

Lineal

HEX #557778 to HEX #775577

CSS-Code:

background-image: linear-gradient(135deg, #557778 4%, #775577 91%);

Radial

HEX #557778 to HEX #775577

CSS-Code:

background-image: radial-gradient(circle, #557778 3%, #775577 93%);

HEX #775577 to HEX #557778

CSS-Code:

background-image: linear-gradient(135deg, #775577 10%, #557778 99%);

HEX #775577 to HEX #557778

CSS-Code:

background-image: radial-gradient(circle, #775577 14%, #557778 90%);

HEX #557778 to HEX #777755

CSS-Code:

background-image: linear-gradient(135deg, #557778 8%, #777755 86%);

HEX #557778 to HEX #777755

CSS-Code:

background-image: radial-gradient(circle, #557778 10%, #777755 92%);

HEX #777755 to HEX #557778

CSS-Code:

background-image: linear-gradient(135deg, #777755 14%, #557778 99%);

HEX #777755 to HEX #557778

CSS-Code:

background-image: radial-gradient(circle, #777755 9%, #557778 92%);

2-color gradients of CMYK 29 / 1 / 0 / 53 - Rectangular (tetradic) colors

Lineal

HEX #557778 to HEX #5C5577

CSS-Code:

background-image: linear-gradient(135deg, #557778 3%, #5C5577 96%);

Radial

HEX #557778 to HEX #5C5577

CSS-Code:

background-image: radial-gradient(circle, #557778 6%, #5C5577 95%);

HEX #5C5577 to HEX #557778

CSS-Code:

background-image: linear-gradient(135deg, #5C5577 12%, #557778 99%);

HEX #5C5577 to HEX #557778

CSS-Code:

background-image: radial-gradient(circle, #5C5577 3%, #557778 99%);

HEX #557778 to HEX #775555

CSS-Code:

background-image: linear-gradient(135deg, #557778 3%, #775555 100%);

HEX #557778 to HEX #775555

CSS-Code:

background-image: radial-gradient(circle, #557778 0%, #775555 92%);

HEX #775555 to HEX #557778

CSS-Code:

background-image: linear-gradient(135deg, #775555 3%, #557778 95%);

HEX #775555 to HEX #557778

CSS-Code:

background-image: radial-gradient(circle, #775555 3%, #557778 86%);

HEX #557778 to HEX #707755

CSS-Code:

background-image: linear-gradient(135deg, #557778 3%, #707755 87%);

HEX #557778 to HEX #707755

CSS-Code:

background-image: radial-gradient(circle, #557778 8%, #707755 94%);

HEX #707755 to HEX #557778

CSS-Code:

background-image: linear-gradient(135deg, #707755 3%, #557778 98%);

HEX #707755 to HEX #557778

CSS-Code:

background-image: radial-gradient(circle, #707755 0%, #557778 91%);

2-color gradients of CMYK 29 / 1 / 0 / 53 - Square colors

Lineal

HEX #557778 to HEX #675577

CSS-Code:

background-image: linear-gradient(135deg, #557778 9%, #675577 93%);

Radial

HEX #557778 to HEX #675577

CSS-Code:

background-image: radial-gradient(circle, #557778 4%, #675577 86%);

HEX #675577 to HEX #557778

CSS-Code:

background-image: linear-gradient(135deg, #675577 8%, #557778 88%);

HEX #675577 to HEX #557778

CSS-Code:

background-image: radial-gradient(circle, #675577 2%, #557778 87%);

HEX #557778 to HEX #775555

CSS-Code:

background-image: linear-gradient(135deg, #557778 13%, #775555 91%);

HEX #557778 to HEX #775555

CSS-Code:

background-image: radial-gradient(circle, #557778 6%, #775555 96%);

HEX #775555 to HEX #557778

CSS-Code:

background-image: linear-gradient(135deg, #775555 0%, #557778 89%);

HEX #775555 to HEX #557778

CSS-Code:

background-image: radial-gradient(circle, #775555 10%, #557778 87%);

HEX #557778 to HEX #657755

CSS-Code:

background-image: linear-gradient(135deg, #557778 2%, #657755 92%);

HEX #557778 to HEX #657755

CSS-Code:

background-image: radial-gradient(circle, #557778 3%, #657755 87%);

HEX #657755 to HEX #557778

CSS-Code:

background-image: linear-gradient(135deg, #657755 12%, #557778 93%);

HEX #657755 to HEX #557778

CSS-Code:

background-image: radial-gradient(circle, #657755 9%, #557778 91%);

Show more color palettes

Services

Colors

RGB to HEX

convert from RGB red green blue to #RRGGBB

RGB to CMYK

convert from RGB red green blue to CMYK cyan / magenta / yellow / black

RGB to RAL®

convert from RGB red green blue to RAL®-number (RAL 0000)

RGB to HKS®

convert from RGB red green blue to HKS®-number (HKS 00)

RGB to PANTONE®

convert from RGB red green blue to Pantone®-number (Pantone 0000)

RGB to Sherwin Williams®

convert from RGB red green blue to Sherwin Williams®-number (SW 0000)

RGB to NCS®

convert from RGB red green blue to NCS-number (S0000-X00X)

RGBA to HEX

convert from RGBA red green blue transparency to #RRGGBB

RGBA to CMYK

convert from RGBA red green blue transparency to CMYK cyan / magenta / yellow / black

RGBA to RAL®

convert from RGBA red green blue transparency to RAL®-number (RAL 0000)

RGBA to HKS®

convert from RGBA red green blue transparency to HKS®-number (HKS 00)

RGBA to PANTONE®

convert from RGBA red green blue transparency to Pantone®-number (Pantone 0000)

RGBA to Sherwin Williams®

convert from RGBA red green blue transparency to Sherwin Williams®-number (SW 0000)

RGBA to NCS®

convert from RGBA red green blue transparency to NCS-number (S0000-X00X)

CMYK to HEX

convert from CMYK cyan / magenta / yellow / black to #RRGGBB

CMYK to RGB

convert from CMYK cyan / magenta / yellow / black to RGB red green blue

CMYK to RGBA

convert from CMYK cyan / magenta / yellow / black to RGBA red green blue transparency

CMYK to RAL®

convert from CMYK cyan / magenta / yellow / black to RAL®-number (RAL 0000)

CMYK to HKS®

convert from CMYK cyan / magenta / yellow / black to HKS®-number (HKS 00)

CMYK to PANTONE®

convert from CMYK cyan / magenta / yellow / black to Pantone®-number (Pantone 0000)

CMYK to Sherwin Williams®

convert from CMYK cyan / magenta / yellow / black to Sherwin Williams®-number (SW 0000)

CMYK to NCS®

convert from CMYK cyan / magenta / yellow / black to NCS-number (S0000-X00X)

HEX to RGB

convert from #RRGGBB to RGB red green blue

HEX to RGBA

convert from #RRGGBB to RGBA red green blue transparency

HEX to CMYK

convert from #RRGGBB to CMYK cyan / magenta / yellow / black

HEX to RAL®

convert from #RRGGBB to RAL®-number (RAL 0000)

HEX to HKS®

convert from #RRGGBB to HKS®-number (HKS 00)

HEX to PANTONE®

convert from #RRGGBB to Pantone®-number (Pantone 0000)

HEX to Sherwin Williams®

convert from #RRGGBB to Sherwin Williams®-number (SW 0000)

HEX to NCS®

convert from #RRGGBB to NCS-number (S0000-X00X)

RAL® to RGB

convert from RAL®-number (RAL 0000) to RGB red green blue

RAL® to RGBA

convert from RAL®-number (RAL 0000) to RGBA red green blue transparency

RAL® to CMYK

convert from RAL®-number (RAL 0000) to CMYK cyan / magenta / yellow / black

RAL® to HEX

convert from RAL®-number (RAL 0000) to #RRGGBB

RAL® to HKS®

convert from RAL®-number (RAL 0000) to HKS®-number (HKS 00)

RAL® to PANTONE®

convert from RAL®-number (RAL 0000) to Pantone®-number (Pantone 0000)

RAL® to Sherwin Williams®

convert from RAL®-number (RAL 0000) to Sherwin Williams®-number (SW 0000)

RAL® to NCS®

convert from RAL®-number (RAL 0000) to NCS-number (S0000-X00X)

HKS® to RGB

convert from HKS®-number (HKS 00) to RGB red green blue

HKS® to RGBA

convert from HKS®-number (HKS 00) to RGBA red green blue transparency

HKS® to CMYK

convert from HKS®-number (HKS 00) to CMYK cyan / magenta / yellow / black

HKS® to HEX

convert from HKS®-number (HKS 00) to #RRGGBB

HKS® to RAL®

convert from HKS®-number (HKS 00) to RAL®-number (RAL 0000)

HKS® to PANTONE®

convert from HKS®-number (HKS 00) to Pantone®-number (Pantone 0000)

HKS® to Sherwin Williams®

convert from HKS®-number (HKS 00) to Sherwin Williams®-number (SW 0000)

HKS® to NCS®

convert from HKS®-number (HKS 00) to NCS-number (S0000-X00X)

PANTONE® to RGB

convert from Pantone®-number (Pantone 0000) to RGB red green blue

PANTONE® to RGBA

convert from Pantone®-number (Pantone 0000) to RGBA red green blue transparency

PANTONE® to CMYK

convert from Pantone®-number (Pantone 0000) to CMYK cyan / magenta / yellow / black

PANTONE® to HEX

convert from Pantone®-number (Pantone 0000) to #RRGGBB

PANTONE® to RAL®

convert from Pantone®-number (Pantone 0000) to RAL®-number (RAL 0000)

PANTONE® to HKS®

convert from Pantone®-number (Pantone 0000) to HKS®-number (HKS 00)

PANTONE® to Sherwin Williams®

convert from Pantone®-number (Pantone 0000) to Sherwin Williams®-number (SW 0000)

PANTONE® to NCS®

convert from Pantone®-number (Pantone 0000) to NCS-number (S0000-X00X)

Sherwin Williams® to RGB

convert from Sherwin Williams®-number (SW 0000) to RGB red green blue

Sherwin Williams® to RGBA

convert from Sherwin Williams®-number (SW 0000) to RGBA red green blue transparency

Sherwin Williams® to CMYK

convert from Sherwin Williams®-number (SW 0000) to CMYK cyan / magenta / yellow / black

Sherwin Williams® to HEX

convert from Sherwin Williams®-number (SW 0000) to #RRGGBB

Sherwin Williams® to RAL®

convert from Sherwin Williams®-number (SW 0000) to RAL®-number (RAL 0000)

Sherwin Williams® to HKS®

convert from Sherwin Williams®-number (SW 0000) to HKS®-number (HKS 00)

Sherwin Williams® to PANTONE®

convert from Sherwin Williams®-number (SW 0000) to Pantone®-number (Pantone 0000)

Sherwin Williams® to NCS®

convert from Sherwin Williams®-number (SW 0000) to NCS-number (S0000-X00X)

NCS® to RGB

convert from NCS-number (S0000-X00X) to RGB red green blue

NCS® to RGBA

convert from NCS-number (S0000-X00X) to RGBA red green blue transparency

NCS® to CMYK

convert from NCS-number (S0000-X00X) to CMYK cyan / magenta / yellow / black

NCS® to HEX

convert from NCS-number (S0000-X00X) to #RRGGBB

NCS® to RAL®

convert from NCS-number (S0000-X00X) to RAL®-number (RAL 0000)

NCS® to HKS®

convert from NCS-number (S0000-X00X) to HKS®-number (HKS 00)

NCS® to PANTONE®

convert from NCS-number (S0000-X00X) to Pantone®-number (Pantone 0000)

To be able to save color palettes, a registration is required.

Log in to your account

or

Create an account

Current color palette Share
Should it be public or private?
Link(s) will follow after sharing.

Public

Color palette shared
Please copy and save the desired link.

Share

View

OK, I have copied the links

Your colors will be saved in a new color palette.
View them under your profile.
You can customize them further, and share them.

Show color palette

Close

Create a color palette

DownloadDownload in different formats

By clicking on you can create palettes and download the color swatches.