JS: Making a Color Picker from Scratch, part 1: HTML/ CSS

A major feature missing from my pixel drawing web app is the ability to select a color. Making a color picker is no simple task, so I’m dividing it up. Before we get to the Javascript, first I’m going to set up the basic layout with HTML and CSS.

This is what it will look like.

It’s important to have a clear vision of what your component will look like, so that’s why I’m starting with a rough layout of the HTML and CSS.

The main container needs to be able to be toggled onto the screen and hidden by the user. For now I’m just going to have it appear in the center of the screen:

visibility: hidden and pointer-events: none work well together to hide a component that’s actually always there, it just can’t be interacted with at all until the user triggers a change in these properties with javascript, similar to a tooltip. I chose flex-direction: column to arrange the title and content easily. Luckily, since this is also a component that ignores the layout of the rest of the webpage, I can give it a fixed width and height without worrying.

I divided the content into a left and right div to organize it. On the left, the canvas where we’ll see a gradient of values for the selected hue, a slider to choose a hue, as well as the OK and Cancel buttons:

The hue slider is an input[type=range] element and to make it vertical and customized, the best way is to make appearance: none and do two transforms to rotate and then, importantly, set the transform-origin. You can make the basic slider vertical with appearance: vertical-slider but then you can’t customize it.

The right side right now is more standard flexbox stuff with nested column layouts and a bunch of input[type=number] elements. I’m going to cover this side in more detail later when I change them from standard number inputs to hybrid number/slider inputs so that they can either be typed in or changed with a slider on click. Next time I’ll cover making the visuals for the gradients and colors, as well as the javascript to actually select a color.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store