How I make UI color palettes

Summary

In this video, product designer Jordan outlines a systematic 5-step process for creating effective UI color palettes. Starting with a brand color, the guide progresses through selecting supporting colors, creating a range of shades, designing neutrals, and testing the final palette for cohesion and accessibility. The tutorial emphasizes the importance of balance, color harmony, and practical tips for product designers. By following this method, designers can craft a visually appealing and functional color palette that enhances the user experience across interfaces.

Takeaways

• 😀 Use a systematic approach when creating a UI color palette to ensure consistency and ease of use.
• 😀 Focus on three main categories for a color palette: brand colors, supporting colors, and neutrals.
• 😀 Start with a base color (usually your brand color), and expand from there to create a cohesive palette.
• 😀 Choose supporting colors that complement the brand color and represent specific actions (success, warning, error, informational).
• 😀 Use HSB (Hue, Saturation, Brightness) instead of HEX or RGB for better control over color adjustments.
• 😀 Create a range of shades for each color (at least five to ten), ensuring a smooth gradient from light to dark.
• 😀 When selecting shades, follow an arc from the top-left to the bottom-right of the color picker to maintain color harmony.
• 😀 For neutrals, create a desaturated color scale with grays, ensuring that they blend well with the rest of the palette.
• 😀 Test your colors by placing them side by side and checking for evenness across the range of shades.
• 😀 Use accessibility tools to ensure that your colors pass contrast checks and are legible for all users.
• 😀 Keep iterating and tweaking the palette as you apply it to real UI designs, but avoid adding too many new shades (stick to a maximum of 10).

Q & A

What are the three main categories of colors in a UI palette?

The three main categories of colors in a UI palette are brand colors, supporting colors, and neutrals. Brand colors represent the business identity, supporting colors are used for specific elements like warnings or success messages, and neutrals are typically shades of gray used for text, backgrounds, and borders.

Why is the brand color considered the most important starting point for a UI color palette?

The brand color is the most important because it defines the visual identity of the business and sets the tone for the entire UI. It’s often pre-decided during the branding process and is used consistently throughout the UI to maintain brand consistency.

What is the advantage of using HSB (Hue, Saturation, Brightness) over HEX or RGB when creating a UI color palette?

HSB provides finer control over the colors, making it easier to adjust and maintain a cohesive palette. It allows designers to manipulate the intensity and brightness of colors in a more intuitive way compared to HEX or RGB.

What are the four key supporting colors that should be included in a UI palette?

The four key supporting colors are green for success messages, yellow or orange for warnings, red for errors or dangerous situations, and blue for neutral informational messages.

How should the saturation and brightness of supporting colors relate to the brand color?

Supporting colors should have saturation and brightness values that are close to the brand color to maintain visual harmony. Ideally, the difference should be within 5 to 10 points on the HSB scale to avoid the UI feeling disconnected.

What is the 9-block system for creating shades, and why is it effective?

The 9-block system involves creating nine different shades of a color, labeled from 100 to 900. This method is effective because it provides a simple yet comprehensive range of light to dark shades, which can be easily divided and used across various UI elements.

What is the 'Arc' method for finding color shades, and how does it work?

The 'Arc' method involves imagining a line from the top-left to the bottom-right of the color picker, passing through your base color. Shades are chosen along this arc, with the darkest and lightest shades at the ends, and intermediate shades filling in between.

Why is it important to create a range of neutral colors in a UI palette?

Neutral colors, typically grays, are important because they make up a significant portion of the UI, especially for text, backgrounds, and borders. A well-chosen set of neutral colors ensures that the palette feels balanced and that the UI remains legible and user-friendly.

What is the benefit of testing and refining the color palette during the design process?

Testing and refining the color palette helps ensure that the colors work well together and maintain visual balance. It also allows designers to make adjustments based on how the colors perform in the actual UI, ensuring both aesthetics and functionality.

How can accessibility tools help when testing the UI color palette?

Accessibility tools help check color contrast to ensure that the palette is legible for users with visual impairments. These tools can verify if the color combinations meet accessibility standards, ensuring that the UI is usable by a wider audience.