Reputation: 11338

Where can I find a list of "easy-to-type" hex color codes for use in CSS?

Let me give a few examples:

Google uses #609, #15C, #12C, #093 ...
Adobe uses #ECECEC, #D9D9D9, #B0B0B0, #737373 ...
Yahoo uses #f9fafa, #93B9D9, #fefefe ...

If you look at the CSS of most of such sites, the hex color codes they use are extremely easy to remember, and I don't think it's unintentional at all.

In case I am not clear as to what I exactly mean by "easy-to-type" hex color codes, I meant color codes like these -- #FFFFFF (#FFF), #15C (#1155CC), #DBDBDB, and not to leave out hex colors like #F9FAFA (which are also easy to remember).

I have tried colors pickers in Gimp, Photoshop and various online tools. For a color of my choice, I was never able to get a closer-looking color in the aforementioned "easy-to-type" hex format.

So, the question is, how do you do it?

Upvotes: 1

Answers (4)

skube

Reputation: 6175

Another way is to simply remember the hex word

#BADA55 /* is always a fun one! */

Upvotes: 0

Eric A. Meyer

Reputation: 930

The way I do it is to get the colors I want in a color picker, look at the hex values they generate, and then try to round to the nearest doubled pairs. So let’s assume I color-picked the following (and I typed these essentially at random, so only generate the actual colors at your own risk):

#82AC37 #B8AB29 #194645

In the first case, 82 is close to 88, AC is close to AA, and 37 is close to 33. So that one becomes #88AA33, or #8A3. Through similar means, I get #BA3 and #244.

If I find that pattern-rounding takes a color too far away from where it was, then I look for something with an easy-ish pattern, like (in the first case) #82AA33 or (in the second case) #B8A828. It becomes a bit of an art, really. And you definitely have to be comfortable with base-16, so that you can tell when it’s a better to round up versus down.

Upvotes: 4