Online Tool Store
98 Articles
Design & Color
Articles filed under Design & Color.
Showing 43–63 of 98 articles
🎯 Design & Color
How to Combine SVG Icons Into One Sprite
Merge SVG icons into a single symbol sprite with stable IDs and currentColor, so icons load in one request and inherit colour from CSS.
◻️ Design & Color
How to Create a Consistent CSS Shadow Scale
Use a UI shadow scale generator to create consistent CSS elevation levels from a base shadow color and softness setting, then copy the complete system.
🎨 Design & Color
How to Create a Soft Mesh Gradient Background
Use a mesh gradient generator to blend four colors, adjust softness, preview a modern background, and copy a reusable browser-generated CSS style recipe.
🎨 Design & Color
How to Create a Striped CSS Background
Use a stripe pattern maker to adjust colors, angle, stripe width, and spacing in a live preview, then copy a reusable repeating CSS gradient for your design.
🎨 Design & Color
How to Design a Striped Background With CSS
Design a striped background online free, preview angles and spacing, and copy a clean CSS pattern without guessing at repeating gradients.
🌈 Design & Color
How to Explore Palettes With Locked Swatches
Use random palette inspiration to lock favorite swatches, reroll the remaining colors, and copy hex values while developing a coherent visual direction.
🎨 Design & Color
How to Find the Right Tailwind Color Shade Fast
Look up Tailwind color shades and copy the hex value in one click, plus how to choose between adjacent steps without guessing at slate-600 versus slate-700.
📄 Design & Color
How to Generate a Procedural Paper Texture Background
Generate a unique procedural paper texture with adjustable base color, grain, and fiber streaks, downloadable as a PNG, without stock photo licensing.
🧱 Design & Color
How to Generate Grey-Box Wireframe Layouts for Mockups
Generate grey-box wireframe layouts - landing page, dashboard, article, mobile - with a customizable accent color, downloadable as a PNG.
😄 Design & Color
How to Mix Two Emoji Into One Sticker
Combine two emoji into a single mashup sticker for chats and captions, and learn where these mixes work, where they break, and how to save one you like.
🔤 Design & Color
How to Narrow Down an Unknown Font Style
Use a font identifier helper to answer visual questions about serifs and overall mood, then narrow an unknown typeface to useful style categories and options.
🖼️ Design & Color
How to Plan a Gallery Wall Before You Drill
Lay out framed pictures with a consistent centre line and gap, and mark hook positions rather than frame corners so nothing hangs crooked.
📐 Design & Color
How to Preview a Design at Standard Responsive Breakpoints
Preview a page at standard responsive breakpoints - mobile, tablet, laptop, and desktop widths - in an embedded frame, before shipping the layout.
👕 Design & Color
Preview a Design on a T-Shirt Before Printing
See how artwork will look on a shirt before you pay for a print run, including how to judge placement, scale and color against the garment you actually chose.
☕ Design & Color
How to Preview a Logo on a Mug Mockup
Upload a logo or design and preview it on a mug mockup in any color, downloadable as a PNG, before ordering or presenting to a client.
🎨 Design & Color
How to Pull a Color Palette From a Logo
Upload a logo or image to extract its dominant colors as hex swatches, analyzed entirely with canvas pixel data in your browser, for brand consistency.
🎨 Design & Color
How to Use a Diverse Skin Tone Palette Reference
Use a curated reference palette of 14 diverse skin tone swatches with names and hex codes, click to copy, for illustrators and character designers.
🎨 Design & Color
How to Blend Two Hex Colors at Any Ratio
Mix two HEX colors at any ratio using linear-light blending for a natural-looking result, with instant HEX and RGB output for design work in your browser.
🎨 Design & Color
How to Build CSS Border Radius Shapes
Use a CSS border radius generator to create rounded corners, elliptical radii, slash syntax, and responsive preview shapes.
🎨 Design & Color
How to Design a Business Card Mockup
Use a business card mockup tool to design both sides with US, ISO, or Japanese sizes, bleed guides, SVG export, and 300 dpi PNG.
🎮 Design & Color
How to Draw Pixel Art With a Fixed Color Palette
Draw pixel art on a 16x16 grid with a fixed color palette and eraser, then export your artwork as a PNG, without a heavyweight design app.