Like what you see? Show some love on Product Hunt
Made by @jesseddy Submit a resource

UI Goodies

Color Guide

A guide to help you understand and find the right color resource(s) based on your needs.

See all UI Goodies guides
Visit Streamline icons

UI Goodies Guides help you understand what resources for a specific category might be best for your needs. This Color Guide takes a look at the Color Resources category of UI Goodies and breaks down which ones are best suited for particular use cases.

Collect, customize and export all your icons with Nucleo App →

Best tools for

Exploring Color Palettes

Recommended

With Culrs, you can browse and filter color palettes and filter palettes by categories such as analogous, triad, tetradic, and monochromatic. As Culrs also explains, analogous color schemes use colors that are next to each other on the color wheel. Triadic color scheme uses colors that are evenly spaced around the color wheel. Tetradic double complementary colors scheme is the richest of all the schemes because it uses four colors arranged into two complementary color pairs. Monochromatic (or mono) is a color scheme based on only one, single color tint.

Color Hunt is a free and open platform for color inspiration with thousands of trendy hand-picked color palettes. Endlessly scroll through palettes and search the library of palettes by color or a handful of different pre-selected themes. Color Hunt is beautifully presented and also offers a Chrome extension for color inspiration in every new tab.

Coolors makes it very easy to explore color palettes. Not only can you browse a broad index of palettes, but if you find a color palette you like, you can quickly go into generating mode which offers to adjust each color in the palette.

Adobe Color’s exploration tool leans heavily on extracting color palettes from Adobe stock photos and illustrations. When you search by a keyword, like "excited" for example, Adobe Colors returns palettes also based on the images that match the keyword. It’s a fun way to explore palettes and presents striking and bold palettes that you might not otherwise consider.

Mentions

Colors Wall includes over 3,000 palettes to explore. You can edit palettes, create your own, and save them for future or current use. There are no ways to filter the vast amount of palettes, you can search as a way to narrow down results; because of this, Colors Wall may be best for browsing large amounts of different palettes.

Best tools for

Building Accessible Color Palettes

Recommended

ColorBox by Lyft offers the most controls and tooling for viewing and adjusting colors to build accessible-friendly color palettes. You just have to see it for yourself! As you are building and adjusting your palette, you can see the indicators for WCAG legibility standards in real-time, which allows you to easily adjust settings to get enough shades to work with white or black text on top.

Accessible color palette builder allows you to enter up to six colors. It will then compare all the colors and communicate which foreground and background colors are accessible-friendly. It does a nice job of breaking down and communicating in human readable text why colors do not work together. While this tool has less controls and real-time operations than ColorBox by Lyft, it does allow you to see different foreground and background color combinations and their WCAG scores.

Mentions

Material Color Tool allows you to select colors and see them on screen in the Android UI. It also creates an accessibility report for you. It’s a great tool for Android specific work!

Colorsafe takes a different and unique approach and allows you to enter background color, and determine the styling of your text. It then generates accessible text colors that meet WCAG Guidelines including the recommended contrast ratio of 4.5 for small text or 3 for large text which is 24px or 18px bold. Put more simply, if you're looking for a green color that will work on white, you can generate many options using Colorsafe.

Best tools for

Generating Color Palettes

Recommended

Using ColorSpace, you can enter one color value, and ColorSpace will generate handfuls of different types of color combinations that you can test and explore. I have found this tool most useful when starting a new project and building color palettes from scratch. ColorSpace excels at suggesting colors and is helpful to use in tandem with a tool like Colorbox by Lyft and or Palette App to finetune a color palette.

With Make Tints and Shades, you can enter one color and Make Tints and Shades will automatically generate two smooth color palettes that perfectly flow from one color to the next in 10% color increments. One palette gets lighter in color, and one gets darker. This tool gives you the best view into all the different shades, 20 to be exact, that reside within one color.

Provide a single color value, and Palx returns a full-spectrum color palette, well suited for UI design and data visualizations that work harmoniously with brand colors. Each palette has 10 colors, and in addition to using your own custom color, you can select from 13 primary colors. You can also download your palettes in JSON, CSS, and Sass. Palx is a great tool to use as a starting point for color palettes.

Scale is an excellent tool as it gives you a lot of control and flexibility in color palette creation delivered in a straightforward interface. When creating color palettes for accessibility, it’s common to design the palette with enough dark colors that work with white text on top at the beginning of the palette. Scale allows you to enter one color value and select how many dark colors and light colors you’d like at each end of the spectrum. While you still need to test each color in the palette for accessibility to ensure the results you want, Scale is a good starting point for creating essential palettes.

Best tools for

Finetuning Color Palettes

Recommended

ColorBox is a tool by Lyft, and at the core, it's a color algorithm for creating a color system, which Lyft has open-sourced. No other tool gives you the number of controls available in ColorBox, which you can use to adjust the entire palette. It has inputs for the number of steps, hue, saturation, and luminosity. Each input also comes with different preset curve options, offering greater control over how colors progress in hue and saturation. It also shows you accessibility scores for a foreground text color on top of each color in the palette.

Palette App was built based on the premise that most existing apps generate new color schemes based on different geometrical concepts such as complementary colors or colors that are laid out in a triangle or another shape in a particular color space. The resulting color schemes might be suitable for logos or classic graphic design, but they rarely work for UI Design. Palette App lets you build smooth color schemes that flow from one color to another while being able to finetune hue, saturation value gradients of your palette and of each color swatch individually. You can import your own palettes and export palettes in JSON, CSS or Plain Hex.

Best tools for

Pre-Designed Color Palettes

Recommended

Open Color is a color scheme based on 13 colors. Each color includes 10 shades for a total of 130 colors. You would use Open Color if you’re looking for general color recommendations that work well together, are harmonious and have the same brightness level. It’s a set that works well together and can be used when you don’t already have your own color schemes.

Best tools for

Color Blind Simulation

Recommended

Sim Daltonism is an app for iOS and MAC. Once installed, it includes a resize-able window that you can use to place over anything on your computer screen to see what different types of color blindness look like such as deuteranopia, deuteranomaly, protanopia, protanopia, protanomaly (for red-green confusion); tritanopia, and tritanomaly (for yellow-blue confusion) and monochromacy, and partial monochromacy. This app includes a resizable container which allows you to move it around the screen. You can see what a person with normal vision would see, as well as a visually impaired person would see, at the same time. While all the tools here work well, Sim Daltonism is a top pick because of the viewing options, ease, and flexibility of use.

Color Oracle is a free color-blind simulator for Windows, Mac, and Linux and lives in the menu bar. Once installed, Color Oracle applies a full-screen color filter to your screen based on your selection so you can see what different types of color blindness look. Eight percent of all males are affected by color vision impairment. Color vision impairment is linked to the male chromosome, so it rarely afflicts women.

Mentions

Stark is a plugin that works with Adobe XD and Sketch App. It includes a contrast checker and a color-blind simulator. You can use both within each respective app to ensure there is enough contrast between text and background colors and to see what your UI looks like when viewed through the eyes of different types of color blindness.

Best tools for

General Color Exploration

Recommended

HTML Color Codes is a great way to explore a color(s) to find exactly what you’re looking for. By entering a color, you can see the HEX, RGB, and HSL codes, but this is just scratching the surface of the tool. Using a simple drop-down menu, you can see different swatches based on the chosen color for tints, complimentary colors, triadic, tetradic, analogous, neutral, shades, tints, and tones. You can easily drag your cursor in the color picker to change any of these palettes in real-time.

ColorHexa is a free color tool providing information about any color and generating matching color palettes for your designs (such as complementary, analogous, triadic, tetradic or monochromatic colors schemes). It includes a wide variety of information about the color you entered, such as color schemes, alternatives, shades, tints, and tones as well as color blind simulation.

Best tools for

Extracting Colors from Websites

Recommended

Site Palette offers browser extensions for Chrome Safari and Firefox. Once installed, Site Palette allows you to easily extract and see the color scheme from any Website.

Best tools for

Colors Best Suited for Data Visualization

Recommended

Creating visually equidistant palettes is basically impossible to do by hand, yet hugely important for data visualizations. When colors are not visually equidistant, it’s harder to (a) tell them apart in the chart, and (b) compare the chart to the key. You can use Data Color Picker’s palette chooser to create a series of colors that are visually equidistant. This is useful for many data visualizations, like pie charts, grouped bar charts, and maps. Data Color Picker offers two other modes: single-hue scales and divergent scales. You can easily copy the hex values of a palette or export to SVG.