Introducing 2020 Colors
Over the past couple weeks, I’ve been working on a little side project called 2020 Colors. It’s a free online resource where you can learn about colors. These color encyclopedia websites are a dime a dozen, but I’ve incorporated some features that make 2020 Colors really stand out from the rest.
Discover what colors popular brands are using
Brand recognition and colors are like two peas in a pod. Seeing the colors that represent companies in a similar industry is useful knowledge to designers. For example, if you check out the color listing for Dark orange (#ff8c00), you’ll see that Amazon, SoundCloud, and Firefox are using something quite close in hue.
How colors look in different environments
A color on a computer screen will almost certainly look different when placed in the real world. Each of the 16,777,216 colors on the website will show the viewer how it looks under 20 different lighting conditions. Some of the lighting conditions are “old direct sunlight at noon”, “daylight fluorescent”, and “north sky daylight”. Take a look at the entry on Pastel pink (hex color code #dea5a4). It almost looks purple in some scenarios!
This is a feature of 2020 Colors that I haven’t found to be easily accessible elsewhere on the web. On the website, you’ll find the source of the data and algorithms used in computing the colors right below the array of environments.
Color psychology and theory
Each color tells the reader basic color theory surrounding it. At the time of this writing, the entry for hex color #ffb6c1, “Light Pink”, states the following.
Hex color code harmonies and palettes
When someone visits a color catalog or reference website, they expect color harmonies and palettes. Of course, 2020 Colors comes with that. It lists the standard complimentary, split complimentary, triadic, tetradic, and analogous color schemes. It also displays lighter and darker shades, tints, and similar colors. Each color also shows a random assortment of design tips to help with creating the perfect color palette!
Gradients and web dev previews/code
Unique gradients are generated for every single color. Some are quite beautiful! Others, not so much. The same applies to the sections showcasing different text and background colors and HTML elements like buttons; it’s not always supposed to look good because not all colors pair well with one another. 2020 Colors is a resource designers can turn to and instantly see whether colors clash or are a match made in heaven.
GameMaker Language color codes
GameMaker Language is a programming language I hold near and dear to me. It’s powerful when pushed to its limits, but it has its flaws. One tiny flaw is it not being able to use hex color codes through it. GameMaker stores its colors in a format known as "little endian". This means that color codes are represented by $BBGGRR instead of hex #RRGGBB. The red and blue places are swapped. This is easy enough to fix with a simple conversion script in-game, but I added it to the programming language syntax chart on 2020 Colors because I could! And, if anything, it allows you to convert directly from rgb or named-color to GML.
You can read more of my GameMaker tips and tricks.
Thanks for reading!
Whether you’re a designer, developer, or just someone who needs to paint their bedroom, I hope you find value in 2020 Colors! If you have any suggestions for features or want to collaborate or be an affiliate, get in touch with me. The homepage of 2020 Colors updates every day with new trending colors, so keep coming back for a spark of creativity.