Color & Design

Design helpers that produce production-ready CSS. Adjust the controls, watch the live preview and copy the code straight into your project.

All color & design at a glance

Pick colors, build palettes, check contrast and generate CSS gradients, shadows and glassmorphism. Free design tools with copy-ready code.

  • Color Converter: Convert any color between HEX, RGB, HSL, HSV, HWB, CMYK and CSS color names. Paste a value in any format and copy every other format in one click.
  • Color Picker: Free online color picker with a saturation area, hue and opacity sliders, HEX, RGB and HSL values, tints and shades, and an eyedropper for any pixel on screen.
  • Color Palette Generator: Create color palettes from a base color with complementary, analogous, triadic and other harmonies, or at random. Lock colors and export CSS, JSON or PNG.
  • CSS Gradient Generator: Create CSS linear, radial and conic gradients with draggable color stops, angle and position controls, presets and a live preview. Copy clean CSS in one click.
  • Box Shadow Generator: Build CSS box shadows visually with multiple layers, offset, blur, spread, color, opacity and inset. Presets for soft, layered, glow and neumorphic shadows.
  • Glassmorphism Generator: Generate glassmorphism CSS with backdrop-filter blur, transparency, saturation, border and tint, previewed live. Includes the Safari prefix and a fallback.
  • Border Radius Generator: Generate CSS border-radius for rounded corners, pills, circles and blob shapes. Link or unlink corners, use px or %, and switch to 8-value elliptical mode.
  • Contrast Checker: Check the WCAG 2.x contrast ratio between text and background colors, with AA and AAA results for text and UI components and suggested passing colors.

Every tool on ToolsWorld is free, needs no account and works on phones, tablets and computers.

Explore other categories