S Studio Snapsize - Web Designer - Nelson BC, V1L 4J1

Lighten and Darken Hex Color Values

Ever need to lighten or darken hex values for button hover states? Found yourself having to launch Photoshop or Illustrator just to drag a color picker around? Likewise, one too many times. So, I built a web based tool to do just this, lighten or darken by a set percentage. It’s responsive too so just launch the app on whatever device and use it as you please. Visit the app at hexcolortool.com, bookmark it and share it with all your hipster designer friends.

Custom Social Sharing Links

Social sharing buttons provided by social networks are usually built to track users, even after they’ve left your site. I know, totally intrusive. Anyhow, there are ways of creating unobtrusive buttons/links to enable sharing on your site. Here’s one of them, in alphabetical order of course:

  • Delicious - http://del.icio.us/post?url=[URL]&title=[TITLE]]&notes=[DESCRIPTION]
  • Evernote - http://www.evernote.com/clip.action?url=[URL]&title=[TITLE]
  • Facebook - http://www.facebook.com/share.php?u=[URL]&title=[TITLE]
  • Friendfeed - http://www.friendfeed.com/share?url=[URL]&title=[TITLE]
  • Google+ - https://plus.google.com/share?url=[URL]
  • Google Bookmarks - http://www.google.com/bookmarks/mark?op=edit&bkmk=[URL]&title=[title]&annotation=[DESCRIPTION]
  • Linkedin - http://www.linkedin.com/shareArticle?mini=true&url=[URL]&title=[TITLE]&source=[SOURCE/DOMAIN]
  • Newsvine - http://www.newsvine.com/_tools/seed&save?u=[URL]&h=[TITLE]
  • Ping.fm - http://ping.fm/ref/?link=[URL]&title=[TITLE]&body=[DESCRIPTION]
  • Pinterest - http://pinterest.com/pin/create/bookmarklet/?media=[MEDIA]&url=[URL]&is_video=false&description=[TITLE]
  • Posterous - http://posterous.com/share?linkto=[URL]
  • Reddit - http://www.reddit.com/submit?url=[URL]&title=[TITLE]
  • Slashdot - http://slashdot.org/bookmark.pl?url=[URL]&title=[TITLE]
  • StumbleUpon - http://www.stumbleupon.com/submit?url=[URL]&title=[TITLE]
  • Tapiture - http://tapiture.com/bookmarklet/image?img_src=[IMAGE]&page_url=[URL]&page_title=[TITLE]&img_title=[TITLE]&img_width=[IMG WIDTH]img_height=[IMG HEIGHT]
  • Technorati - http://technorati.com/faves?add=[URL]&title=[TITLE]
  • Tumblr - http://www.tumblr.com/share?v=3&u=[URL]&t=[TITLE]
  • Twitter - http://twitter.com/home?status=[TITLE]+[URL]

All you need to do is create regular links and replace the contents of the square brackets with the appropriate PHP snippets from your CMS. Style as you wish of course.

Should We Still Use Web Safe Colors

It’s 2013, should we still be using web safe colors? Absolutely not! Long gone are the days where you need to be designing websites that only support web safe colors. But, that doesn’t mean you can’t use them.

I’m mainly just doing front end development these days so most of my work gets handed down to me from other designers. I noticed that a few of them still like to use a limited color palette. Every time I would open one of their Photoshop files I’d notice that the color pickers were set to ‘web safe color’. This got me wondering why they’d be doing this. As it turns out, it’s just easy. There’s not need to be micro-selecting colors from millions of options and the hex values are just easy to remember. The hex values are all set in pairs, like #0099CC. This makes it super easy for me also cause all I need to remember for CSS is #09C. I love easy.

When I searched around the web for ‘web safe colors’ all I found were ancient looking websites with ugly swatch grids. I wanted something nice that displayed all the web safe colors so I built my own. It lives here. It’s responsive so you can just launch this tool on your smartphone or tablet and you don’t always have to flip back to Photoshop. It’s also a super handy tool for filtering through color ranges. Check it out at websafecolors.info