Random thoughts on art, technology, stuff, and occasionally Real Estate: Cool Tools: Hex Color Code Chart & Generator

Cool Tools: Hex Color Code Chart & Generator

If you spend any time playing with blog or website design, you may have the need to find the color HEX CODE to match a particular color in a design scheme ....

This little tool located here: http://www.2createawebsite.com/build/hex-colors.html  can make the job quick and painless.

Here's how to use it.

First drag the slider under "hue" until it is in the general color range you need. 

 

Then double click in the large box under "Brightness/Saturation".  Begin dragging the cursor around inside the box.  Upward and towards the left for lighter, downward and towards the right for darker.  As you do this, watch the box labeled "Swatch". 

 

When the color displayed in "Swatch" is the color you want, stop.  Look down at the box labeled "Hex".  There's your six digit Hex code for the color to copy and paste into the html of your website or blog.  You also have the RGB code. 

Yes, I know, the Photoshop color picker works the same way, but it is handy to have the tool on line as well.

 

If you want to have a little more fun, copy the Hex code (without the hash mark #) into the "Choose a Color Scheme" tool and click Update.  The tool will generate a few suggested omplimentary colors. 

 

 

 

8 comments • Cheryl Johnson • January 30 2008 07:53AM

Comments

Thanks for the tip. I have been playing with the colors on my other blog, but I am now looking at updating my website. This looks like a great tool to use it.
Posted by Frank Schulte-Ladbeck (Frank Schulte-Ladbeck Professional Real Estate Inspections) over 2 years ago

Cheryl

I must admit I have a time just keeping up with things.

Tom Braatz

Posted by Tom Braatz, Waukesha County Real Estate,WI (Re/Max Realty Center 262-377-1459) over 2 years ago
Thanks, Cheryl - The 2createawebsite.com link you provided contains a number of other useful bits of info as well.  As I say frequently about your posts - I may learn somthing here, if I am not careful.
Posted by Ted Baker - Real Estate in Central Florida (Carmody and Associates LLC) over 2 years ago

Cheryl - Nice color wheel. I came across another good html color program the other day. I will try to find the link. It actually put together schemes of 6 colors. 

UPDATE: here is the link

Posted by Ryan Martin - Bellingham Real Estate Agent (Windermere Real Estate / Whatcom Inc.) over 2 years ago

what is the code so I can put that generator on my website

Posted by nathan m over 2 years ago

Well What is The Code So I Can Put That Html Colour On my Piczo Help Site XD x.           Thankyou

Posted by Michelle p over 2 years ago

Michelle -- I haven't tried Piczo.  Looks like Piczo tries to do so much for you that sometimes simple changes get complicated.  :-)

I can see how to set a background color for the entire page---

Click the Background icon

Click the color tab on the far left

Click "Advanced Feature: Enter HTML Code:"

Then type the hex code number in the box right after the words "Enter HTML code"

If you create a text box, I see little boxes down at the bottom of the text entry window to click for Text Color and Background Color.  Click on HTML, and a Script Prompt window pops up.  Type the hex code in the little script box.

 

Posted by Cheryl Johnson, Bob Taylor Properties, Inc., Los Angeles, CA over 2 years ago

This one will help me out a bunch. Thanks for this post.

 

kimberly ventura

http://www.clearmediawebdesign.com

Posted by graphic design los angeles about 1 year ago

This blog does not allow anonymous comments