qConv Start
The free starting point for all essential color tools.
- 3 saved palettes
- 5 colors per palette
- 5 image uploads daily
- 3 saved images
- 5 colors per image group
- 50 conversions monthly
CSS Gradients:
#50BFBC
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
Bright color: high color values create a bright impression.
The breakdown of the color into the RGB color system: of 255 maximum color components, 80 red, 191 green and 188 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, 58 cyan, none magenta, 2 yellow and 25 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.
2-color gradients of #50BFBC - Complementary color
Lineal
CSS-Code:
background-image: linear-gradient(135deg, #50BFBC 8%, #AF4043 89%);
Radial
CSS-Code:
background-image: radial-gradient(circle, #50BFBC 0%, #AF4043 92%);
CSS-Code:
background-image: linear-gradient(135deg, #AF4043 3%, #50BFBC 98%);
CSS-Code:
background-image: radial-gradient(circle, #AF4043 13%, #50BFBC 98%);
2-color gradients of #50BFBC - Lighter colors
Lineal
CSS-Code:
background-image: linear-gradient(135deg, #50BFBC 8%, #50BE9D 86%);
Radial
CSS-Code:
background-image: radial-gradient(circle, #50BFBC 10%, #50BE9D 97%);
CSS-Code:
background-image: linear-gradient(135deg, #50BE9D 0%, #50BFBC 92%);
CSS-Code:
background-image: radial-gradient(circle, #50BE9D 3%, #50BFBC 86%);
CSS-Code:
background-image: linear-gradient(135deg, #50BFBC 2%, #50BEBB 89%);
CSS-Code:
background-image: radial-gradient(circle, #50BFBC 12%, #50BEBB 96%);
CSS-Code:
background-image: linear-gradient(135deg, #50BEBB 9%, #50BFBC 91%);
CSS-Code:
background-image: radial-gradient(circle, #50BEBB 4%, #50BFBC 99%);
CSS-Code:
background-image: linear-gradient(135deg, #50BFBC 0%, #50A5BE 96%);
CSS-Code:
background-image: radial-gradient(circle, #50BFBC 4%, #50A5BE 86%);
CSS-Code:
background-image: linear-gradient(135deg, #50A5BE 10%, #50BFBC 88%);
CSS-Code:
background-image: radial-gradient(circle, #50A5BE 3%, #50BFBC 90%);
CSS-Code:
background-image: linear-gradient(135deg, #50BFBC 8%, #5087BE 95%);
CSS-Code:
background-image: radial-gradient(circle, #50BFBC 4%, #5087BE 90%);
CSS-Code:
background-image: linear-gradient(135deg, #5087BE 12%, #50BFBC 92%);
CSS-Code:
background-image: radial-gradient(circle, #5087BE 12%, #50BFBC 87%);
2-color gradients of #50BFBC - Darker colors
Lineal
CSS-Code:
background-image: linear-gradient(135deg, #50BFBC 2%, #3EA7A4 94%);
Radial
CSS-Code:
background-image: radial-gradient(circle, #50BFBC 5%, #3EA7A4 87%);
CSS-Code:
background-image: linear-gradient(135deg, #3EA7A4 11%, #50BFBC 86%);
CSS-Code:
background-image: radial-gradient(circle, #3EA7A4 3%, #50BFBC 97%);
CSS-Code:
background-image: linear-gradient(135deg, #50BFBC 13%, #50BEBB 100%);
CSS-Code:
background-image: radial-gradient(circle, #50BFBC 7%, #50BEBB 95%);
CSS-Code:
background-image: linear-gradient(135deg, #50BEBB 10%, #50BFBC 98%);
CSS-Code:
background-image: radial-gradient(circle, #50BEBB 5%, #50BFBC 86%);
CSS-Code:
background-image: linear-gradient(135deg, #50BFBC 7%, #6EC9C7 92%);
CSS-Code:
background-image: radial-gradient(circle, #50BFBC 12%, #6EC9C7 98%);
CSS-Code:
background-image: linear-gradient(135deg, #6EC9C7 6%, #50BFBC 98%);
CSS-Code:
background-image: radial-gradient(circle, #6EC9C7 6%, #50BFBC 96%);
CSS-Code:
background-image: linear-gradient(135deg, #50BFBC 14%, #8CD5D3 93%);
CSS-Code:
background-image: radial-gradient(circle, #50BFBC 11%, #8CD5D3 91%);
CSS-Code:
background-image: linear-gradient(135deg, #8CD5D3 5%, #50BFBC 97%);
CSS-Code:
background-image: radial-gradient(circle, #8CD5D3 3%, #50BFBC 86%);
2-color gradients of #50BFBC - Analogue colors
Lineal
CSS-Code:
background-image: linear-gradient(135deg, #50BFBC 13%, #50BE9D 87%);
Radial
CSS-Code:
background-image: radial-gradient(circle, #50BFBC 12%, #50BE9D 94%);
CSS-Code:
background-image: linear-gradient(135deg, #50BE9D 12%, #50BFBC 87%);
CSS-Code:
background-image: radial-gradient(circle, #50BE9D 1%, #50BFBC 94%);
CSS-Code:
background-image: linear-gradient(135deg, #50BFBC 8%, #50BEBB 97%);
CSS-Code:
background-image: radial-gradient(circle, #50BFBC 9%, #50BEBB 99%);
CSS-Code:
background-image: linear-gradient(135deg, #50BEBB 7%, #50BFBC 95%);
CSS-Code:
background-image: radial-gradient(circle, #50BEBB 6%, #50BFBC 96%);
CSS-Code:
background-image: linear-gradient(135deg, #50BFBC 12%, #50A5BE 88%);
CSS-Code:
background-image: radial-gradient(circle, #50BFBC 2%, #50A5BE 87%);
CSS-Code:
background-image: linear-gradient(135deg, #50A5BE 11%, #50BFBC 100%);
CSS-Code:
background-image: radial-gradient(circle, #50A5BE 5%, #50BFBC 93%);
CSS-Code:
background-image: linear-gradient(135deg, #50BFBC 8%, #5087BE 99%);
CSS-Code:
background-image: radial-gradient(circle, #50BFBC 4%, #5087BE 100%);
CSS-Code:
background-image: linear-gradient(135deg, #5087BE 7%, #50BFBC 99%);
CSS-Code:
background-image: radial-gradient(circle, #5087BE 2%, #50BFBC 94%);
2-color gradients of #50BFBC - Monochromatic colors
Lineal
CSS-Code:
background-image: linear-gradient(135deg, #50BFBC 5%, #3EA7A4 100%);
Radial
CSS-Code:
background-image: radial-gradient(circle, #50BFBC 14%, #3EA7A4 99%);
CSS-Code:
background-image: linear-gradient(135deg, #3EA7A4 2%, #50BFBC 87%);
CSS-Code:
background-image: radial-gradient(circle, #3EA7A4 9%, #50BFBC 99%);
CSS-Code:
background-image: linear-gradient(135deg, #50BFBC 13%, #50BEBB 99%);
CSS-Code:
background-image: radial-gradient(circle, #50BFBC 6%, #50BEBB 96%);
CSS-Code:
background-image: linear-gradient(135deg, #50BEBB 6%, #50BFBC 92%);
CSS-Code:
background-image: radial-gradient(circle, #50BEBB 5%, #50BFBC 89%);
CSS-Code:
background-image: linear-gradient(135deg, #50BFBC 2%, #6EC9C7 92%);
CSS-Code:
background-image: radial-gradient(circle, #50BFBC 4%, #6EC9C7 97%);
CSS-Code:
background-image: linear-gradient(135deg, #6EC9C7 4%, #50BFBC 89%);
CSS-Code:
background-image: radial-gradient(circle, #6EC9C7 11%, #50BFBC 91%);
CSS-Code:
background-image: linear-gradient(135deg, #50BFBC 13%, #8CD5D3 99%);
CSS-Code:
background-image: radial-gradient(circle, #50BFBC 2%, #8CD5D3 99%);
CSS-Code:
background-image: linear-gradient(135deg, #8CD5D3 7%, #50BFBC 93%);
CSS-Code:
background-image: radial-gradient(circle, #8CD5D3 0%, #50BFBC 90%);
2-color gradients of #50BFBC - Partial complementary colors
Lineal
CSS-Code:
background-image: linear-gradient(135deg, #50BFBC 12%, #6250BE 92%);
Radial
CSS-Code:
background-image: radial-gradient(circle, #50BFBC 8%, #6250BE 98%);
CSS-Code:
background-image: linear-gradient(135deg, #6250BE 2%, #50BFBC 90%);
CSS-Code:
background-image: radial-gradient(circle, #6250BE 8%, #50BFBC 92%);
CSS-Code:
background-image: linear-gradient(135deg, #50BFBC 2%, #BE8F50 95%);
CSS-Code:
background-image: radial-gradient(circle, #50BFBC 4%, #BE8F50 94%);
CSS-Code:
background-image: linear-gradient(135deg, #BE8F50 9%, #50BFBC 100%);
CSS-Code:
background-image: radial-gradient(circle, #BE8F50 1%, #50BFBC 98%);
2-color gradients of #50BFBC - Triadic colors
Lineal
CSS-Code:
background-image: linear-gradient(135deg, #50BFBC 7%, #BB50BE 99%);
Radial
CSS-Code:
background-image: radial-gradient(circle, #50BFBC 14%, #BB50BE 87%);
CSS-Code:
background-image: linear-gradient(135deg, #BB50BE 2%, #50BFBC 94%);
CSS-Code:
background-image: radial-gradient(circle, #BB50BE 1%, #50BFBC 89%);
CSS-Code:
background-image: linear-gradient(135deg, #50BFBC 13%, #BEBB50 97%);
CSS-Code:
background-image: radial-gradient(circle, #50BFBC 1%, #BEBB50 91%);
CSS-Code:
background-image: linear-gradient(135deg, #BEBB50 9%, #50BFBC 86%);
CSS-Code:
background-image: radial-gradient(circle, #BEBB50 0%, #50BFBC 98%);
2-color gradients of #50BFBC - Rectangular (tetradic) colors
Lineal
CSS-Code:
background-image: linear-gradient(135deg, #50BFBC 13%, #6250BE 91%);
Radial
CSS-Code:
background-image: radial-gradient(circle, #50BFBC 11%, #6250BE 86%);
CSS-Code:
background-image: linear-gradient(135deg, #6250BE 5%, #50BFBC 91%);
CSS-Code:
background-image: radial-gradient(circle, #6250BE 9%, #50BFBC 93%);
CSS-Code:
background-image: linear-gradient(135deg, #50BFBC 0%, #BE5054 87%);
CSS-Code:
background-image: radial-gradient(circle, #50BFBC 11%, #BE5054 86%);
CSS-Code:
background-image: linear-gradient(135deg, #BE5054 1%, #50BFBC 87%);
CSS-Code:
background-image: radial-gradient(circle, #BE5054 10%, #50BFBC 98%);
CSS-Code:
background-image: linear-gradient(135deg, #50BFBC 8%, #ACBE50 90%);
CSS-Code:
background-image: radial-gradient(circle, #50BFBC 2%, #ACBE50 86%);
CSS-Code:
background-image: linear-gradient(135deg, #ACBE50 11%, #50BFBC 98%);
CSS-Code:
background-image: radial-gradient(circle, #ACBE50 3%, #50BFBC 96%);
2-color gradients of #50BFBC - Square colors
Lineal
CSS-Code:
background-image: linear-gradient(135deg, #50BFBC 9%, #8350BE 96%);
Radial
CSS-Code:
background-image: radial-gradient(circle, #50BFBC 4%, #8350BE 93%);
CSS-Code:
background-image: linear-gradient(135deg, #8350BE 10%, #50BFBC 100%);
CSS-Code:
background-image: radial-gradient(circle, #8350BE 1%, #50BFBC 91%);
CSS-Code:
background-image: linear-gradient(135deg, #50BFBC 3%, #BE5054 100%);
CSS-Code:
background-image: radial-gradient(circle, #50BFBC 4%, #BE5054 100%);
CSS-Code:
background-image: linear-gradient(135deg, #BE5054 1%, #50BFBC 93%);
CSS-Code:
background-image: radial-gradient(circle, #BE5054 2%, #50BFBC 92%);
CSS-Code:
background-image: linear-gradient(135deg, #50BFBC 0%, #8BBE50 91%);
CSS-Code:
background-image: radial-gradient(circle, #50BFBC 9%, #8BBE50 90%);
CSS-Code:
background-image: linear-gradient(135deg, #8BBE50 9%, #50BFBC 92%);
CSS-Code:
background-image: radial-gradient(circle, #8BBE50 5%, #50BFBC 96%);
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