Color & design
Convert HEX, RGB and HSL, check contrast and generate palettes, gradients, shadows, SVG patterns and responsive CSS. Preview and copy your styles.
Explore tools
Color converter
Same color. A different format.
Contrast checker
Check the contrast between text and background colors.
Gradient maker
Find a blend you love. Copy the CSS.
Palette and color mixing
Generate rule-based palettes or compare weighted RGB color mixtures.
CSS shadow and radius
Compose layered shadows with optional individual border-radius values.
Color vision preview
Compare a chart or UI palette under three color-vision simulations and grayscale.
Fluid type clamp generator
Calculate CSS clamp() for a font size that grows between two viewport widths, with rem bounds and an adjustable root-size assumption.
SVG pattern generator
Download a seamless single-tile SVG for dot, grid or diagonal web backgrounds.
CSS grid generator
Generate a card grid that adapts to container width, with a narrow preview and copyable CSS.
CSS filter generator
Combine CSS image filters with live before/after previews, then copy the generated rule.
Choose the right tool
Start with the surface where the design will appear. Check colors against the real background, test fluid type at small and large widths, and try grids with long content. A color-vision preview or a passing contrast pair is only one part of an accessibility review.