I'm interested in building my own color picker from scratch because I'm not a fan of how the default one looks on my Linux machine. This project could actually help with a few other things I'm working on, so I'm looking for some guidance.
Here are a few specific questions I have:
- To create color displays where users can change colors or hues at different locations, should I use canvas or WebGL? It seems like using WebGL might be overdoing it, but I can't think of a simpler method. I should note that I'm familiar with OpenGL, so that would make sense for me to some extent.
- Will I need any specific algorithms for this? For instance, something that helps fine-tune the color picker interface.
The main issue for me is the aesthetic of the existing system color picker. Is it possible to just redesign or restyle that instead?
5 Answers
Using canvas sounds like a good direction. You can rely on CSS gradients for some of the work as well. If you're serious about color conversion, knowing a bit about algorithms or using a library might be necessary. For reference, I've created a few simple color pickers in an article I wrote. You can check it out here: https://cloudfour.com/thinks/hsl-a-color-format-for-humans/.
It's totally doable! We used to make our own before color pickers became built-in. If you know what you're doing, it should only take you a day or two to whip one up.
Are you thinking about creating something along the lines of a custom web component to replace the standard ? If so, you might want to check out the Eye Dropper API, which lets users select colors from their screen. It's a cool feature, but keep in mind it's mainly supported on Chrome right now. Here's a link for more info: https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API.
You could definitely create a custom color picker using just HTML. For example, you can use an input element like this:<input type="color" value="#ff0000">.
This works fine, but I get that you're looking for something different due to design preferences. Just keep in mind that the look can vary based on the browser and system.
Yeah, you can style that input, but it's quite dependent on the browser render.
The short answer to your question is yes, it's definitely possible! But considering if it's worth it depends on your goals. If you're doing it just for fun, go for it! Using canvas (not WebGL) could work fine. You'd need a function to translate the x, y coordinates to colors when someone clicks. Just a heads-up: I'm not an expert in making color pickers myself, so maybe ask someone with more experience for the nitty-gritty details.
Agreed! I actually built one back in '99 that turned out really well.