close all
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.
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.
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.
Bright color: high color values create a bright impression.
The breakdown of the color into the RGB color system: of 255 maximum color components, 220 red, 220 green and 173 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, none cyan, none magenta, 17 yellow and 11 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.
Provide designers and agencies with accurate color values.
Lineal
HEX #DCDCADCE to HEX #232352CE
CSS-Code:
background-image: linear-gradient(135deg, #DCDCADCE 5%, #232352CE 86%);
Radial
HEX #DCDCADCE to HEX #232352CE
CSS-Code:
background-image: radial-gradient(circle, #DCDCADCE 2%, #232352CE 91%);
HEX #232352CE to HEX #DCDCADCE
CSS-Code:
background-image: linear-gradient(135deg, #232352CE 11%, #DCDCADCE 94%);
HEX #232352CE to HEX #DCDCADCE
CSS-Code:
background-image: radial-gradient(circle, #232352CE 8%, #DCDCADCE 90%);
Lineal
HEX #DCDCADCE to HEX #DCCFADCE
CSS-Code:
background-image: linear-gradient(135deg, #DCDCADCE 4%, #DCCFADCE 91%);
Radial
HEX #DCDCADCE to HEX #DCCFADCE
CSS-Code:
background-image: radial-gradient(circle, #DCDCADCE 4%, #DCCFADCE 96%);
HEX #DCCFADCE to HEX #DCDCADCE
CSS-Code:
background-image: linear-gradient(135deg, #DCCFADCE 0%, #DCDCADCE 95%);
HEX #DCCFADCE to HEX #DCDCADCE
CSS-Code:
background-image: radial-gradient(circle, #DCCFADCE 10%, #DCDCADCE 92%);
HEX #DCDCADCE to HEX #CFDCADCE
CSS-Code:
background-image: linear-gradient(135deg, #DCDCADCE 14%, #CFDCADCE 94%);
HEX #DCDCADCE to HEX #CFDCADCE
CSS-Code:
background-image: radial-gradient(circle, #DCDCADCE 11%, #CFDCADCE 89%);
HEX #CFDCADCE to HEX #DCDCADCE
CSS-Code:
background-image: linear-gradient(135deg, #CFDCADCE 5%, #DCDCADCE 86%);
HEX #CFDCADCE to HEX #DCDCADCE
CSS-Code:
background-image: radial-gradient(circle, #CFDCADCE 0%, #DCDCADCE 99%);
HEX #DCDCADCE to HEX #C3DCADCE
CSS-Code:
background-image: linear-gradient(135deg, #DCDCADCE 11%, #C3DCADCE 88%);
HEX #DCDCADCE to HEX #C3DCADCE
CSS-Code:
background-image: radial-gradient(circle, #DCDCADCE 3%, #C3DCADCE 94%);
HEX #C3DCADCE to HEX #DCDCADCE
CSS-Code:
background-image: linear-gradient(135deg, #C3DCADCE 7%, #DCDCADCE 88%);
HEX #C3DCADCE to HEX #DCDCADCE
CSS-Code:
background-image: radial-gradient(circle, #C3DCADCE 7%, #DCDCADCE 87%);
Lineal
CSS-Code:
background-image: linear-gradient(135deg, #DCDCADCE 3%, #CFCF90 91%);
Radial
CSS-Code:
background-image: radial-gradient(circle, #DCDCADCE 5%, #CFCF90 89%);
CSS-Code:
background-image: linear-gradient(135deg, #CFCF90 2%, #DCDCADCE 86%);
CSS-Code:
background-image: radial-gradient(circle, #CFCF90 14%, #DCDCADCE 96%);
CSS-Code:
background-image: linear-gradient(135deg, #DCDCADCE 11%, #DCDCAD 94%);
CSS-Code:
background-image: radial-gradient(circle, #DCDCADCE 12%, #DCDCAD 95%);
CSS-Code:
background-image: linear-gradient(135deg, #DCDCAD 0%, #DCDCADCE 96%);
CSS-Code:
background-image: radial-gradient(circle, #DCDCAD 12%, #DCDCADCE 88%);
CSS-Code:
background-image: linear-gradient(135deg, #DCDCADCE 1%, #E8E8CA 91%);
CSS-Code:
background-image: radial-gradient(circle, #DCDCADCE 4%, #E8E8CA 92%);
CSS-Code:
background-image: linear-gradient(135deg, #E8E8CA 3%, #DCDCADCE 91%);
CSS-Code:
background-image: radial-gradient(circle, #E8E8CA 10%, #DCDCADCE 90%);
CSS-Code:
background-image: linear-gradient(135deg, #DCDCADCE 1%, #F5F5E7 92%);
CSS-Code:
background-image: radial-gradient(circle, #DCDCADCE 11%, #F5F5E7 93%);
CSS-Code:
background-image: linear-gradient(135deg, #F5F5E7 1%, #DCDCADCE 86%);
CSS-Code:
background-image: radial-gradient(circle, #F5F5E7 5%, #DCDCADCE 90%);
Lineal
HEX #DCDCADCE to HEX #DCCFADCE
CSS-Code:
background-image: linear-gradient(135deg, #DCDCADCE 13%, #DCCFADCE 86%);
Radial
HEX #DCDCADCE to HEX #DCCFADCE
CSS-Code:
background-image: radial-gradient(circle, #DCDCADCE 8%, #DCCFADCE 93%);
HEX #DCCFADCE to HEX #DCDCADCE
CSS-Code:
background-image: linear-gradient(135deg, #DCCFADCE 6%, #DCDCADCE 95%);
HEX #DCCFADCE to HEX #DCDCADCE
CSS-Code:
background-image: radial-gradient(circle, #DCCFADCE 5%, #DCDCADCE 95%);
HEX #DCDCADCE to HEX #CFDCADCE
CSS-Code:
background-image: linear-gradient(135deg, #DCDCADCE 13%, #CFDCADCE 97%);
HEX #DCDCADCE to HEX #CFDCADCE
CSS-Code:
background-image: radial-gradient(circle, #DCDCADCE 5%, #CFDCADCE 98%);
HEX #CFDCADCE to HEX #DCDCADCE
CSS-Code:
background-image: linear-gradient(135deg, #CFDCADCE 7%, #DCDCADCE 86%);
HEX #CFDCADCE to HEX #DCDCADCE
CSS-Code:
background-image: radial-gradient(circle, #CFDCADCE 14%, #DCDCADCE 97%);
HEX #DCDCADCE to HEX #C3DCADCE
CSS-Code:
background-image: linear-gradient(135deg, #DCDCADCE 14%, #C3DCADCE 87%);
HEX #DCDCADCE to HEX #C3DCADCE
CSS-Code:
background-image: radial-gradient(circle, #DCDCADCE 2%, #C3DCADCE 97%);
HEX #C3DCADCE to HEX #DCDCADCE
CSS-Code:
background-image: linear-gradient(135deg, #C3DCADCE 0%, #DCDCADCE 95%);
HEX #C3DCADCE to HEX #DCDCADCE
CSS-Code:
background-image: radial-gradient(circle, #C3DCADCE 7%, #DCDCADCE 92%);
Lineal
CSS-Code:
background-image: linear-gradient(135deg, #DCDCADCE 3%, #CFCF90 99%);
Radial
CSS-Code:
background-image: radial-gradient(circle, #DCDCADCE 0%, #CFCF90 89%);
CSS-Code:
background-image: linear-gradient(135deg, #CFCF90 7%, #DCDCADCE 86%);
CSS-Code:
background-image: radial-gradient(circle, #CFCF90 10%, #DCDCADCE 89%);
CSS-Code:
background-image: linear-gradient(135deg, #DCDCADCE 6%, #DCDCAD 88%);
CSS-Code:
background-image: radial-gradient(circle, #DCDCADCE 1%, #DCDCAD 93%);
CSS-Code:
background-image: linear-gradient(135deg, #DCDCAD 2%, #DCDCADCE 95%);
CSS-Code:
background-image: radial-gradient(circle, #DCDCAD 9%, #DCDCADCE 89%);
CSS-Code:
background-image: linear-gradient(135deg, #DCDCADCE 3%, #E8E8CA 97%);
CSS-Code:
background-image: radial-gradient(circle, #DCDCADCE 0%, #E8E8CA 97%);
CSS-Code:
background-image: linear-gradient(135deg, #E8E8CA 11%, #DCDCADCE 97%);
CSS-Code:
background-image: radial-gradient(circle, #E8E8CA 10%, #DCDCADCE 86%);
CSS-Code:
background-image: linear-gradient(135deg, #DCDCADCE 4%, #F5F5E7 94%);
CSS-Code:
background-image: radial-gradient(circle, #DCDCADCE 5%, #F5F5E7 97%);
CSS-Code:
background-image: linear-gradient(135deg, #F5F5E7 0%, #DCDCADCE 86%);
CSS-Code:
background-image: radial-gradient(circle, #F5F5E7 9%, #DCDCADCE 87%);
Lineal
CSS-Code:
background-image: linear-gradient(135deg, #DCDCADCE 13%, #ADDCB6 97%);
Radial
CSS-Code:
background-image: radial-gradient(circle, #DCDCADCE 3%, #ADDCB6 98%);
CSS-Code:
background-image: linear-gradient(135deg, #ADDCB6 8%, #DCDCADCE 94%);
CSS-Code:
background-image: radial-gradient(circle, #ADDCB6 13%, #DCDCADCE 97%);
CSS-Code:
background-image: linear-gradient(135deg, #DCDCADCE 13%, #C9ADDC 92%);
CSS-Code:
background-image: radial-gradient(circle, #DCDCADCE 8%, #C9ADDC 91%);
CSS-Code:
background-image: linear-gradient(135deg, #C9ADDC 5%, #DCDCADCE 87%);
CSS-Code:
background-image: radial-gradient(circle, #C9ADDC 11%, #DCDCADCE 86%);
Lineal
CSS-Code:
background-image: linear-gradient(135deg, #DCDCADCE 13%, #ADDCDC 98%);
Radial
CSS-Code:
background-image: radial-gradient(circle, #DCDCADCE 0%, #ADDCDC 96%);
CSS-Code:
background-image: linear-gradient(135deg, #ADDCDC 6%, #DCDCADCE 95%);
CSS-Code:
background-image: radial-gradient(circle, #ADDCDC 13%, #DCDCADCE 98%);
CSS-Code:
background-image: linear-gradient(135deg, #DCDCADCE 0%, #DCADDC 93%);
CSS-Code:
background-image: radial-gradient(circle, #DCDCADCE 3%, #DCADDC 94%);
CSS-Code:
background-image: linear-gradient(135deg, #DCADDC 14%, #DCDCADCE 97%);
CSS-Code:
background-image: radial-gradient(circle, #DCADDC 5%, #DCDCADCE 91%);
Lineal
CSS-Code:
background-image: linear-gradient(135deg, #DCDCADCE 13%, #ADDCB6 87%);
Radial
CSS-Code:
background-image: radial-gradient(circle, #DCDCADCE 6%, #ADDCB6 98%);
CSS-Code:
background-image: linear-gradient(135deg, #ADDCB6 9%, #DCDCADCE 96%);
CSS-Code:
background-image: radial-gradient(circle, #ADDCB6 3%, #DCDCADCE 100%);
CSS-Code:
background-image: linear-gradient(135deg, #DCDCADCE 13%, #ADADDC 90%);
CSS-Code:
background-image: radial-gradient(circle, #DCDCADCE 2%, #ADADDC 98%);
CSS-Code:
background-image: linear-gradient(135deg, #ADADDC 10%, #DCDCADCE 91%);
CSS-Code:
background-image: radial-gradient(circle, #ADADDC 13%, #DCDCADCE 89%);
CSS-Code:
background-image: linear-gradient(135deg, #DCDCADCE 4%, #DCADD2 94%);
CSS-Code:
background-image: radial-gradient(circle, #DCDCADCE 9%, #DCADD2 93%);
CSS-Code:
background-image: linear-gradient(135deg, #DCADD2 2%, #DCDCADCE 91%);
CSS-Code:
background-image: radial-gradient(circle, #DCADD2 11%, #DCDCADCE 92%);
Lineal
CSS-Code:
background-image: linear-gradient(135deg, #DCDCADCE 2%, #ADDCC4 89%);
Radial
CSS-Code:
background-image: radial-gradient(circle, #DCDCADCE 1%, #ADDCC4 99%);
CSS-Code:
background-image: linear-gradient(135deg, #ADDCC4 8%, #DCDCADCE 100%);
CSS-Code:
background-image: radial-gradient(circle, #ADDCC4 9%, #DCDCADCE 89%);
CSS-Code:
background-image: linear-gradient(135deg, #DCDCADCE 14%, #ADADDC 94%);
CSS-Code:
background-image: radial-gradient(circle, #DCDCADCE 12%, #ADADDC 99%);
CSS-Code:
background-image: linear-gradient(135deg, #ADADDC 10%, #DCDCADCE 98%);
CSS-Code:
background-image: radial-gradient(circle, #ADADDC 13%, #DCDCADCE 91%);
CSS-Code:
background-image: linear-gradient(135deg, #DCDCADCE 7%, #DCADC4 93%);
CSS-Code:
background-image: radial-gradient(circle, #DCDCADCE 14%, #DCADC4 92%);
CSS-Code:
background-image: linear-gradient(135deg, #DCADC4 0%, #DCDCADCE 99%);
CSS-Code:
background-image: radial-gradient(circle, #DCADC4 10%, #DCDCADCE 86%);
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)