Material Design 3 Color Generator - Online Dynamic Tonal Palettes
Pick a source color and generate a complete M3 tonal palette with light/dark schemes. Export as CSS custom properties.
UD5 Toolkit
Pick a source color and generate a complete M3 tonal palette with light/dark schemes. Export as CSS custom properties.
Select emotions (calm, energetic, sad) and generate a harmonious color palette that reflects the mood.
Answer questions about your natural hair, eye, and skin coloring to guess your seasonal color type (Winter, Summer, Autumn, Spring). See your best colors.
Enter a color palette and see how it looks for different types of color vision deficiency. Get warnings on conflicting colors.
Pick a base color and generate a full palette of 10 shades (50 to 900) like Tailwind CSS. Copy as hex or hsl.
Discover beautiful color palettes for your projects. Generate random, complementary, or trendy schemes and copy hex codes. Useful for designers and developers.
Mix and save colors using a color picker. Drag to reorder. Export as CSS variables or hex list.
Get a beautiful, hand‑picked color combination instead of purely random. Each palette has a name and copyable hex codes.
Write modern CSS color functions like oklch(), lab(), hwb() and see the rendered color with fallback. Copy compatible code.
Grid of all 148 named CSS colors. Hover to see detail, click to copy the name or hex. Essential frontend reference.
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.
Build a palette and simulate how it appears to various color deficiencies. Also generate pre-vetted accessible palettes. Local processing.
Paste hex colors, generate a contrast matrix against each other. Identify failing pairs for WCAG.
Fetch a website's CSS and extract :root custom properties (‑‑color) to reveal its design token palette. For learning and inspiration.
Paste a list of hex colors and generate CSS custom properties for them. Create your design token file instantly.
Type a CSS color name like 'tomato' or 'mediumseagreen' and instantly get its hex code and preview. Complete named colors list.
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.
Build a color palette for charts that works for protanopia, deuteranopia, and grayscale. Export as array.
Enter an image URL to extract a 5-color dominant palette. Avoids uploading files. Uses canvas to read remote image pixels. Fast and privacy-oriented.
Generate a palette of N colors that are maximally distinguishable for common color vision deficiencies. Copy the hex codes.
Paste an image from your clipboard directly into the page (Ctrl+V) and extract its color palette. No file dialog needed.
Paste a set of hex colors and simulate how they appear with common color vision deficiencies. Get contrast warnings.
Paste a direct link to an image and get its 5 dominant colors with hex codes. No upload, uses canvas with CORS proxy.
Upload any picture and instantly get a 5‑color palette. Useful for UI design themes. Canvas‑based extraction.
A dedicated color picker with common retro gaming palettes (NES, Gameboy). Pick and copy hex codes. For pixel art creators.
Choose a base color and see its complementary, split‑complementary, triadic, and tetradic harmonies. Copy palettes. Local.
Enter the URL of any image and receive a random harmonious palette extracted from it. Click to regen. For quick inspiration.
Create a realistic‑looking user persona card with a name, photo placeholder, quote, and demographics. Perfect for design projects.
Search a library of famous company brand colors with hex codes. Copy any color instantly. For designers and marketers.
Create a 'SALE' or 'NEW' corner ribbon in pure CSS. Adjust colors, position, and text. Great for e‑commerce.