🎨 Design Tools
30 free tools, all running in your browser. No sign-up.
🎨 Color Converter (HEX/RGB/HSL/HSV/CMYK)
Convert colors between HEX, RGB, HSL, HSV and CMYK — edit any format and every other representation updates live, with a color swatch preview.
Open Tool →🎨 Color Picker from Image
Upload a photo and click anywhere to sample that pixel's exact HEX/RGB/HSL color, with a zoomed magnifier and a click-to-copy pick history.
Open Tool →🎨 Color Palette Generator
Pick a base color and instantly generate complementary, analogous, triadic, split-complementary and tetradic color schemes with click-to-copy swatches.
Open Tool →🎨 Palette Extractor from Image
Upload an image and extract its most dominant colors via median-cut color quantization, as HEX swatches with coverage percentages.
Open Tool →🎨 WCAG Contrast Ratio Checker
Check the WCAG 2.x contrast ratio between two colors, with pass/fail against AA and AAA thresholds for normal and large text.
Open Tool →🎨 Color Blindness Simulator
Upload an image and see how it looks under protanopia, deuteranopia, tritanopia and achromatopsia, side by side.
Open Tool →🎨 CSS Named Color Reference
A searchable, filterable grid of all 147 standard CSS named colors with a live swatch, hex value, and click-to-copy.
Open Tool →🎨 Nearest CSS Color Name Finder
Enter any HEX or RGB color and find the nearest matching CSS named color out of all 147 standard names.
Open Tool →🎨 CSS Gradient Generator
Build linear or radial CSS gradients with any number of color stops, a live preview, and copyable background CSS.
Open Tool →🎨 CSS Box-Shadow Generator
Build single or stacked CSS box-shadows with offset, blur, spread, color/alpha and inset controls, plus a live preview.
Open Tool →🎨 CSS Gradient Mesh Generator
Approximate a mesh-gradient background using stacked CSS radial-gradients — add, position and size colored blobs.
Open Tool →🎨 CSS Border-Radius Generator
Shape any box with independent per-corner, per-axis border-radius control — linked or fully elliptical, with a live preview.
Open Tool →🎨 Glassmorphism CSS Generator
Build a frosted-glass UI panel with backdrop-filter blur, translucent background and shadow, with the -webkit- fallback included.
Open Tool →🎨 Neumorphism (Soft UI) CSS Generator
Build a soft-UI panel with auto-computed light/dark dual shadows from your base color, raised or pressed.
Open Tool →🎨 CSS Clip-Path Generator
Clip a box into a preset shape with one click, or draw a fully custom polygon by clicking and dragging points.
Open Tool →🎨 CSS Triangle & Shape Generator
Generate pure-CSS triangles, corner triangles, a trapezoid, parallelogram and diamond using the border and transform tricks.
Open Tool →🎨 CSS Grid Layout Generator
Design a CSS Grid visually: set columns, rows and gap, click-drag to merge cells into spanning items, copy the generated CSS.
Open Tool →🎨 Flexbox Playground & Generator
Play with flex-direction, justify-content, align-items, wrap and gap plus per-item flex controls, with a live preview.
Open Tool →🎨 CSS @font-face Snippet Generator
Generate a correct multi-format @font-face rule from your font file paths, with font-weight, style, display and a usage example.
Open Tool →🎨 Cubic-Bezier / Easing Curve Generator
Drag two control-point handles on an interactive curve to build a CSS cubic-bezier() easing function, with an animated preview.
Open Tool →🎨 CSS @keyframes Animation Generator
Build a CSS @keyframes animation from percentage steps, with duration, timing, iteration and a live replayable preview.
Open Tool →🎨 CSS Text-Shadow Generator
Build a CSS text-shadow with multiple stacked layers for neon glow, drop shadow, 3D/emboss and outline effects.
Open Tool →🎨 CSS Custom Scrollbar Generator
Style a scrollbar's width, track and thumb colors, and get both standard and WebKit-prefixed CSS for the widest browser support.
Open Tool →🎨 Favicon & Theme Color Generator
Pick a brand color and generate theme-color meta tags with light/dark variants, plus a manifest.json snippet.
Open Tool →🎨 Tailwind Color Scale Generator
Turn one base color into a full Tailwind-style 50-950 color scale, with a swatch preview and tailwind.config.js syntax.
Open Tool →🎨 CSS filter() Live Previewer
Combine blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate and sepia with a live image preview.
Open Tool →🎨 SVG to CSS Background-Image Converter
Convert raw SVG markup into a compact URL-encoded background-image data URI (smaller than Base64), or decode one back to SVG.
Open Tool →🎨 CSS Custom Properties (Variables) Extractor
Paste CSS and extract every --custom-property declaration, flag undeclared var() usages and unused declared variables.
Open Tool →🎨 Button / CTA Style Generator
Design a button's background, text, border, padding and hover behavior with a real live-hoverable preview and copyable CSS.
Open Tool →🎨 Print Stylesheet Scaffold Generator
Toggle common print-CSS best practices and generate a ready-to-paste @media print block.
Open Tool →