Color Guide: Creating Website Palette
A well-structured color system is the foundation of a consistent and accessible UI. It defines how colors work together to reflect your brand, highlight key elements, and support readability. By establishing primary, secondary, background, and alert colors, designers can maintain harmony across the interface while ensuring accessibility for all users. Tools like Figma color styles make this process simple, once styles are defined, they can be applied globally to keep every component aligned with the brand’s visual identity.
Color usage and palettes
The color system helps you apply color to your UI in a meaningful way. In this syste, you select a primary and a secondary color to represent your brand, dark and light variants of each color and apply it to your UI in different ways. This is even easier to do in Figma once we create color styles that allows us to manage color across the whole project easily and effectively.
Color themes are designed to be harmonious, ensure accessible text, and distinguish UI elements and surfaces from one another.
Color theme creation
Primary color
A primary color is the color displayed most frequently across your website’s pages and components. Your primary color can be used to make a color theme for your website, including light and dark variants.
Secondary color
This color provides more ways to accent and distinguish your website. Having this color is optional and should be applied sparingly to accent selected parts of your UI.
Secondary colors are best for:
- Buttons and links
- Highlighted text
- Headlines
Background and error/warning colors
These types of colors don’t represent a brand, but needs to fit with overal UI.
Background colors appears behind scrollable content and are often neutral. Error/warning colors indicates errors and warnings in forms, such as invalid text in text field. The baseline color used here is mostly red for error and orange for warning.
Accessible colors
To ensure an accessible background behind light or dark text, your background can use light or dark variants of your primary and secondary colors.
Alternatively, these colors can be used for typography that appears in front of light and dark backgrounds.
.svg)
.svg)
.svg)
