UD5 Toolkit
Comic Page Layout Designer – Drag & Drop Panels
Build a comic page by arranging resizable panels on a grid. Export as a printable outline to sketch your story.
Color Harmony Chooser - Online Complementary & Triadic
Color Harmony Chooser
Pick a base color and explore complementary, triadic, analogous & more harmonies instantly.
Preview in UI
Button
Primary button
Accent
Accent button
Card background
Card / section
Light background
Light tone
Frequently Asked Questions
Color harmony refers to a visually pleasing arrangement of colors, often based on their positions on the color wheel. It helps designers create balanced and appealing palettes for UI, branding, and art.
Complementary colors are opposite each other on the color wheel (180° hue shift). They create high contrast and vibrant looks, especially when one is used as accent.
Triadic uses three colors evenly spaced (120° apart). Analogous uses colors next to each other (usually ±30°), creating a serene and comfortable design.
Yes! Click on any color swatch to copy its HEX code. You can also see RGB and HSL values right below each swatch.
Absolutely. The layout adapts to all screen sizes, so you can create color schemes on your phone or tablet just as easily.
HEX copied to clipboard
Font Mood Matcher – Find Fonts by Emotion & Style
Choose a mood (elegant, playful, modern, classic) and see a curated list of free Google Fonts that match. Copy the @import code for immediate use.
Empathy Map Creator – Online UX Design Thinking Tool
Fill in says, thinks, does, feels quadrants for a user persona. Save locally or print.
Color to Emotion Visualizer - Online Interactive Wheel
Click colors on an interactive wheel and see the common emotions and meanings associated with them. A design resource.
Color to Emotion Reference - Online Psychology Quick Guide
Click any color to see common emotional associations and cultural meanings. Quick design reference.
UI Design Prompt Generator - Online Practice Ideas
Get a random UI challenge (e.g., 'Design a checkout flow for a plant shop') to practice your skills. All local.
Color Harmony Picker - Online Complementary Split‑Comp
Choose a base color and see its complementary, split‑complementary, triadic, and tetradic harmonies. Copy palettes. Local.
Fake User Persona Generator - Online UX Placeholder
Create a realistic‑looking user persona card with a name, photo placeholder, quote, and demographics. Perfect for design projects.
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.
CSS Ribbon Generator - Online Corner Banner Design
Create a 'SALE' or 'NEW' corner ribbon in pure CSS. Adjust colors, position, and text. Great for e‑commerce.
Font Pairing Suggestions - Online Google Fonts Recommender
Select a heading font and get recommended body font pairings. Live preview with sample text. Copy the CSS import links.
Golden Ratio Calculator - Online Find Balanced Proportions
Enter a number to find its golden ratio long and short segments. Use for pleasing design layouts. Instant.
Color Meaning by Culture - Online Cross‑Cultural Reference
See how a color is interpreted in different cultures (e.g., red in China vs. Western). Crucial for global web design. Static guide.
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 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.
Border Radius CSS Generator - Online Rounded Corners Tool
Easily create asymmetric border radius values and preview the result. Copy the generated CSS instantly. All interactively and browser-based.
Box Shadow CSS Generator - Online Shadow Effect Designer
Design layered box shadows interactively and get the CSS code in real time. Adjust offset, blur, spread, and color. Essential tool for UI designers.