Website Color Palette Generator
Balanced palettes tuned for marketing sites and product UI — primary, accent and neutrals that work together.
CSS variables
:root {
--color-1: #8436E2;
--color-2: #C152E0;
--color-3: #F7F6F8;
--color-4: #7E738C;
--color-5: #322640;
}Tailwind config
// tailwind.config.js
export default {
theme: {
extend: {
colors: {
brand1: "#8436E2",
brand2: "#C152E0",
brand3: "#F7F6F8",
brand4: "#7E738C",
brand5: "#322640",
},
},
},
};About website color palette generator
A website palette has to do double duty — it has to make a marketing page convert and make a product page feel calm and trustworthy. Those two jobs pull in opposite directions. Marketing sites benefit from a saturated primary that pulls attention to CTAs; product UIs benefit from neutrals that let user content take focus. The trick is a palette that has both a loud signature color and a deep neutral scale, so the same tokens can scale up the volume on landing pages and dial it back inside the app.
Most successful website palettes follow a 60-30-10 distribution: 60% neutral (backgrounds, surfaces, large blocks), 30% secondary or muted brand color (sectioning, subtle highlights, dividers) and 10% saturated primary (CTAs, key links, highlights, emphasis). This ratio is also a useful audit — if you look at a competitor's landing page and the primary brand color is everywhere, the palette is mis-balanced and the page reads as overstimulating.
Modern landing-page patterns also lean on subtle gradients between two adjacent palette hues for hero backgrounds, and use a slightly off-white surface (#FAFAFA, #F8FAFC) rather than pure white for body content. That tiny drop in lightness reduces glare on long pages and lets cards and modals sit cleanly on top with a true white surface.
Frequently asked questions
What palette is best for landing pages?+
One strong primary for CTAs, one secondary accent for sectioning and highlights, and three neutrals — a near-white background, a slightly off-white surface and a near-black for text. The 60-30-10 rule is a good audit: 60% neutral, 30% secondary, 10% primary. If your primary is on more than 10% of the page, the palette is over-using it.
Should the primary be vivid or subtle?+
Vivid enough to be unmissable on CTAs, but not so saturated that it tires the eye. Mid-range saturation around 60-75% usually wins. If the primary is too subtle, conversion suffers because the CTA blends into the page; if it is too loud, the rest of the design feels noisy and visitors' eyes bounce.
How does this differ from a brand palette?+
A brand palette defines identity across all media. A website palette is a working subset tuned specifically for screens and conversion. The website palette inherits from the brand palette but may include screen-only adjustments — slightly desaturated primaries to reduce eye fatigue, off-white surfaces, and additional neutral steps for surface elevation.
Should marketing site and app share the same palette?+
Yes for the brand colors (primary, accent, neutrals), but the application of them should differ. Marketing pages can use the primary at 10-15% of the surface area for hero blocks, gradients and CTAs; the app should use it under 5%, reserving it for buttons and key links so user content stays the focus.
Are gradients OK for backgrounds?+
Subtle gradients between adjacent palette hues work well for hero sections and feature blocks. Avoid high-contrast gradients (fully saturated complementary colors) because they dominate the page. Keep gradient hue rotation under 60° and lightness range modest (10-20%) for a refined look.