Build a brand palette and preview it in website and social designs.
Palette
4 colorsEnter a valid HEX color.
Used for Primary.
Color roles
Lock a color to keep it in new palettes. Editing it updates every assigned role.
Contrast targets
Applies to body text, primary links, and button labels. Accent checks follow its intended use.
A thoughtful beginning.
Considered details. Fresh possibilities. Find a little more of what matters to you.
Good design starts with the details.
Small moments. A lasting impression.
Saved work (0)
Save your first brand setup above. Its colors and settings will be ready to reopen.
Saved on this device with its settings. Download a project to keep a backup or import it on another device.
How to build and preview a brand color palette
- In Brand Palette Generator, select a palette swatch and edit its HEX value or use the color picker. Lock any established brand colors before choosing New palette to compare supporting directions. Undo and Redo restore earlier colors and role assignments.
- Assign Primary, Accent, Background, and Text under Color roles. The primary color carries the main identity, the accent highlights selected elements, and the background/text pair supports readability. On phones, expand Brand name and color roles to edit these choices.
- Compare Website, Social, and Guide previews. Website includes a landing page, online shop, and dashboard. These layouts retain the same palette and roles, letting you see whether the colors work across different uses.
- Open Contrast targets to choose AA or AAA text requirements and specify whether the accent is decorative, an interface color, or text. Review each pairing and use an adjustment button when a combination needs more contrast.
- Copy, share, save, or export the palette. The brand guide includes role assignments, contrast checks, and a design example. Continue in Color Palette Generator or Color Blindness Simulator to refine the same colors.
For a nature-inspired brand, try green as the primary color, a warm accent, an ivory background, and dark text. Check both ordinary text and accent buttons. An accent that works as decoration may need a different shade when it carries readable text or identifies an essential control.