What the hex?

Often when I’m designing/developing in the browser, I want to change a color just slightly. I usually want to make the color slightly lighter or darker. But when I’m working with hex codes, I haven’t found a good way of doing that without opening Photoshop (which takes about 20 years it seems like) or using the SASS lighten() and darken() functions or using the color picker in Chrome dev tools.

So, to try to get my head around how hex codes work, I made this little codepen. It’s a form that lets you build a hex code, one digit at a time, and then see the color that results from that hex code. Confusing? Try it out for yourself.

See the Pen what the hex? by Lauren Pittenger (@lepittenger) on CodePen.

2 thoughts on “What the hex?”

  1. Hi!

    I had the same problem with both # anf rgba() , until I started using hsla() colors. While it does take a bit of getting used to, I now use them all the time. Especially the L(ightness) parameter is quite relevant to the subject.

    hsla(0, 0%, 0%, 1) is black, hsla(0, 0 ,100%, 1) is white, for example. Initially you probably will want to use a colorpicker in the browser (with hsl view, duh) to get the proper codes.

    Here’s a nice tut on the subject by [Sara Soueidan](http://tympanus.net/codrops/css_reference/hsl/)


Leave a Comment

Your email address will not be published.


Are you ready to get your work out to the world?

Scroll to Top
%d bloggers like this: