🛠️ Utilifyer
Home Color & Design
🎨

Color & Design

Color pickers, palette generators, contrast checkers, and design utilities.

16 free tools

🎨
Color Picker & Converter
Pick any color and get HEX, RGB, HSL, and HSB values instantly.
🎨
Color Converter
Convert colors between HEX, RGB, HSL, HSV, CMYK, and CSS formats instantly. Pick a color visually and get all color codes at once.
🖌️
Color Palette Generator
Generate beautiful color palettes from any base color. Create complementary, analogous, triadic, split-complementary, and monochromatic color schemes.
Color Contrast Checker
Check color contrast ratios for WCAG 2.1 accessibility compliance. Test AA and AAA levels for normal text, large text, and UI components.
🌈
CSS Gradient Generator
Generate beautiful CSS gradients visually. Create linear, radial, and conic gradients with multiple color stops and copy the CSS code instantly.
💉
Image Color Picker
Upload an image and click anywhere to pick colors. Extract the dominant color palette from any image and get HEX, RGB, and HSL codes instantly.
🔲
CSS Box Shadow Generator
Generate CSS box-shadow code visually with live preview. Adjust offset, blur, spread, color, and opacity. Add multiple shadows and copy the CSS.
CSS Border Radius Generator
Generate CSS border-radius values visually. Create circles, pills, asymmetric shapes, and custom curved corners with live preview and CSS code output.
🔺
CSS Triangle Generator
Generate CSS triangles using the border trick. Create arrows and triangle shapes in any direction, size, and color without images or SVG.
🔤
Typography Scale Generator
Generate a harmonious typography scale for your design system. Choose a base font size and scale ratio to create consistent heading and body text sizes.
Favicon Generator
Generate favicons from text, emoji, or simple shapes. Create favicon.ico and PNG files in all required sizes for browsers and devices.
📐
Aspect Ratio Calculator
Calculate and maintain aspect ratios for images, videos, and screen sizes. Find width or height for any aspect ratio. Common ratios: 16:9, 4:3, 1:1, 21:9.
🖥️
Screen Resolution Tester
Check your current screen resolution, viewport size, device pixel ratio, and color depth. Compare with common screen resolutions and breakpoints.
👁️
Color Blindness Simulator
Simulate how colors and images appear to people with color blindness. Test designs for deuteranopia, protanopia, tritanopia, and achromatopsia.
📏
Spacing Scale Generator
Generate a consistent spacing scale for your design system. Create CSS custom properties for margin, padding, and gap based on a base unit.
🔄
Image Resizer
Resize images online for free. Crop, scale, and convert images to JPG, PNG, or WebP format — all processed locally in your browser, no upload needed.

Browse Other Categories