So your goal is to get from FF 00 00 (red only, no green or blue) to FF FF 00 (red mixed with green, which is yellow), and finally to 00 FF 00. They have six digits, where the first two show the amount of red in the color, the middle two show the amount of green, and the last two show the amount of blue.Īnd unlike human counting where when we get from 0 to 9 we move to the next place value and get 10, with hexidecimal we count all the way up to F. See, the cryptic hexidecimal codes are actually not at all cryptic. In fact, the smoothest transition you can get is to simply increment the amount of green in the color and decrement the amount of red. Looking at any chart will give the illusion that "color codes" are individual values that you must lookup. This yielded a much smoother gradient as I changed the value, and changing inputValue by a certain seemed to affect the color to more or less the same degree regardless of the starting point. Return "#" + intToHex(redValue) + intToHex(greenValue) + "00" anti-gradient_100 value Scalar value between 0 and 1 Below is an example going in steps of 11 hex ( 17 in decimal): FF0000 <- red
So now how does one make a gradient transitioning from red to yellow to green? Easy you take the end points, decide how many steps you want in between, and then evenly step through each of the 3 color channels to transition from one color to the next color. If you convert the hex numbers to decimal, you'll get a value in between 0 and 255. Similarly, pure green is 00FF00 and pure blue is 0000FF. FF0000 looks red because the red component is dialed all the way up to FF and the green and blue are dialed all the way down to 00. So for example in the color FF0000, the red component is FF, the green component is 00 and the blue component is 00. The hex color codes are triplets representing the red, green and blue components of the color respectively.
Once you grasp this, it will become clear how to make gradients of arbitrary smoothness. conic gradients, generated with the conic-gradient() function, and which transition colors progressively around a circle.The best way to do this is to understand what the hex color codes actually mean. repeating gradients, generated with the repeating-linear-gradient() and repeating-radial-gradient() functions, and which are fixed sized linear or radial gradients repeated as much as needed to fill the entire box. The more away from an origin a point is, the more far from the original color it is. radial gradients, generated by the radial-gradient() function. linear gradients, generated by the linear-gradient() function, where the color smoothly fades along an imaginary line. Its concrete size will match the one of the element it applies to. A CSS gradient is not a CSS but an image with no intrinsic dimensions that is, it has no natural or preferred size, nor a preferred ratio. The CSS data type denotes a CSS made of a progressive transition between two or more colors. Conic Gradients (rotated around a center point) Radial Gradients (defined by their center)
Linear Gradients (direction down/up/left/right/diagonally) In addition, elements with gradients look better when zoomed, because the gradient is generated by the browser.
However, by using CSS3 gradients you can reduce download time and bandwidth usage. CSS3 gradients let you display smooth transitions between two or more specified colors.Įarlier, you had to use images for these effects.