Online Tool Store
92 Articles
Design & Color
Articles filed under Design & Color.
Showing 64–84 of 92 articles
📐 Design & Color
How to Check a Photo's Composition With a Rule-of-Thirds Grid
Overlay a rule-of-thirds grid and power points on any photo to check composition, then download the result, for stronger, more balanced framing.
🎨 Design & Color
How to Fix a Color Palette to Pass WCAG Contrast
Check a text and background color pair against WCAG contrast requirements and get an automatic fix when it fails, without guessing at hex codes by eye.
🎨 Design & Color
How to Generate a Harmonious Color Palette
Generate a harmonious 5-color palette from any base color using monochromatic, analogous, complementary, triadic, or split-complementary color theory.
🎨 Design & Color
How to Generate a Seamless Grain Texture for Backgrounds
Generate a seamless, customizable grain texture from any base color, opacity, and tile size, and download it as a PNG, for subtle depth on flat backgrounds.
🔤 Design & Color
How to Pick the Right Line Height for Your Font Size
Get a recommended line-height ratio and CSS snippet from a font size and content type, with a live preview, instead of guessing at leading values.
🖱️ Design & Color
How to Preview CSS Cursor Styles Before Shipping Them
Preview built-in CSS cursor styles or your own custom cursor image, and copy the resulting CSS, without guessing how a cursor property will actually render.
🔠 Design & Color
How to Preview CSS Letter-Spacing Before You Ship It
Preview letter-spacing, font size, and weight on live text, and copy the resulting CSS, without a cycle of editing your stylesheet and refreshing to check.
🖍️ Design & Color
How to Recolor and Flip an SVG Icon
Recolor, rotate, and flip a small set of built-in SVG icons, then export as SVG or PNG, without opening a full design app for a one-icon tweak.
📐 Design & Color
How to Resize an Image and Keep the Aspect Ratio
Solve for a missing image width or height while keeping the exact same aspect ratio, with the simplified ratio shown, so resized photos never look stretched.
🌈 Design & Color
How to Turn Two Colors Into a Gradient Palette
Generate a CSS gradient and an evenly spaced color palette between two colors, with adjustable angle and step count, for consistent design work.
🎨 Design & Color
How to use CSS Box Shadow Generator for a real task
Use a css box shadow generator to handle the details clearly, check your result before sharing it, and finish the task privately in your browser with CSS Box.
🎨 Design & Color
How to use Design Token Exporter for a real task
Use a design token exporter to handle the details clearly, check your result before sharing it, and finish the task privately in your browser with Design Token.
🎨 Design & Color
How to use Duotone Generator for a real task
Use a duotone generator to handle the details clearly, check your result before sharing it, and finish the task privately in your browser with Duotone.
🎨 Design & Color
How to use Font Pairing Tool for a real task
Use a font pairing tool to handle the details clearly, check your result before sharing it, and finish the task privately in your browser with Font Pairing.
🎨 Design & Color
A practical Google Fonts Pairing Previewer guide
Use a google fonts pairing previewer to handle the details clearly, check your result before sharing it, and finish the task privately in your browser with.
🎨 Design & Color
How to use Isometric Grid Generator for a real task
Use a isometric grid generator to handle the details clearly, check your result before sharing it, and finish the task privately in your browser with Isometric.
🎨 Design & Color
How to use Logo Size Guide for a real task
Use a logo size guide to handle the details clearly, check your result before sharing it, and finish the task privately in your browser with Logo Size.
🎨 Design & Color
How to use Material Color Reference for a real task
Use a material color reference to handle the details clearly, check your result before sharing it, and finish the task privately in your browser with Material.
🎨 Design & Color
How to use Poster Mockup Tool for a real task
Use a poster mockup tool to handle the details clearly, check your result before sharing it, and finish the task privately in your browser with Poster Mockup.
🎨 Design & Color
How to use Redacted Screenshot Maker for a real task
Use a redacted screenshot maker to handle the details clearly, check your result before sharing it, and finish the task privately in your browser with Redacted.
🎨 Design & Color
How to use Screenshot Beautifier for a real task
Use a screenshot beautifier to handle the details clearly, check your result before sharing it, and finish the task privately in your browser with Screenshot.