Color & Design

Color tools for design and CSS: convert between HEX, RGB, HSL, OKLCH, and named CSS color spaces.

All Color & Design

• Color Converter Convert between HEX, RGB, HSL, HSV, OKLCH, and named CSS colors.
• Color Palette from Image Extract a 6-color palette from any image. k-means clustering in the browser.
• CSS Gradient Generator Build linear, radial, conic CSS gradients visually. Copy as CSS.
• CSS Box Shadow Generator Build CSS box-shadow visually. Multiple layers, inset, spread, blur.
• CSS clamp() Generator Generate fluid CSS clamp(min, preferred, max) for typography and spacing.
• Glassmorphism CSS Generator Frosted-glass CSS with backdrop-filter, border, shadow.
• CSS Easing Function Picker Pick a cubic-bezier easing curve visually. Includes common presets.
• CSS Button Generator Build CSS buttons visually: padding, radius, color, shadow, hover. Copy CSS.
• CSS Border Radius Generator Build any border-radius shape — equal corners, per-corner, elliptical.
• CSS Triangle Generator Generate pure-CSS triangles (tooltip arrows, dropdown indicators) with the border trick.
• CSS Animation Generator Build CSS @keyframes animations visually. Fade, slide, bounce, pulse, spin.
• CSS Flexbox Playground Live flexbox playground. justify-content, align-items, gap, wrap — see results instantly.
• CSS Grid Generator Build a CSS grid layout visually. Tracks, gaps, named areas.
• WCAG Color Contrast Checker Check WCAG AA/AAA contrast between any two colors. Suggestions to pass.
• CSS Aspect Ratio Calculator Compute aspect-ratio CSS for any dimensions. 16:9, 4:3, golden ratio presets.
• CSS Scrollbar Designer Style scrollbars cross-browser. Webkit + Firefox + standard. Live preview.
• CSS Variable Extractor Extract all CSS custom properties (variables) from any stylesheet.
• Tailwind Color Picker Browse the Tailwind CSS color palette. Click any shade to copy HEX or class name.
• CSS Text Shadow Generator Visually build CSS text-shadow declarations. Multi-shadow stack, presets, copy-to-clipboard.
• SVG Blob Generator Generate organic SVG blob shapes for hero backgrounds. Adjustable complexity + randomness seed.
• CSS Spinner / Loader Generator Generate pure-CSS loading spinners (ring, dots, bars). Copy-paste HTML + CSS.
• CSS Filter Playground (Blur, Brightness, Hue) Live visual playground for the CSS filter property. Stack effects, copy declaration.
• CSS Skeleton Loader Generator Generate animated skeleton placeholder loaders (cards, lines, avatars). Pure CSS.