Dear color lovers – together, we’ll have a more colorful future. Support us on

✕

CSS Gradients:
CMYK 70 / 0 / 76 / 34

Information

close all

We suggest CSS gradients from two color tones such as the base color 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.

Get CSS gradients from two color tones like the base color and a lighter shade.

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

Let us suggest CSS gradients from two shades like the base color and a darker shade.

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

Easy for Web Design: Copy the CSS code for easy integration on your website.

Display options

Description

Since the color values are relatively low compared to others, this hue appears darker to us.

The breakdown of the color into the RGB color system: of 255 maximum color components, 50 red, 168 green and 40 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.
50 168 40 R G B
In the CMYK color system the color is composed as follows: In this color tone, out of 100 maximum color components, 70 cyan, none magenta, 76 yellow and 34 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.
70% 0% 76% 34% C M Y K

Verification of their color palette as a manufacturer!

Provide designers and agencies with accurate color values.

Let's go

Lineal

HEX #32A828 to HEX #CD57D7


CSS-Code:

background-image: linear-gradient(135deg, #32A828 12%, #CD57D7 94%);

Radial

HEX #32A828 to HEX #CD57D7


CSS-Code:

background-image: radial-gradient(circle, #32A828 3%, #CD57D7 100%);

 

HEX #CD57D7 to HEX #32A828


CSS-Code:

background-image: linear-gradient(135deg, #CD57D7 5%, #32A828 98%);

 

HEX #CD57D7 to HEX #32A828


CSS-Code:

background-image: radial-gradient(circle, #CD57D7 11%, #32A828 87%);

Lineal

HEX #32A828 to HEX #55A927


CSS-Code:

background-image: linear-gradient(135deg, #32A828 6%, #55A927 95%);

Radial

HEX #32A828 to HEX #55A927


CSS-Code:

background-image: radial-gradient(circle, #32A828 7%, #55A927 93%);

 

HEX #55A927 to HEX #32A828


CSS-Code:

background-image: linear-gradient(135deg, #55A927 11%, #32A828 91%);

 

HEX #55A927 to HEX #32A828


CSS-Code:

background-image: radial-gradient(circle, #55A927 12%, #32A828 97%);

 

HEX #32A828 to HEX #32A927


CSS-Code:

background-image: linear-gradient(135deg, #32A828 8%, #32A927 94%);

 

HEX #32A828 to HEX #32A927


CSS-Code:

background-image: radial-gradient(circle, #32A828 11%, #32A927 99%);

 

HEX #32A927 to HEX #32A828


CSS-Code:

background-image: linear-gradient(135deg, #32A927 14%, #32A828 89%);

 

HEX #32A927 to HEX #32A828


CSS-Code:

background-image: radial-gradient(circle, #32A927 1%, #32A828 93%);

 

HEX #32A828 to HEX #27A93F


CSS-Code:

background-image: linear-gradient(135deg, #32A828 0%, #27A93F 99%);

 

HEX #32A828 to HEX #27A93F


CSS-Code:

background-image: radial-gradient(circle, #32A828 7%, #27A93F 91%);

 

HEX #27A93F to HEX #32A828


CSS-Code:

background-image: linear-gradient(135deg, #27A93F 14%, #32A828 98%);

 

HEX #27A93F to HEX #32A828


CSS-Code:

background-image: radial-gradient(circle, #27A93F 9%, #32A828 91%);

 

HEX #32A828 to HEX #27A962


CSS-Code:

background-image: linear-gradient(135deg, #32A828 7%, #27A962 87%);

 

HEX #32A828 to HEX #27A962


CSS-Code:

background-image: radial-gradient(circle, #32A828 6%, #27A962 89%);

 

HEX #27A962 to HEX #32A828


CSS-Code:

background-image: linear-gradient(135deg, #27A962 10%, #32A828 100%);

 

HEX #27A962 to HEX #32A828


CSS-Code:

background-image: radial-gradient(circle, #27A962 14%, #32A828 100%);

Lineal

HEX #32A828 to HEX #28871F


CSS-Code:

background-image: linear-gradient(135deg, #32A828 11%, #28871F 92%);

Radial

HEX #32A828 to HEX #28871F


CSS-Code:

background-image: radial-gradient(circle, #32A828 3%, #28871F 91%);

 

HEX #28871F to HEX #32A828


CSS-Code:

background-image: linear-gradient(135deg, #28871F 2%, #32A828 86%);

 

HEX #28871F to HEX #32A828


CSS-Code:

background-image: radial-gradient(circle, #28871F 11%, #32A828 90%);

 

HEX #32A828 to HEX #31A927


CSS-Code:

background-image: linear-gradient(135deg, #32A828 1%, #31A927 86%);

 

HEX #32A828 to HEX #31A927


CSS-Code:

background-image: radial-gradient(circle, #32A828 4%, #31A927 86%);

 

HEX #31A927 to HEX #32A828


CSS-Code:

background-image: linear-gradient(135deg, #31A927 12%, #32A828 96%);

 

HEX #31A927 to HEX #32A828


CSS-Code:

background-image: radial-gradient(circle, #31A927 12%, #32A828 97%);

 

HEX #32A828 to HEX #3BCA2F


CSS-Code:

background-image: linear-gradient(135deg, #32A828 10%, #3BCA2F 91%);

 

HEX #32A828 to HEX #3BCA2F


CSS-Code:

background-image: radial-gradient(circle, #32A828 11%, #3BCA2F 91%);

 

HEX #3BCA2F to HEX #32A828


CSS-Code:

background-image: linear-gradient(135deg, #3BCA2F 14%, #32A828 87%);

 

HEX #3BCA2F to HEX #32A828


CSS-Code:

background-image: radial-gradient(circle, #3BCA2F 7%, #32A828 95%);

 

HEX #32A828 to HEX #58D54E


CSS-Code:

background-image: linear-gradient(135deg, #32A828 0%, #58D54E 89%);

 

HEX #32A828 to HEX #58D54E


CSS-Code:

background-image: radial-gradient(circle, #32A828 7%, #58D54E 97%);

 

HEX #58D54E to HEX #32A828


CSS-Code:

background-image: linear-gradient(135deg, #58D54E 7%, #32A828 89%);

 

HEX #58D54E to HEX #32A828


CSS-Code:

background-image: radial-gradient(circle, #58D54E 1%, #32A828 97%);

Lineal

HEX #32A828 to HEX #55A927


CSS-Code:

background-image: linear-gradient(135deg, #32A828 9%, #55A927 88%);

Radial

HEX #32A828 to HEX #55A927


CSS-Code:

background-image: radial-gradient(circle, #32A828 8%, #55A927 99%);

 

HEX #55A927 to HEX #32A828


CSS-Code:

background-image: linear-gradient(135deg, #55A927 14%, #32A828 95%);

 

HEX #55A927 to HEX #32A828


CSS-Code:

background-image: radial-gradient(circle, #55A927 10%, #32A828 87%);

 

HEX #32A828 to HEX #32A927


CSS-Code:

background-image: linear-gradient(135deg, #32A828 0%, #32A927 90%);

 

HEX #32A828 to HEX #32A927


CSS-Code:

background-image: radial-gradient(circle, #32A828 12%, #32A927 93%);

 

HEX #32A927 to HEX #32A828


CSS-Code:

background-image: linear-gradient(135deg, #32A927 8%, #32A828 89%);

 

HEX #32A927 to HEX #32A828


CSS-Code:

background-image: radial-gradient(circle, #32A927 14%, #32A828 86%);

 

HEX #32A828 to HEX #27A93F


CSS-Code:

background-image: linear-gradient(135deg, #32A828 13%, #27A93F 86%);

 

HEX #32A828 to HEX #27A93F


CSS-Code:

background-image: radial-gradient(circle, #32A828 9%, #27A93F 92%);

 

HEX #27A93F to HEX #32A828


CSS-Code:

background-image: linear-gradient(135deg, #27A93F 7%, #32A828 97%);

 

HEX #27A93F to HEX #32A828


CSS-Code:

background-image: radial-gradient(circle, #27A93F 10%, #32A828 92%);

 

HEX #32A828 to HEX #27A962


CSS-Code:

background-image: linear-gradient(135deg, #32A828 12%, #27A962 95%);

 

HEX #32A828 to HEX #27A962


CSS-Code:

background-image: radial-gradient(circle, #32A828 8%, #27A962 100%);

 

HEX #27A962 to HEX #32A828


CSS-Code:

background-image: linear-gradient(135deg, #27A962 13%, #32A828 95%);

 

HEX #27A962 to HEX #32A828


CSS-Code:

background-image: radial-gradient(circle, #27A962 0%, #32A828 98%);

Lineal

HEX #32A828 to HEX #28871F


CSS-Code:

background-image: linear-gradient(135deg, #32A828 4%, #28871F 91%);

Radial

HEX #32A828 to HEX #28871F


CSS-Code:

background-image: radial-gradient(circle, #32A828 13%, #28871F 95%);

 

HEX #28871F to HEX #32A828


CSS-Code:

background-image: linear-gradient(135deg, #28871F 0%, #32A828 94%);

 

HEX #28871F to HEX #32A828


CSS-Code:

background-image: radial-gradient(circle, #28871F 11%, #32A828 98%);

 

HEX #32A828 to HEX #31A927


CSS-Code:

background-image: linear-gradient(135deg, #32A828 7%, #31A927 91%);

 

HEX #32A828 to HEX #31A927


CSS-Code:

background-image: radial-gradient(circle, #32A828 0%, #31A927 89%);

 

HEX #31A927 to HEX #32A828


CSS-Code:

background-image: linear-gradient(135deg, #31A927 4%, #32A828 93%);

 

HEX #31A927 to HEX #32A828


CSS-Code:

background-image: radial-gradient(circle, #31A927 13%, #32A828 94%);

 

HEX #32A828 to HEX #3BCA2F


CSS-Code:

background-image: linear-gradient(135deg, #32A828 2%, #3BCA2F 92%);

 

HEX #32A828 to HEX #3BCA2F


CSS-Code:

background-image: radial-gradient(circle, #32A828 12%, #3BCA2F 93%);

 

HEX #3BCA2F to HEX #32A828


CSS-Code:

background-image: linear-gradient(135deg, #3BCA2F 3%, #32A828 99%);

 

HEX #3BCA2F to HEX #32A828


CSS-Code:

background-image: radial-gradient(circle, #3BCA2F 12%, #32A828 89%);

 

HEX #32A828 to HEX #58D54E


CSS-Code:

background-image: linear-gradient(135deg, #32A828 1%, #58D54E 86%);

 

HEX #32A828 to HEX #58D54E


CSS-Code:

background-image: radial-gradient(circle, #32A828 4%, #58D54E 100%);

 

HEX #58D54E to HEX #32A828


CSS-Code:

background-image: linear-gradient(135deg, #58D54E 2%, #32A828 99%);

 

HEX #58D54E to HEX #32A828


CSS-Code:

background-image: radial-gradient(circle, #58D54E 4%, #32A828 88%);

Lineal

HEX #32A828 to HEX #279AA9


CSS-Code:

background-image: linear-gradient(135deg, #32A828 7%, #279AA9 92%);

Radial

HEX #32A828 to HEX #279AA9


CSS-Code:

background-image: radial-gradient(circle, #32A828 1%, #279AA9 93%);

 

HEX #279AA9 to HEX #32A828


CSS-Code:

background-image: linear-gradient(135deg, #279AA9 1%, #32A828 98%);

 

HEX #279AA9 to HEX #32A828


CSS-Code:

background-image: radial-gradient(circle, #279AA9 14%, #32A828 92%);

 

HEX #32A828 to HEX #A92766


CSS-Code:

background-image: linear-gradient(135deg, #32A828 4%, #A92766 100%);

 

HEX #32A828 to HEX #A92766


CSS-Code:

background-image: radial-gradient(circle, #32A828 10%, #A92766 89%);

 

HEX #A92766 to HEX #32A828


CSS-Code:

background-image: linear-gradient(135deg, #A92766 9%, #32A828 88%);

 

HEX #A92766 to HEX #32A828


CSS-Code:

background-image: radial-gradient(circle, #A92766 0%, #32A828 96%);

Lineal

HEX #32A828 to HEX #2732A9


CSS-Code:

background-image: linear-gradient(135deg, #32A828 2%, #2732A9 95%);

Radial

HEX #32A828 to HEX #2732A9


CSS-Code:

background-image: radial-gradient(circle, #32A828 3%, #2732A9 89%);

 

HEX #2732A9 to HEX #32A828


CSS-Code:

background-image: linear-gradient(135deg, #2732A9 13%, #32A828 89%);

 

HEX #2732A9 to HEX #32A828


CSS-Code:

background-image: radial-gradient(circle, #2732A9 2%, #32A828 100%);

 

HEX #32A828 to HEX #A92732


CSS-Code:

background-image: linear-gradient(135deg, #32A828 5%, #A92732 92%);

 

HEX #32A828 to HEX #A92732


CSS-Code:

background-image: radial-gradient(circle, #32A828 14%, #A92732 87%);

 

HEX #A92732 to HEX #32A828


CSS-Code:

background-image: linear-gradient(135deg, #A92732 11%, #32A828 93%);

 

HEX #A92732 to HEX #32A828


CSS-Code:

background-image: radial-gradient(circle, #A92732 9%, #32A828 99%);

Lineal

HEX #32A828 to HEX #279AA9


CSS-Code:

background-image: linear-gradient(135deg, #32A828 8%, #279AA9 92%);

Radial

HEX #32A828 to HEX #279AA9


CSS-Code:

background-image: radial-gradient(circle, #32A828 3%, #279AA9 99%);

 

HEX #279AA9 to HEX #32A828


CSS-Code:

background-image: linear-gradient(135deg, #279AA9 13%, #32A828 97%);

 

HEX #279AA9 to HEX #32A828


CSS-Code:

background-image: radial-gradient(circle, #279AA9 9%, #32A828 99%);

 

HEX #32A828 to HEX #9E27A9


CSS-Code:

background-image: linear-gradient(135deg, #32A828 7%, #9E27A9 98%);

 

HEX #32A828 to HEX #9E27A9


CSS-Code:

background-image: radial-gradient(circle, #32A828 12%, #9E27A9 98%);

 

HEX #9E27A9 to HEX #32A828


CSS-Code:

background-image: linear-gradient(135deg, #9E27A9 1%, #32A828 93%);

 

HEX #9E27A9 to HEX #32A828


CSS-Code:

background-image: radial-gradient(circle, #9E27A9 1%, #32A828 89%);

 

HEX #32A828 to HEX #A93627


CSS-Code:

background-image: linear-gradient(135deg, #32A828 5%, #A93627 92%);

 

HEX #32A828 to HEX #A93627


CSS-Code:

background-image: radial-gradient(circle, #32A828 13%, #A93627 89%);

 

HEX #A93627 to HEX #32A828


CSS-Code:

background-image: linear-gradient(135deg, #A93627 13%, #32A828 97%);

 

HEX #A93627 to HEX #32A828


CSS-Code:

background-image: radial-gradient(circle, #A93627 1%, #32A828 100%);

Lineal

HEX #32A828 to HEX #2773A9


CSS-Code:

background-image: linear-gradient(135deg, #32A828 1%, #2773A9 87%);

Radial

HEX #32A828 to HEX #2773A9


CSS-Code:

background-image: radial-gradient(circle, #32A828 14%, #2773A9 93%);

 

HEX #2773A9 to HEX #32A828


CSS-Code:

background-image: linear-gradient(135deg, #2773A9 6%, #32A828 89%);

 

HEX #2773A9 to HEX #32A828


CSS-Code:

background-image: radial-gradient(circle, #2773A9 12%, #32A828 95%);

 

HEX #32A828 to HEX #9E27A9


CSS-Code:

background-image: linear-gradient(135deg, #32A828 2%, #9E27A9 98%);

 

HEX #32A828 to HEX #9E27A9


CSS-Code:

background-image: radial-gradient(circle, #32A828 6%, #9E27A9 93%);

 

HEX #9E27A9 to HEX #32A828


CSS-Code:

background-image: linear-gradient(135deg, #9E27A9 1%, #32A828 89%);

 

HEX #9E27A9 to HEX #32A828


CSS-Code:

background-image: radial-gradient(circle, #9E27A9 3%, #32A828 86%);

 

HEX #32A828 to HEX #A95D27


CSS-Code:

background-image: linear-gradient(135deg, #32A828 7%, #A95D27 97%);

 

HEX #32A828 to HEX #A95D27


CSS-Code:

background-image: radial-gradient(circle, #32A828 2%, #A95D27 86%);

 

HEX #A95D27 to HEX #32A828


CSS-Code:

background-image: linear-gradient(135deg, #A95D27 12%, #32A828 88%);

 

HEX #A95D27 to HEX #32A828


CSS-Code:

background-image: radial-gradient(circle, #A95D27 12%, #32A828 98%);

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

Icons

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)

nsc-logo
Icons

CMYK to HEX

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

CMYK to RGB

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

CMYK to RAL®

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

CMYK to HKS®

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

CMYK to PANTONE®

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

CMYK to Sherwin Williams®

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

CMYK to NCS®

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

nsc-logo

HEX to RGB

convert from #RRGGBB to RGB red green blue

HEX to CMYK

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

Icons

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)

nsc-logo

RAL® to RGB

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

RAL® to CMYK

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

Icons

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)

nsc-logo

HKS® to RGB

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

HKS® to CMYK

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

Icons

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)

nsc-logo

PANTONE® to RGB

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

PANTONE® to CMYK

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

Icons

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)

nsc-logo

Sherwin Williams® to RGB

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

Sherwin Williams® to CMYK

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

Icons

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)

nsc-logo
nsc-logo

NCS® to RGB

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

NCS® to CMYK

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

Icons
nsc-logo

NCS® to HEX

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

NCS® to RAL®

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

NCS® to HKS®

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

NCS® to PANTONE®

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

NCS® to Sherwin Williams®

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

Codes

To be able to save color palettes, you must be logged in.

Sign in to your account

or

Create an account

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

Cancel Share

Color palette shared
Please copy and save the link you want.

Share

OK, I have copied the links

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

Show color palette
Close

Create a color palette

DownloadDownload in different formats

Remove All

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

© 2019-2025 in cooperation ND-DESIGN.WORKS & frag-bobby.de