Categories
🎨 Design
Tools for web design and production, such as color conversion, CSS generation, and accessibility checks.
Tools in this category
Generate linear-gradient or radial-gradient CSS from colors and positions.
Generate CSS Grid styles from column count, row count, and gap.
Generate multi-size favicon PNGs, a manifest, and HTML tags from an image.
Convert between px, rem, em, and pt.
Generate a CSS box-shadow by specifying offset, blur, and color.
Calculate the contrast ratio between a foreground and background color and check it against the WCAG AA/AAA criteria.
Simulate how a color appears to people with protanopia, deuteranopia, tritanopia, or achromatopsia.
Generate shade variations plus complementary, analogous, and triadic color palettes from a base color.
Generate a CSS cubic-bezier() easing function from four control points and visualize the curve.
Calculate a responsive CSS clamp() value from a min/max viewport width and font size.
Extract the dominant colors from an image as a color palette.
Look up the icon sizes required for Web, iOS, Android, macOS, Windows, and social media.
Generate CSS Flexbox styles for the container and each item while watching a live preview.
Generate a CSS border-radius value by specifying the radius of each corner.
What you can do here
Color
Convert between HEX, RGB, and HSL, build color palettes, and extract colors from an image.
CSS generation
Create values for gradients, Grid, Flexbox, box-shadow, border-radius, cubic-bezier, and clamp().
Accessibility checks
Check the contrast ratio between text and background colors, and simulate how colors look with different types of color vision.
More
Convert CSS units such as px, rem, and em, generate favicons, and look up icon sizes.
Common use cases
Convert colors from a design mockup into code for your CSS
Check whether a color scheme is readable and works for people with different color vision
Create a responsive font-size with clamp()