UD5 Toolkit
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.
Material Design 3 Color Generator - Online Dynamic Tonal Palettes
Material Design 3 Color Generator
Dynamic Tonal Palettes — powered by seed color
Preset Seed Colors
Live UI Preview
Primary Container
On Surface Text
Frequently Asked Questions
A tonal palette is a range of colors derived from a single seed color, spanning from tone 0 (near white) to tone 100 (near black). Material Design 3 uses the HCT color space (Hue, Chroma, Tone) to generate harmonious palettes where chroma peaks at mid-tones and tapers off toward both ends. Each tone value represents a specific lightness level, allowing designers and developers to create accessible, cohesive color schemes.
Primary is the main brand color used for key UI elements like buttons, active states, and prominent surfaces. Secondary complements the primary with a hue shift (~30°), used for less prominent components like filter chips. Tertiary provides additional accent colors (~60° hue shift) for contrasting elements like selection controls. Neutral and Neutral Variant are low-chroma palettes for backgrounds, surfaces, and outlines.
Click the "Copy CSS Tokens" button to get the full set of Material Design 3 CSS custom properties. These tokens follow the
--md-sys-color-* naming convention used in Google's official M3 implementation. You can paste them directly into your :root block. Key tokens include: --md-sys-color-primary (tone 40), --md-sys-color-primary-container (tone 90), --md-sys-color-on-primary (tone 100), and their on-container variants. Individual swatches can be clicked to copy their HEX code.
HCT stands for Hue, Chroma, Tone — a perceptually uniform color space developed by Google for Material Design 3. Unlike HSL or HSV, HCT ensures that colors with the same Tone value appear equally light to the human eye regardless of their hue or chroma. Tone 0 is pure white, Tone 100 is pure black, and intermediate tones maintain perceptual uniformity. This makes HCT ideal for accessibility and creating balanced color schemes.
Yes! Click any swatch to copy its HEX code, then paste it into Figma, Sketch, or Adobe XD. The Copy CSS Tokens button provides a complete set of M3 tokens ready for use in code. For bulk export, you can also use browser DevTools to inspect the generated palette data. Many design systems also accept M3 token JSON formats — the HEX values here are fully compatible.
Copied!
Stepped Color Shade Generator - Online Tailwind‑Style Palette
Pick a base color and generate a full palette of 10 shades (50 to 900) like Tailwind CSS. Copy as hex or hsl.
Random Color Generator - Online Hex & RGB Palette
Generate single random colors or full palettes. Displays hex, RGB, and copy on click. Great for design inspiration.
Curated Random Color Palette - Online Designer‑Approved Sets
Get a beautiful, hand‑picked color combination instead of purely random. Each palette has a name and copyable hex codes.
Color Scale Generator - Online Create Monochromatic Stops
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.
Emotion to Color Palette – Online Pick Mood & Get Hex
Select emotions (calm, energetic, sad) and generate a harmonious color palette that reflects the mood.
Color Swatch to CSS - Online Palette to Variables
Paste a list of hex colors and generate CSS custom properties for them. Create your design token file instantly.
Color Swatch Collector – Online Build Your Own Palette
Mix and save colors using a color picker. Drag to reorder. Export as CSS variables or hex list.
Colorblind Friendly Palette Checker - Online Simulate & Advise
Enter a color palette and see how it looks for different types of color vision deficiency. Get warnings on conflicting colors.
Color Trend Inspector - Online Pick Year & See Palette
See the Pantone Colors of the Year and popular palettes from past years. Get hex codes. Design inspiration.
Colorblind-Safe Palette Builder - Online Check & Generate Schemes
Build a palette and simulate how it appears to various color deficiencies. Also generate pre-vetted accessible palettes. Local processing.
Random Accessible Palette Generator - Online WCAG Safe
Generate a random 5‑color palette where every adjacent pair passes WCAG AA contrast. Safe for inclusive designs.
WCAG Safe Palette Builder - Online Accessible Color Sets
Start with a base color and generate an extended palette where every shade contrasts properly with white and black. Export tokens.
Website Color Theme Extractor - Online Grab Palette from CSS
Fetch a website's CSS and extract :root custom properties (‑‑color) to reveal its design token palette. For learning and inspiration.
Accessible Color Contrast Matrix – Online Paste Palette & Check
Paste hex colors, generate a contrast matrix against each other. Identify failing pairs for WCAG.
color() Display‑P3 Generator - Online Wide Gamut CSS
Pick a color in the Display‑P3 space and get the CSS color() function. See the difference from sRGB. For modern design.
Color Harmony Picker - Online Complementary Split‑Comp
Choose a base color and see its complementary, split‑complementary, triadic, and tetradic harmonies. Copy palettes. Local.
CSS HWB Color Generator - Online Whiteness/Blackness Picker
Interactively create colors in HWB space and get the CSS hwb() function. Simplifies tint/shade workflows. Live preview.
CSS Color Extractor - Online Find All Hex in Stylesheet
Paste a stylesheet and extract every unique color (hex, rgb, hsl) into a palette. Swatches displayed. Copy as JSON.
CSS color‑mix() Function Playground - Online Tester
Dynamically blend two colors using the CSS color‑mix() function in different color spaces. Copy the exact CSS snippet. No JS required.
CSS Color Function Explorer - Online Write Modern Colors
Write modern CSS color functions like oklch(), lab(), hwb() and see the rendered color with fallback. Copy compatible code.
Named CSS Colors Explorer - Online Preview All 148
Grid of all 148 named CSS colors. Hover to see detail, click to copy the name or hex. Essential frontend reference.
Advanced Color Contrast Matrix – Test All Pairs in Palette
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.
CSS Variable Theme Switcher - Online Dark/Light Generator
Design a light and dark theme by picking colors for backgrounds, text, and links. Get the CSS for both themes. Local.
Color Name to Hex - Online Official CSS Colors
Type a CSS color name like 'tomato' or 'mediumseagreen' and instantly get its hex code and preview. Complete named colors list.
Cocktail Recipe by Color - Online Pick Your Hue
Select a color and see which cocktails match it roughly. Blue for Blue Lagoon, red for Negroni. Fun bar guide.
light‑dark() Function Tester - Online Color Switch
Use the light‑dark() CSS function to change colors based on color scheme. Build a simple dark mode toggle with one property.
Online Color Picker - Eye Dropper & Color Selection Tool
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.
HWB Color Picker - Online Whiteness & Blackness Model
Pick colors using the HWB (Hue‑Whiteness‑Blackness) model. Get the CSS hwb() function code. Simpler than HSL for some.
Image Color Palette Extractor - Online Upload & Get Hex
Upload an image and instantly get a 6‑color palette with the most dominant shades. Click to copy hex codes. Canvas‑based.