Best Color Design Resources in 2022

Color is the combination of science and art, a simple color change could have drastic effect on the emotion or perception of the viewer. Being a UI/UX designer, mastering the color theory and its application truly can step up your design game.

Guides

Resources

Screenshot of Supa Gradient

Supa Gradient

Supa Gradient plugin allows you to create and manage gradients

Screenshot of Pastel

Pastel

Build color palettes for free with importing images from camera. Sync across iCloud and available for free on iOS and macOS.

Screenshot of Eva Design System

Eva Design System

A deep learning semantic color generator for user interface states.

Screenshot of Brandcolors

Brandcolors

Helpful reference collecting 600+ brand color codes all over the world.

Screenshot of Cloudflare Color

Cloudflare Color

Built by Cloudflare Design Team. Colorbox allows easy palettes preview on UI elements, importing color palettes from existing websites and also preview accessibility index on color contrast.

Screenshot of Colorbook

Colorbook

Colorbook converts colors easily to any printing and coding format. It also visualises color pairing as web design color scheme.

Screenshot of Adobe Capture CC

Adobe Capture CC

Capture photos and auto convert real-life hues into color palettes with Adobe Capture CC. It also directly integrates to to your Adobe CC's swatches if you are a subscriber.

Screenshot of Digital Color Meter

Digital Color Meter

The most convenient app to grab color code is the one built-in to your Mac. Digital Color Meter is a default Mac utilities app hidden in your Application folder. Simply press Shift + Command + C will copy the value into the clipboard. You can also adjust color profile (native, sRGB, Adobe RGB or P3 etc.) as well as the values to display

Screenshot of Munsell Hue Test

Munsell Hue Test

Train your eyesight to be laser-like. Munsell Hue Test is a fun yet challenging game to arrange color block by hue order. Lower the score is better.

Screenshot of Apple Human Interface Guidelines — Color

Apple Human Interface Guidelines — Color

Color section of Apple’s Human Interface Guidelines is a great introductory piece for color design when you are designing websites and apps.

Screenshot of Paletton

Paletton

Paletton takes on the scientific approach to find the right palette by adjacent and triad colors. It has plenty of previews and simulations to accommodate different scenarios for palette usage.

Screenshot of Social Colors

Social Colors

Material UI collects brand color for the major social media platform. Now you are one-click away from adopting the tone to your own customised banners and buttons.

Screenshot of Dribbble Colors

Dribbble Colors

Dribbble Colors is a hidden treasure for UI designers who are looking for case studies of color adoption. It allows users to search Dribbble shots by color using hex code. Users also can adjust percentage of the containing color within a shot. This tool comes handy to see how a color plays out in other design.

Screenshot of WebGradients

WebGradients

Subtle color gradients collection made for website background. CSS code, PNG, Sketch and PSD previews are all set.

Screenshot of Sip

Sip

USD$10 with 1 year of updates. Consider Sip as the professional version of Digital Color Meter, it is the best color tool built for pro-user in mind, providing seamless integration to professional workflows and applications. I love how It docks color palettes on top of the screen in a minimalist way, allowing cross-app usage. v2 is available now with more useful features and new pricing model.

Screenshot of Coolors.co

Coolors.co

One-tap super quick color schemes generator. User-generated palettes are also available for export. Paid upgrade for iOS App, Chrome Extension, and Adobe Addon.