92 Articles
Design & Color
Articles filed under Design & Color.
Showing 22–42 of 92 articles
text Design & Color
How to Use Color Blend Mode Previewer
Use color blend mode previewer to finish the task faster in your browser with a clear workflow, practical checks, and a result you can trust.
🎨 Design & Color
Eggshell vs Satin vs Semi-Gloss: Which Paint Sheen?
Compare flat, matte, eggshell, satin, semi-gloss, and gloss paint sheens side by side — durability, washability, light reflection — by room.
🖨️ Design & Color
How to Calculate Bleed and Margin for a Print Layout
Enter a trim size and bleed amount to compute the full bleed dimensions, safe margin box, and a scaled diagram ready to hand off to a print shop.
🎨 Design & Color
How to Find Your Color Season and Best Palette
Answer a few questions about your skin, hair, and eye tone to get an estimated color season with a matching palette, entirely in your browser.
🎨 Design & Color
How to Fix a Palette That Fails Colour Blind Tests
Test a palette against common colour vision deficiencies and separate colliding colours by lightness, which survives every deficiency and greyscale printing.
🧱 Design & Color
How to Generate a Responsive CSS Grid Layout Fast
Configure a column count, gutter, container width, and margin to generate ready-to-use CSS Grid layout code, with an instant visual preview.
🖌️ Design & Color
How to Keep an Illustration Set Consistent
Write a style specification from a reference illustration so a set stays coherent, covering line weight, palette, perspective and what to avoid.
📰 Design & Color
How to Work Out Imposition for a Zine
Lay out zine pages so they print in the right order for folding, understand the saddle stitch pairing rule, and always fold a test before the real stock.
✨ Design & Color
How to Animate an SVG With CSS Keyframes
Animate SVG paths with CSS — draw-on strokes, fades, transforms — using the correct path length and a reduced-motion guard that respects the OS setting.
🎞️ Design & Color
How to Build a Colour Grading LUT
Create a .cube LUT from lift, gamma and gain adjustments, choose a grid size that avoids banding, and apply it at the right point in the pipeline.
code Design & Color
How to Convert Text Into SVG Outlines
Convert text into SVG path-style output for logo mockups and vector layouts when you want text outlines instead of editable type.
palette Design & Color
How to Map Colors to a Retro Palette
Convert modern colors into an 8-bit style palette and preview the closest retro matches locally for nostalgic design work.
💄 Design & Color
How to Work Out Your Skin Undertone
Identify warm, cool or neutral undertone using several indicators together, and understand why undertone and skin tone are different things.
🔠 Design & Color
How to Build a Modular Type Scale for Your Site
Generate a modular typography scale with CSS output, choose a ratio that suits your layout, and stop picking font sizes one component at a time.
🎨 Design & Color
How to Build a Tint and Shade Scale From One Color
Generate a consistent set of tints and shades from a single brand color, and learn how to build a UI color ramp that stays readable at every step.
🎯 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.