While testing the second version, I realized that it is more effective when choosing matching colors for separate but close elements at the same time.Īlthough this is only for choosing background colors, I hope it can be improved to choose text-color and border-color at the same time.įurthermore, if you are a beginner and want to build this project, first go with the stand-alone tool and then work with the second one. Note that, when you are using the second version in your project, don't forget to remove all the stuff from your code after choosing your matching color.Īs I mentioned before, I've got these two versions of the project idea built within half an hour and I tested them for a couple of my projects. JavaScript Code Snippets For The Second Version You can see the live preview of the stand-alone version at CodePen here. 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. Var blue = Math.Choosing matching colors when creating a web page is crucial as same as choosing clothes to wear. Var green = Math.round((rand_2 + baseGreen) / 2) Var red = Math.round((rand_1 + baseRed) / 2)
#Html hex color code generator pro
Var rand_1 = Math.abs((Math.sin(seed++) * 10000)) % 256 Generate palettes with more than 5 colors automatically or with color theory rules Save unlimited palettes, colors and gradients, and organize them in projects and collections Explore more than 10 million color schemes perfect for any project Pro Profile, a new beautiful page to present yourself and showcase your palettes, projects and. Var seed = input_str.charCodeAt(0) ^ input_str.charCodeAt(1) for seed just take bitwise XOR of first two chars lazy seeded random hack to get values from 0 - 256 TODO: adjust base colour values below based on theme
every string with the same first two chars will generate the same pastel colour Inspired by David Crow's answer here: Algorithm to randomly generate an aesthetically-pleasing color palette //magic to convert strings to a nice pastel colour based on first two chars It could be easily extended so that the seed is the XOR of all chars in the string, rather than just the first two. It uses the first two chars of the string as a random seed, then generates R/G/B based on that seed. Here's a solution I came up with to generate aesthetically pleasing pastel colours based on an input string. While this code uses hard-coded colors, you are at least guaranteed to know during development exactly how much contrast you will see between colors in production.Ĭolor list has been lifted from this SO answer, there are other lists with more colors. I suppose you could always add more colors. While this has a limit to only 64 colors, I find most humans can't really tell the difference after that anyway. Will return the same color as the first time Instance.stringToColorHash = instance.veryDifferentColors For every new string, assign the next color in the list: // Takes any string and converts it into a #RRGGBB color. The easiest way I have found to get around that is to pre-populate a list of very different colors. I find that generating random colors tends to create colors that do not have enough contrast for my taste.
0 kommentar(er)
