Color Picker
Extract exact colors from any image. Upload an image and click anywhere to get the precise color value.
Output Formats
- HEX - #FF5733 (web development, design tools)
- RGB - rgb(255, 87, 51) (CSS, programming)
- HSL - hsl(11, 100%, 60%) (CSS, color manipulation)
- CMYK - For print design reference
Features
- Zoom in for pixel-perfect color selection
- Save colors to a palette for later use
- Copy color values with one click
- View color history from current session
Gradient Generator
Create beautiful CSS gradients for web design. Build linear, radial, or conic gradients with multiple color stops.
Gradient Types
- Linear - Colors blend in a straight line at any angle
- Radial - Colors radiate outward from a center point
- Conic - Colors rotate around a center point
Customization
- Add unlimited color stops
- Adjust stop positions by dragging or entering percentages
- Set gradient angle (linear) or shape (radial)
- Preview on different sized containers
- Export as CSS code or download as image
Image Splitter (Instagram Grids)
Split a single image into multiple tiles for seamless Instagram grid posts or other creative layouts.
Grid Presets
- 1x3 - Panoramic horizontal split
- 3x1 - Vertical triptych
- 3x3 - Classic 9-image grid (most popular)
- 3x4 - 12-image extended grid
- Custom - Specify any row/column combination
How to Use for Instagram
- Upload your panoramic or large image
- Select the grid size (3x3 is most common)
- Preview how the split will look
- Download all tiles as numbered files
- Post to Instagram in reverse order (9, 8, 7... 1)
Merge Images
Combine multiple images into one. Create collages, side-by-side comparisons, or stitch images together.
Layout Options
- Horizontal - Images placed side by side
- Vertical - Images stacked top to bottom
- Grid - Arrange in rows and columns
- Overlap - Layer images on top of each other
Settings
- Gap/spacing between images
- Background color for gaps
- Resize mode (fit, fill, or original size)
- Border and padding options
- Drag to reorder images
Image Compare
Compare two images side by side or with an interactive slider. Perfect for before/after comparisons, version differences, or quality comparisons.
Comparison Modes
- Slider - Drag a divider to reveal each image
- Side by side - View both images simultaneously
- Overlay - Toggle or fade between images
- Difference - Highlight pixel differences
Use Cases
- Before and after photo edits
- Compression quality comparisons
- Design revision reviews
- Spot the difference analysis
Base64 Converter
Convert images to and from Base64 encoding. Base64 allows embedding images directly in HTML, CSS, or JSON without separate files.
Image to Base64
- Upload any image to get its Base64 string
- Copy as data URL (includes MIME type prefix)
- Copy raw Base64 string
- Output includes proper formatting for CSS or HTML embedding
Base64 to Image
- Paste a Base64 string to preview and download as image
- Automatically detects format from data URL prefix
- Validates the Base64 encoding
When to Use Base64
- Small icons and UI elements (under 10KB)
- Reducing HTTP requests for performance
- Embedding images in emails
- Including images in JSON data
Note: Base64 encoding increases data size by about 33%. Only use for small images where reducing requests outweighs size increase.
Placeholder Generator
Generate placeholder images for mockups, wireframes, and development. Create images of any size with customizable colors and text.
Options
- Dimensions - Enter any width and height
- Background color - Solid color or gradient
- Text - Display dimensions, custom text, or none
- Text color - Contrast with background
- Format - PNG, JPEG, or SVG
Common Sizes
- Thumbnail: 150x150
- Avatar: 200x200
- Card image: 400x300
- Hero banner: 1920x600
- Social share: 1200x630
Developer Tips
You can also generate placeholders via URL parameters for quick prototyping. Bookmark commonly used sizes for fast access during development.