Generate harmonious color palettes using color theory. Random, shades, brand & more. Export as CSS, JSON, or Tailwind.
| # | Swatch | HEX | RGB | HSL | On Whiteas text on white bg | On Blackas text on black bg |
|---|---|---|---|---|---|---|
| 1 | #D350A1 | rgb(211, 80, 161) | hsl(323, 60%, 57%) | 3.87:1Large only | 5.43:1Pass | |
| 2 | #63DC28 | rgb(99, 220, 40) | hsl(100, 72%, 51%) | 1.78:1Fail | 11.8:1Pass | |
| 3 | #1C22D4 | rgb(28, 34, 212) | hsl(238, 77%, 47%) | 9.42:1Pass | 2.23:1Fail | |
| 4 | #E3815F | rgb(227, 129, 95) | hsl(15, 70%, 63%) | 2.77:1Fail | 7.57:1Pass | |
| 5 | #15BC71 | rgb(21, 188, 113) | hsl(153, 80%, 41%) | 2.48:1Fail | 8.46:1Pass |
Random Palette
Generates harmonious colors using golden-angle hue spacing for visually pleasing results. Great for exploration and discovering new color combinations.
Generate beautiful, harmonious color palettes instantly with our free browser-based Color Palette Generator. Choose from nine generation modes including random, shades, brand, contrast, and five color theory modes — complementary, triadic, analogous, split-complementary, and tetradic. Export palettes as CSS custom properties, JSON, or a Tailwind configuration snippet. Everything runs locally in your browser for complete privacy. Color is one of the most powerful tools in design. A well-crafted color palette communicates brand personality, guides user attention, establishes visual hierarchy, and creates emotional resonance. Whether you are building a brand identity, designing a web application, crafting a marketing campaign, or exploring new visual directions, having a reliable palette generator saves hours of trial and error. Color theory provides a mathematical framework for selecting harmonious colors. Complementary palettes pair colors directly opposite each other on the color wheel, creating vibrant, high-contrast combinations perfect for calls-to-action. Triadic schemes use three equally spaced hues, producing balanced yet colorful palettes ideal for playful interfaces. Analogous palettes group adjacent hues for a natural, cohesive feel inspired by nature. Split-complementary and tetradic schemes add complexity while maintaining structure, suitable for rich multi-element layouts. Beyond theory, SnapBit's Shades mode generates a full lightness scale (from near-white to near-black) for any hue — ready for design system tokens or Tailwind configuration. Brand mode creates a complete system from a single brand color: primary, light variant, dark variant, neutral text, neutral background, and accent. Contrast mode builds palettes with strong accessibility-first contrast relationships. Every palette includes full WCAG 2.1 contrast ratio analysis. The color detail table shows each color's contrast ratio against white and black, with AA and AAA compliance levels displayed. Lock individual colors before regenerating to preserve favorites. Save up to ten palettes to localStorage for later reference. Copy any color in HEX, RGB, or HSL format with a single click. All processing is offline-capable and requires no account or server connection.
The tool offers Complementary, Triadic, Analogous, Split-Complementary, and Tetradic (Square) modes — each based on standard color wheel relationships used by professional designers.
The Brand mode generates a complete design-system-ready palette from your base color: a primary, light primary, dark primary, neutral text, neutral background, and an accent — ideal for building UI color tokens.
Yes. Hover over any color swatch and click the lock icon to pin that color. Subsequent generations will keep locked colors unchanged while refreshing the rest.
The color detail table shows each color's contrast ratio against both white (#FFFFFF) and black (#000000), along with its WCAG 2.1 AA compliance level for normal and large text.
Click the Export button and choose CSS Variables (.css), JSON (.json), or Tailwind Config (.js). Each format is ready to paste directly into your project.
No. Saved palettes are stored entirely in your browser's localStorage. Nothing is uploaded or sent to any server.
Your data never leaves your browser. All processing is done locally on your machine, ensuring maximum security and speed. No server calls, no tracking, no risk.
Crafted with care by sidme