You can see the live preview of the stand-alone version at CodePen here.
#COLOR GENERATOR WITH HEX CODE CODE#
one for displaying the generated hex color as the actual color and also in text format: randomHexColors()Ĭomplete Code For The Stand-alone Version.one for generating a hex code randomly: hexCode().Embedded version: randomHexColors(element).The only difference is, randomHexColors() function was made as parameterized in the second version. And make sure there is no background-color added in CSS for the element.īoth versions use JavaScript code in the same way. Make sure your element is not empty or it has some assigned width and height, otherwise it won't be visible.Įnter fullscreen mode Exit fullscreen mode In the second version, before adding the JavaScript code, apply the following changes to any HTML element which wants a background-color in your web project. The stand-alone version of the project has elements to display generated color and its hex code in text format. Second version: was developed to use as an embedded code snippet to generate matching colors randomly for an element of another web project.First version: was developed as a stand-alone tool to generate random hex colors.On the other hand, you can use this tool in real projects to speed up the color choosing process.įor simplicity, I developed this project idea in two versions.
For a JavaScript beginner, it is a good project where to practice JavaScript Math.random() function. If you have basic HTML, CSS, and JavaScript knowledge, you can create this project within a few minutes. It generates hex color code as an actual color and also in text format randomly. With the help of Random Hex Color Generator, it can be done in a little easier way. Return '#' + ('000000' + rgb.toString(16)).Choosing matching colors when creating a web page is crucial as same as choosing clothes to wear. Return min + Math.random() * (max - min) color_generator = () => an array of HSV colors (each HSV color The technical reason is very boring, so I skip it but you can dig in wiki. So, I transformed the hue through acos function. It creates a very nice spectrum of bright and vivid colors but the problem is that in usual color spectrum red, green, blue shades are way more dominant than yellow, cyan, and purple. Fix Lightness to 50% for best visibility.Ĭolor_generator = () => hsl (360*Math.random(), 0.5 + Math.random()/2, 0.5).Create a random Saturation from 0.5 to 1 (or 50 to 100) for vividness.If necessary, you can convert hsl to rgb as already mentioned by others. For anything serious, hsl is a better method than rgb. I wanted to create very distinctive and vibrant colors (for graphing). Let h = Math.random() // # Use a random start valueĬolorArray.push(rgb2hex(hsv_to_rgb(h, 0.99, 0.99))) The next two methods are converted from Ruby to JavaScript. If I had the reputation, I would have simply commented the jsbin link I created. I figured I'd post an additional answer to this already mega-sized Stack Overflow question because the top answer has another comment linking to a Gist with the JavaScript implementation of Ankerl's logic and that link is broken (404). The top voted comment of the top answer suggests that Martin Ankerl's approach is better than random hex numbers, and although I haven't improved on Ankerl's methodology, I have successfully translated it to JavaScript. If you wish to see what this looks like in action see Simple JavaScript Rainbow Color Generator for Google Map Markers. This is ideal for creating easily distinguishable vibrant markers in Google Maps and other apps. This function generates vibrant, "evenly spaced" colours (i.e. * step: The step number, means the order of the color * numOfSteps: Total number steps to get color, means total colors
This is perfect for creating pop-out markers in Google Maps that have optimal "uniqueness" (that is, no two markers will have similar colors). To ensure the colors are distinct I avoid using a random generator and select "evenly spaced" colors from the rainbow. My goal was to create vibrant and distinct colors.
0 kommentar(er)
