top of page
Search
  • mugglehugstudio

top five color tools

Need help assembling a color palette and not sure where to start? Here are five incredibly useful tools for selecting, naming, and curating colors for any project.



If you are struggling to find color inspiration, start here to read about some places to kickstart your creativity. Once you are inspired and ready to create your palette, start with these tools to begin!


background on color codes

First, let's start by learning a bit more about color codes. There are lots of different ways to describe the same color, since there are different mediums in which the color will be used. Colors will look different on a screen, for example, than on a printed page. To get as close a match as possible throughout mediums, we need to use different color codes.


RGB

RGB (or Red, Green, Blue) is used for digital screen media, like websites, presentations, or videos. Because digital screens use LED lights to display colors, RGB is an additive system that codes the lights to shine in a certain proportion.Colors are coded using three numbers from 0 to 255, which equal the red, green, and blue values in a given color. Colors coded in RGB have a lot more variation, because lights can adjust in finer detail than ink (CMYK) can. This website has a really cool explanation of the formula used for creating RGB colors from their codes.


HEX

HEX (or hexadecimal color) is really convenient, and widely used as shorthand for RGB. Each HEX code is a pound sign followed by six letters and numbers, combined to display a given color. HTML uses HEX codes, and so does design software like Photoshop and Illustrator. If your program of choice does not use HEX, but you find a color code you like, there a plenty of converters online!


CMYK

CMYK (or Cyan, Magenta, Yellow, and Black) is the only way to display colors for print. Printers using CMYK print little dots of each color that overlap to create a given color. CMYK colors are subtractive, because the colors of ink absorb light. And because printers have less variability than screens, CMYK colors often appear a bit duller than what you will see on your design screen. If you intend to print a design, is important to convert them to CMYK to make sure that you are still satisfied with the result on paper. But keep in mind, once you convert a document to CMYK, you can't get your RGB or HEX codes back!


Pantone Matching System

Pantone colors are famous these days—Pantone color cards are the epitome of aesthetic design, and are incredibly useful for branding because the colors are always exactly the same no matter what they are printed on. But these cute little chips also represent contiguous printer ink that can be installed to get an overall uniform color result. Because of this, Pantone colors are much more limited than RGB or even CMYK. One of the tools I list below is the Pantone Color Finder, which can input alternate codes and convert them to the closest Pantone options.


HSL

HSL (or Hue, Saturation, and Lightness) is most common in image editing, but also useable in web design and in design software like Adobe. HSL colors are displayed as a number 0 to 360 (the degrees of the color wheel) and as two percentages (percent saturation and percent lightness). Though useful in photo editing because users can see exactly which color they are changing, HSL is not as useful in general digital design when other ways of color coding are accessible. If you want to learn more, this page has more in depth information on the HSL color wheel/sphere.


Now, here are my top five tools that are great for finding colors and creating color palettes!


html color codes

This website is by far the most comprehensive, helpful tool that I use often. It gives HEX, RGB, and CMYK values right at the top, and has lots of different tools to help create a palette perfect for screen design. There is general information about color theory in the Color Picker, which can take one HEX color and pair it with others that will look good. Or, explore the Color Charts, which are divided up by color type. Create your own palette and save it for next time you visit!


coolors

Probably my most used tool for grouping and naming colors, Coolors is an incredibly fun way to play with palettes. The online generator is free to use, and there are even plugin options for Adobe and iOS. I think I like this resource so much because even if you already have a palette, you can still enter individual HEX codes and get naming inspiration. Or, if you are starting from scratch, there are ways to refine your palette and even randomize groupings by clicking the space bar. Once you find colors you like, you can lock them and keep randomizing others to match it. I would highly, highly recommend this resource to anyone, for almost any level of design.


pantone color finder

Software like Illustrator or Photoshop will give a full range of color codes, including HEX, but it will not give the closest Pantone match. Therefore, I visit the online Pantone Color Finder every time I create a palette. There is a color picker option, or the Color Converter option (which I use the most). This allows you to convert HEX, RGB, and CMYK codes to their closest Pantone matches. The generator will give a few options, and I don't always use what's been given as the "closest match." Once you choose, the site will also give more information on the name, number, and availability of each color.


encolorpedia

Similar to other resources, Encolorpedia lets you input a HEX color and see the name of that color, as well as different types of complimentary color palettes. The strength of this resource is that it provides paint colors that closest match your color. At the very bottom of the page, there are also HEX, RGB, and HSL coding examples. It gives incredibly specific coding details on whichever HEX you input, and even has a random palette generator at the bottom. Definitely a great resource—even just for painting a room to match your branding colors!


paint catalogues

For me, by far the most struggling part of color designing is naming colors. This is where paint catalogues like on Behr ColorSmart or Sherwin Williams can help! Behr is a better interface for generally exploring colors, but Sherwin Williams has pretty good color names (like Lime Granita, Neighborly Peach, or Euphoric Lilac).


Hopefully this has given you come helpful tools, tips, and information about how color works. Assembling color palettes is one of my favorite parts of designing, and these resources have been useful for me. Which others should I try?



Comments


bottom of page