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.
Design Token Generator – Export Colors, Spacing & Typography
Define and export design tokens for your project. Choose colors, spacing, and fonts, then download as CSS custom properties, JSON, or SCSS variables.
Accessible Color Contrast Matrix – Online Paste Palette & Check
Paste hex colors, generate a contrast matrix against each other. Identify failing pairs for WCAG.
Seasonal Color Analysis – Find Your Palette with a Quiz
Answer questions about your natural hair, eye, and skin coloring to guess your seasonal color type (Winter, Summer, Autumn, Spring). See your best colors.
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.
LEGO Color Chart & Hex Reference – Online BrickLink Colors
Browse all official LEGO colors with names, years, and hex codes. Sort by hue. Perfect for builders.
Default Wi‑Fi Password Calculator - Online ISP Router Keygen
Enter a router's MAC address or serial and generate the common default WPA passphrase for major ISP brands. Educational purpose only.
Shadcn/UI Theme Builder - Online Custom CSS Variables
Pick colors for the shadcn/ui design system and generate the complete CSS variable theme file. Copy into your project.
Relative Luminance Calculator - Online WCAG Metrics
Enter a hex color and get its relative luminance per WCAG definition. Understand why this matters for contrast.
Text to Anki CSV - Online Flashcard Converter
Format a list of Q&A pairs and export as a CSV ready for Anki import. Simple line‑based template. Local.
Text Decoration CSS Generator - Online Underline & Strike
Style underlines, overlines, and strike-throughs with colors, wavy styles, and thickness. Modern CSS text‑decoration.
Color to CIELAB Converter - Online Perceptual Space
Convert hex or RGB to CIELAB L*a*b* values. Understand perceptual lightness and color opponents. Local math.
Random Medieval Profession - Online RPG Background
Generate a random medieval occupation with a short description. For NPCs or historical curiosity. Local list.
Noir Plot Generator - Online Hardboiled Story
Generate a hardboiled film noir plot with a detective, a dame, and a McGuffin. Great for creative writing prompts.
Fancy Title Generator - Online Royal & Noble Names
Generate a grand, aristocratic title like 'Duke of Waffleshire'. Perfect for silly fun or RPG characters. Local.
CSS Glow Hover Effect - Online Animated Box Shadow
Design a button or card that glows on hover. Adjust shadow color, spread, and transition. Copy the CSS. Rich UI.
CSS Letterpress Text Effect - Online Inset Typography
Create a realistic letterpress (debossed) text effect using CSS text‑shadow and background. Adjust depth and light direction. Copy code.