Color & CSS

Colour and CSS generators turn a visual decision into code you can paste. The workflow is usually the same: choose or sample a colour, check it is accessible, then generate the CSS for the component you are building.

Pick and convert colour

The Color Converter moves between HEX, RGB, HSL and other notations. Use the picker or image color picker to sample one, then check contrast before you commit — the Contrast Checker tells you whether text on that colour passes WCAG AA and AAA.

Color ConverterConvert colors between HEX, RGB, and HSL formats.

Color PickerPick colors and get HEX, RGB, HSL values. Save color palettes.

Image Color PickerPick colors from uploaded images. Show HEX, RGB, HSL values.

Contrast CheckerCheck color contrast ratios for accessibility compliance.

Build palettes and gradients

Palette generators give you a set of related colours to work from; the Material and Tailwind palettes are the shortcuts when you want to stay inside an existing design system. Gradients range from simple two-stop to mesh.

Color Palette GeneratorGenerate harmonious color palettes from a seed color or random roll. Lock colors, re-roll, and export as CSS, Tailwind, JSON, or SCSS.

Color Scheme GeneratorBuild light and dark design-system color scales (50–950) from a single seed color with OKLCH interpolation. Export CSS, Tailwind, SCSS, or JSON.

Gradient GeneratorCreate CSS gradients with multiple color stops.

Mesh Gradient GeneratorCreate interactive multi-point CSS, SVG, and mobile UI mesh gradients with drag-and-drop color anchors and high-res PNG export.

Material Color PaletteGenerate Material Design 3 tonal palettes (tones 0–100) from any seed color. Copy individual tones or the full palette as CSS variables.

Tailwind Color GeneratorGenerate custom 50–950 Tailwind CSS color palettes and shades with WCAG contrast checks, CSS variables, and Swift/Kotlin code export.

Generate component CSS

Each of these produces CSS for one effect. Shadows and radii take the most fiddling by hand, which is why they are the highest-value generators here; the shape and surface tools cover the effects that are tedious to write in raw CSS.

Box Shadow GeneratorGenerate CSS box shadow effects with live preview.

Text Shadow GeneratorCreate multi-layer text shadows with neon, retro, 3D, and emboss presets. Copy clean CSS or Tailwind output.

Border Radius GeneratorGenerate CSS border radius for rounded corners.

CSS Button GeneratorDesign buttons with gradient backgrounds, layered shadows, borders, radius, and hover states. Copy clean CSS or Tailwind output.

CSS Clip-Path GeneratorCreate custom CSS clip-path polygons, shapes, stars, and banners with interactive drag-and-drop points, live color preview, and Tailwind CSS export.

Glassmorphism GeneratorBuild frosted-glass UI cards with backdrop blur, background opacity, border, and shadow. Copy clean CSS or Tailwind output. Live preview on any backdrop.

Neumorphism CSS GeneratorDesign modern soft UI neumorphic cards, buttons, and surfaces with real-time shadow elevation, curvature, light angles, and Tailwind CSS code.

CSS Triangle GeneratorGenerate pure CSS triangles, tooltip pointers, and dropdown arrows with custom direction, dimensions, color, and dual border-hack & clip-path code.