Color Palette Generator - Online Random & Harmonious Colors
Discover beautiful color palettes for your projects. Generate random, complementary, or trendy schemes and copy hex codes. Useful for designers and developers.
UD5 Toolkit
Designer‑approved color sets · Click to copy · Lock colors you love
🎯 Designer Presets — Click to load:
📋 Recent Palettes (stored locally):
Curated palettes are generated using color-theory rules — hues are distributed using golden‑ratio spacing, saturation is kept within 35–75%, and lightness between 22–72%. This avoids extremes (neon or muddy tones) and ensures every set is visually usable for UI design, branding, or illustration right out of the box.
We support six modes: Curated Random (algorithmic, balanced), Analogous (adjacent hues, serene), Complementary (opposite hues, high contrast), Triadic (three evenly spaced hues, vibrant), Split‑Complementary (one base + two near‑opposites, versatile), and Monochromatic (single hue, varied lightness — elegant and minimal).
Click the icon on any color card. Once locked, that color stays fixed when you generate a new palette. Locked colors show a solid lock icon . Use "Unlock All" to release all locks.
The small badge on each color card shows its WCAG contrast ratio against white. "AAA" means ≥7:1 (excellent readability), "AA" means ≥4.5:1 (good for normal text), "AA-lg" means ≥3:1 (acceptable for large text only). This helps you quickly judge if a color works for text or UI elements.
Yes! Use the "Copy All" dropdown to export as HEX array (ready for code), CSS custom properties (copy‑paste into your stylesheet), or RGB values. You can also click any individual color to copy its HEX code instantly.
It picks a random starting hue, then spaces subsequent hues using the golden ratio (≈137.5°) to ensure natural variation. Saturation and lightness are clamped to designer‑friendly ranges. An additional check prevents any two adjacent colors from being too similar (minimum ΔE perceptual difference). The result feels spontaneous yet harmonious — like a designer hand‑picked the set.
Absolutely. All generated palettes are free to use in any project — commercial, personal, open‑source, or client work. No attribution required. Colors themselves cannot be copyrighted, and our algorithmic generation creates unique combinations each time.
Discover beautiful color palettes for your projects. Generate random, complementary, or trendy schemes and copy hex codes. Useful for designers and developers.
Generate single random colors or full palettes. Displays hex, RGB, and copy on click. Great for design inspiration.
Pick a source color and generate a complete M3 tonal palette with light/dark schemes. Export as CSS custom properties.
Enter a color palette and see how it looks for different types of color vision deficiency. Get warnings on conflicting colors.
Start with a base color and generate an extended palette where every shade contrasts properly with white and black. Export tokens.
Generate a random 5‑color palette where every adjacent pair passes WCAG AA contrast. Safe for inclusive designs.
Mix and save colors using a color picker. Drag to reorder. Export as CSS variables or hex list.
Build a palette and simulate how it appears to various color deficiencies. Also generate pre-vetted accessible palettes. Local processing.
Pick a base color and generate a full palette of 10 shades (50 to 900) like Tailwind CSS. Copy as hex or hsl.
Paste a list of hex colors and generate CSS custom properties for them. Create your design token file instantly.
See the Pantone Colors of the Year and popular palettes from past years. Get hex codes. Design inspiration.
Generate a range of tints and shades from a single hex color. Ideal for data visualization, UI design systems, and Tailwind custom palette creation. Local tool.
Grid of all 148 named CSS colors. Hover to see detail, click to copy the name or hex. Essential frontend reference.
Select emotions (calm, energetic, sad) and generate a harmonious color palette that reflects the mood.
Fetch a website's CSS and extract :root custom properties (‑‑color) to reveal its design token palette. For learning and inspiration.
Paste hex colors, generate a contrast matrix against each other. Identify failing pairs for WCAG.
Select a color and see which cocktails match it roughly. Blue for Blue Lagoon, red for Negroni. Fun bar guide.
Type a CSS color name like 'tomato' or 'mediumseagreen' and instantly get its hex code and preview. Complete named colors list.
Pick colors from a palette or use the eye dropper to sample colors from your screen. Converts between HEX, RGB, HSL. An essential tool for designers.
Paste a stylesheet and extract every unique color (hex, rgb, hsl) into a palette. Swatches displayed. Copy as JSON.
Paste a list of hex colors and see a grid showing the contrast ratio for every combination. Instantly identifies which pairs pass WCAG AA/AAA.
A complete, searchable list of all 140+ named HTML/CSS colors with their hex codes and color previews. Click to copy code. Essential web reference.
Choose a base color and see its complementary, split‑complementary, triadic, and tetradic harmonies. Copy palettes. Local.
Interactively create colors in HWB space and get the CSS hwb() function. Simplifies tint/shade workflows. Live preview.
Write modern CSS color functions like oklch(), lab(), hwb() and see the rendered color with fallback. Copy compatible code.
Classic HSV color wheel with sliders. See hex, RGB, and HSL equivalents. Intuitive for artists. No server interaction.
Pick colors using the HWB (Hue‑Whiteness‑Blackness) model. Get the CSS hwb() function code. Simpler than HSL for some.
Upload an image and instantly get a 6‑color palette with the most dominant shades. Click to copy hex codes. Canvas‑based.
Dynamically blend two colors using the CSS color‑mix() function in different color spaces. Copy the exact CSS snippet. No JS required.
Find the official name of any hex color from the extended color dictionary. Search by name to get the hex code. Handy for CSS and design language.