Colors Palettes
Copy Any Color Instantly

How to Choose a Color Palette

A useful color palette gives your website, app, or design a consistent visual identity. Start with one primary color, add supporting colors, and reserve a contrasting accent for important actions such as buttons and links.

• Primary color: use it for key brand elements and main actions.
• Supporting colors: use related shades for backgrounds, cards, and sections.
• Accent color: use sparingly to draw attention to important details.
• Neutral colors: use suitable whites, greys, or dark tones for readable text.

HEX Color Codes Explained

HEX is a common way to specify colors in CSS. A six-digit code represents red, green, and blue components. For example, #3B82F6 is a blue color. Click a swatch above to copy its color code and paste it into your stylesheet.

.primary-button {
    background-color: #3B82F6;
    color: #FFFFFF;
}

Before publishing a design, check text contrast and make sure important information is not communicated by color alone. This helps make interfaces easier to use for more people.