Changing colors of web elements is usually one of the very first things learned in HTML and CSS. Maybe you are like me and first discovered hex codes while trying to beautify your Neopets shop (what up ’90s kids!). Over the years, the language of code has changed a lot but the process of choosing and changing colors has remained pretty consistent.
When changing colors in HTML and CSS, we use hexadecimal numbers – more commonly known as “hex color codes”. To be honest, I never think about what these color codes actually mean. I just use the color picker in Photoshop or I use the Inspect Element tool. Still, it’s neat to think about so here’s a brief rundown on how this whole color thing works.
A hex code is made up of a hashtag followed by 6 digits (0-9, A-F). Together, the letters and numbers represent different combinations of red, green, and blue light (RGB). Zero represents the lack of color or light (#000000 would give you black) while the letter “F” represents the strength of a color or light (#FFFFFF would give you white). All of the numbers and letters in between “0” and “F” represent a spectrum of colors and can be combined to create beautiful custom shades. For a more extensive tutorial on how color codes technically work, click here.
When inserting colors into your CSS codes (click here for a CSS refresher), you definitely can just type the name of a common color. For example, adding “color: pink;” to your font selector would create text like this. However, I know that you probably want to be able to choose the exact hue for your test. Why not create something custom just for your blog or website? This is where some kind of color choosing tool comes in handy. For the most basic color picker, an excellent simple website is ColorPicker.com.
Or you could just use the color picker in Photoshop!
After you’ve chosen the perfect colors, you can copy and paste them into your CSS style sheet. Want to change your font color? Check out our tutorial on styling fonts with CSS.
For some other great ways to explore hex colors, check out our roundup of 5 color palette tools. Have fun!
Alexandra says
Love this – S/O to the neopets/myspace HTML learners of the 90’s :) Inspect element is an awesome tool – but you should definitely know about digitalcolor meter on macs xo
Warm Regards,
Alexandra
http://www.littlewildheart.com
Jennifer says
I’ve never used the digital color meter! Ahhh, thanks for mentioning it. :)
Laura says
I must admit that I just always use the colour picker tool too! Thanks for explaining what it all means x
http://www.lovedbylaura.com
Jennifer says
Of course! Glad it was helpful. :)
Chris says
I would like to retrieve a hex code from a website automatically? Can this be done. I dont want to have to do it manually
Thanks
Jennifer says
I always use my chrome developer tool to grab the hex codes from websites. I’m sure there are browser extensions that can do the trick too!