davidbau.com CSS Color Names

CSS Color Names

My one-page sheet of CSS color names: CSS Color Names Sorted by Color.

There are 140 standard CSS Color names including common names like "red" and uncommon ones like "gainsboro". Although writing out "peachpuff" is not as concise as writing "#FFDAB9", I find spelled out color names more readable than rgb codes. The only problem is remembering names when it is time to write them. If you rarely use "palevioletred", it can be hard to remember its exact name.

The W3CSchools color list ranks top in Google, but I prefer Doug Crockfords' one-page sheet. However, both lists suffer from an alphabetical listing, which means they are best for looking up a color once you know a name. That's not really the problem.

The point of this CSS color name cheat cheet is that sorts all the colors on one page, by lightness and hue. If you are thinking "dark green", instead of just typing "darkgreen," you can scan and find the color you want in a rainbow on the dark side of the sheet. Perhaps you will find that you really want "forestgreen" or "seagreen".

Posted by David at September 28, 2013 11:52 AM

CCS4 has an additional color, RebeccaPurple. I adapted your grid to use this (by dropping Fuschia, which has a duplicate hex code with Magenta).

I then rearranged the grid positions of neighbors magenta, rebeccapurple, indigo, and deepviolet to better reflect saturation and hue of the changed set. 4th & 3rd lines from bottom become respectively (this from palette initialization code for the Spectrum javascript color picker):

['aliceblue', 'powderblue', 'thistle', 'mediumslateblue', 'royalblue', 'magenta', 'rebeccapurple'],

['ghostwhite', 'lightblue', 'plum', 'mediumpurple', 'slateblue', 'darkviolet', 'indigo'],

Posted by: Glenn Pearson at April 29, 2015 03:49 PM

Hello and thank you for this wonderful piece of information, it helped me a lot in passing through my programming challenges. You did really a wonderful job. I like how you can see the color.

Posted by: Anna Iakovleva at January 3, 2023 09:16 AM