#GOOGLE COLOR CONVERTER CODE#
We are checking if the input code is valid and expanding it if it’s shorthand.This event is triggered each time a key is released. Finally, we are returning the resulting array by joining it and converting it to uppercase.įinally, we are going to use all the above functions by adding Event Listeners.įirst, we are adding a keyup event to the hex input. To keep this tutorial simple, I have not transpiled it to ES5.ģ.
Note: padStart is an ES8 feature, which might not be supported in every browser. But hex color code needs 2 characters for each part, so padding is required, which makes it ‘0e’. Padding is necessary, if you have something like ‘14’, which you want to convert to hexadecimal, it will return ‘e’. Now, toString method is applicable to only numeric data types, so we use parseInt to first convert every element of the array to a number, then use toString(16) to convert it to hexadecimal form and then finally add padding to make it exactly 2 characters long. To convert it to Base 16, we have to use the toString method, with a parameter of ‘16’. When we use regex to match the parts inside the parentheses, we return data of type ‘string’. Next, we are using a map function to return a new array, which converts the number to base 16, then pads the value.We are directly using a regex to extract the parts inside the parenthesis - that is, rgb(123,21,24) will return 123,21,24.Finally, we are returning the output string.įor the rgbToHex function (this is written with shorter logic):.So in the function, we are slicing the hex value, converting it to base 10 using parseInt, and then storing it in the defined array. For Example in #aabbcc, red is (aa to base 10), green is (bb to base 10) and blue is (cc to base 10). Every two characters in the hex code represent a value in the rgb color code. In a very basic way, hex to rgb works by converting the hex code (in base 16) to rgb code (in base 10).Replace the ‘#’ symbol, if it exists, and if the length is not equal to 6 (that is, the shorthand version), call the above modifyHex function and expand it.
0 kommentar(er)
