How to Create a Custom Color Palette

Published September 1, 2026 · By the Zirapy team

A custom color palette gives your website, brand, product, or campaign a recognizable visual direction. Instead of choosing colors one element at a time, you create a small system that tells you which shade to use for backgrounds, text, buttons, borders, labels, images, and important calls to action. The result is faster design work and more consistent marketing materials.

You do not need to be a color theory expert to create a useful palette. Start with a clear purpose, choose colors that support it, assign each color a role, and test the combinations in real layouts. This guide walks through a practical process for creating a custom palette that works across websites, social posts, emails, ads, presentations, packaging, and print.

Start with the purpose

Before selecting colors, define what the palette needs to achieve. A portfolio website, skincare label, travel campaign, restaurant menu, SaaS product, fashion collection, and children’s event can all need very different visual moods. The right palette is not only attractive; it supports the brand personality, audience expectations, content, and desired action.

Write down a few words that describe the intended feeling. You might choose calm, natural, premium, playful, bold, clean, warm, technical, editorial, energetic, minimal, or trustworthy. These words act as a filter when you compare possible colors. A bright neon accent may not fit a calm, handcrafted brand, while soft beige and forest green may not fit a high-energy sports campaign.

Choose a source of inspiration

A custom palette can start from a logo, a favorite color, product packaging, an existing website, a brand story, or a visual reference. Photos are especially useful because they already contain colors that work together in a real scene. A product photograph can reveal packaging and material tones. An interior image can inspire surfaces and neutrals. A landscape can provide a seasonal or emotional direction.

Upload a source image to the free Shipirox color palette extractor to identify its distinct colors and copy HEX or RGB values. This gives you a concrete starting point instead of relying on visual guesses. You can then select only the shades that fit your brand purpose and design roles.

Image extraction is inspiration, not a rule. A photo may contain shadows, reflections, or incidental objects that do not belong in your final palette. Use the image to discover relationships between colors, then make deliberate choices about the final system.

Pick a primary color

Your primary color is the most recognizable non-neutral color in the palette. It often comes from a logo, product, category, or source image. Use it for brand recognition: navigation, selected states, key headings, icons, major sections, or visual details that should feel connected across channels.

A primary color should not automatically become the button color. If it is pale, subtle, or low contrast, it may work better as a large visual surface than as small text or an action control. You can create darker and lighter versions of the same hue to make it more functional without losing the main brand direction.

Add supporting colors

Supporting colors give the palette range. They can appear in cards, illustrations, borders, category labels, hover states, secondary banners, and social-media templates. Choose one or two supporting shades that work well with the primary color but do not compete with it.

A useful approach is to select a related hue from the same visual reference. If your primary color is a leaf green taken from a garden photo, a muted sage, warm soil brown, or soft sky blue can work as a secondary color. If your primary color is deep navy from a fashion image, a dusty rose or warm ivory can soften the theme without making it feel unrelated.

Choose a focused accent color

An accent color has a different job from the primary color. It should attract attention in small amounts. Use it for a main call to action, sale badge, offer, price highlight, important link, notification, or key data point. The best accent is usually distinct enough from the background and primary color to stand out immediately.

Do not use the accent everywhere. If every button, label, border, icon, and section uses the strongest color, it stops feeling important. A limited accent creates hierarchy and makes it easier for visitors to see where they should click or what they should notice first.

Include background and text neutrals

Neutrals do much of the practical work in a custom palette. They create calm backgrounds, readable text, soft cards, borders, dividers, captions, and whitespace around colorful elements. Even a bright, playful brand needs stable neutral colors for long-form content and interface components.

Choose at least one light neutral and one dark neutral. The light neutral can be white, cream, pale gray, or a very light tint related to the primary color. The dark neutral can be charcoal, deep brown, navy-black, or another near-black tone that works well for text. A muted middle neutral can help with captions, metadata, inactive states, and subtle borders.

Use the 60-30-10 rule

A palette works best when each color does not receive equal visual space. The 60-30-10 rule is a simple way to create balance. Use a light or neutral color across most of the layout, a primary or supporting color for a smaller share, and your accent in the smallest amount.

For example, a wellness website might use warm cream for most background surfaces, olive green for headings, icons, and selected sections, and terracotta for the “Book a Session” button. The design still feels colorful, but the accent is easy to find because it is not competing with every other element.

The numbers are guidelines, not a strict formula. In a photo-led landing page, the image may occupy most of the visual space. In a dashboard, neutrals may appear even more often. The important idea is to give each color a clear visual weight.

Create light and dark color scales

A single HEX value is rarely enough for a complete interface or campaign. You may need a pale background tint, a mid-tone for branded elements, and a dark shade for text or active states. Create a small scale for your main colors so you can use them in multiple situations while maintaining a consistent hue.

:root {
  --green-50: #EDF5EE;
  --green-200: #BDD4C1;
  --green-500: #4F7A58;
  --green-700: #315238;
  --green-900: #1E3022;
}

Use the 50 level for soft surfaces, empty states, and background blocks. Use the 500 level for brand elements, links, icons, and selected controls. Use the 700 or 900 levels for headings, readable text, outlines, hover states, and high-contrast components. This system is more flexible than repeatedly adding opacity to one original color.

Check contrast and accessibility

A custom palette should work for people reading real content, not only in a moodboard. Pale pastels, bright yellows, low-saturation greens, and metallic-looking colors can be appealing but may not provide enough contrast for body text, buttons, navigation, or form labels.

Test the text and background combinations you plan to use. For normal body text, a contrast ratio of at least 4.5:1 is a common WCAG AA target. Large text can use 3:1. Check headings, paragraphs, buttons, links, product prices, captions, menus, and form controls. If a color fails, use it as a background or decorative element and choose a darker related tone for text. Read our color contrast and accessibility guide for a practical explanation.

Color should not be the only way you communicate meaning. Add text, icons, patterns, or other visible signals to errors, warnings, selected options, sale statuses, and success messages. This improves clarity for every visitor, including people who do not perceive color differences in the same way.

Test the palette in real layouts

A row of swatches can look balanced while the same colors fail in a real page. Test your palette in the layouts you will actually use: a homepage hero, product page, blog article, email banner, social post, advertisement, checkout screen, or presentation slide. This is where you see whether the accent gets enough attention, the primary color feels too heavy, or the text neutral needs to be darker.

Create a small sample with a heading, paragraph, card, button, link, icon, border, and image. Try the light and dark versions of your colors. Review the layout on desktop and mobile, because a color block that feels balanced on a large screen can dominate a small screen.

Apply your palette across channels

The value of a custom palette grows when it is used consistently. You do not need to repeat every color in every asset, but each color should keep its role. Your dark neutral can remain the main text color. Your primary hue can remain the recognizable brand color. Your accent can remain the signal for key actions and promotional messages.

Save the palette as design tokens

Document the final color choices so the palette does not change accidentally as more assets are created. Save the names, HEX values, RGB values where needed, and usage rules in a brand guide, Figma library, Canva brand kit, CSS file, or shared document.

:root {
  --color-background: #F6F1E8;
  --color-surface: #FFFDF8;
  --color-primary: #4F7A58;
  --color-secondary: #A3B18A;
  --color-accent: #D98A2B;
  --color-text: #25241F;
  --color-muted: #77746D;
}

Common palette mistakes

• Starting with colors before defining the purpose. Choose a direction based on brand personality, audience, content, and the action you want visitors to take.
• Using too many colors. A small, role-based palette is easier to recognize, use, and maintain.
• Skipping neutral colors. Background and text neutrals are essential for readable content and visual breathing room.
• Using the accent everywhere. Limit strong accents to calls to action and high-priority information.
• Using colors from an image without filtering them. Select only the shades that fit the project and have a clear role.
• Ignoring contrast. A palette should work for body copy, buttons, links, product details, and forms—not only decorative graphics.
• Not documenting the final values. Save exact codes and usage rules so the palette remains stable across teams and channels.

Build a palette you can reuse

A custom color palette is most useful when it becomes a repeatable system. Start with a clear purpose, take inspiration from a logo, product, photo, or moodboard, and select a focused group of colors for backgrounds, text, primary brand elements, supporting details, and accents.

Test the colors in real layouts, create light and dark variations, and check contrast before publishing. Then save the approved values and usage rules for your website, social templates, email designs, advertisements, and print materials. With a practical palette in place, every new asset can look more consistent, professional, and connected to the same brand story.