9/5/2023 0 Comments 8 digit color code generator![]() You can find the complete code on my GitHub repository. We've successfully built a random hex color generator using HTML, CSS and a few lines of JavaScript. Then the cycle repeats itself until the 6th round is over at which time a full 6-digit hex code will have been generated.Īll that's left is to set the textContent of the span tag and the background color of the page to be the value of hex. I can now access the hexValues array item in the position corresponding to the generated index number using bracket notation, then add it to the end of the hex variable i.e hex += hexValues. The random whole number generated is appended to a new variable index. This makes sure that any number generated is a valid hexValues index. It basically rounds it down to the nearest whole number. So what do we do if we want a whole number larger than 1? We multiply it by the number we want (in this case, the length of the hexValues array) and wrap it within the Math.floor() function which returns the largest integer less than or equal to a given number. Now, the Math.random() function picks a random number between 0 and 1 (not including 1) and returns a decimal but we don't want decimals. Then it loops over the hexValues array 6 times and each time generates a random number using Math.random(). Try changing some values in the hex codes to see how it updates the color.Enter fullscreen mode Exit fullscreen modeĮvery time the button is clicked, the changeHex function is called which creates a variable hex and sets its value to #. Here's a working example of using four-digit hex notation to define colors for a web page. If the examples on this page display no color, it's likely your browser doesn't support this method of specifying colors. Web Page ExampleĪt the time of writing, four-digit hex notation is merely a proposal of the latest CSS spec (CSS Color Module Level 4).īrowser support is limited to non-existent at the time of writing. You can also use the rgba() function to provide the decimal equivalent of a transparent color using the RGBA values.įor example, #FFA500CC (slightly transparent orange) could be written as rgba(255,165,0,0.8). It simply represnets the red, green, and blue components. You can use a three-digit shorthand, but this doesn't allow for an alpha channel. ![]() For example, #FF1493EC could become something like #F19E or #F29C or similar if you're not fussy about the precise color. However, you can always round digits up or down in order to create a shorthand code. It's either four characters (for the shorthand), or eight characters (for the longhand). And you can't have a five character shorthand code. Likewise, you can't turn #FFCC9155 into shorthand either, because the green component uses different values. You can't dedupe those, as they are unique values. In this case, the red component uses FC, the green component uses 04, the blue component uses 56, and the alpha channel uses 06. So you couldn't turn #FC045606 into shorthand because each of the RGB components uses a different value. Note that you can only use the shorthand method when both values are the same for each of the RGB components. We've converted FF to F, CC to C, 00 to 0, and CC to C.īoth of the values in this example result in the same color. See how we've just deduped the duplicate characters from each color component.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |