Online Tool Store
98 Articles
Design & Color
Articles filed under Design & Color.
Showing 64–84 of 98 articles
🎨 Design & Color
How to Explore Color Schemes on an Interactive Color Wheel
Explore complementary, triadic, and analogous color schemes on an interactive color wheel, starting from any HEX color, with click-to-copy swatches.
🎨 Design & Color
How to Pick a Color From Anywhere on Your Screen
Pick a color from anywhere on your screen using the browser's native EyeDropper API, with instant HEX and RGB values and a manual fallback if needed.
🎨 Design & Color
How to Turn a Color Into a Pantone-Style Swatch Card
Generate a fun, Pantone-inspired color swatch card with an auto-generated name and code, downloadable as a PNG, for design mood boards and social posts.
🌡️ Design & Color
How to Warm or Cool an Entire Color Palette
Shift any color warmer or cooler with a slider and get a ready-to-use 5-shade ramp in hex, for design work that needs a consistent temperature adjustment.
🎨 Design & Color
How to Arrange a Moodboard From Images and Colors
Drag and drop images and color swatches onto a board to compose a moodboard, then export it as a PNG, for design pitches and creative planning.
🧊 Design & Color
How to Build a Frosted-Glass CSS Card
Design a frosted-glass card with live sliders for blur, opacity, radius, and border, previewed over a real gradient, then copy the CSS declaration directly.
📐 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.