Color and design

Pick, convert and combine colors, and generate CSS for your designs.

• Aspect Ratio Calculator Aspect ratio calculator to simplify any width and height, resize while keeping proportions, compare 16:9, 4:3 or 21:9 sizes and copy the CSS aspect-ratio code.
• Border Radius Generator Shape CSS border-radius visually with draggable handles. Set each corner in px or %, use the 8-value elliptical syntax, make blob shapes and copy the code.
• Box Shadow Generator Design layered CSS box shadows with a live preview. Set offset, blur, spread, color, opacity and inset, try neumorphism presets and copy the code.
• Clip-Path Generator Draw CSS clip-path shapes with draggable points. Edit polygons, circles, ellipses and insets, start from presets like stars and arrows, and copy the code.
• Color Blindness Simulator Free color blindness simulator. See any image with protanopia, deuteranopia, tritanopia, their milder forms or achromatopsia, side by side or with a slider.
• Color Converter Convert any color between HEX, RGB, HSL, HSV, HWB, CMYK, LAB, LCH and OKLCH. Paste a code, see the color and copy every format in one click.
• Color Name Finder Find the name of any color. Enter a HEX or RGB code to get the 5 closest names from over 30,000 named colors, plus the nearest CSS color name.
• Color Palette Generator Generate color palettes from one base color using color harmony rules - complementary, analogous, triadic, tetradic, square and monochromatic.
• Color Picker Free online color picker. Choose any color and instantly copy its HEX, RGB, HSL, HSV and CMYK codes, with contrast ratios against white and black.
• Contrast Checker Free WCAG contrast checker. Enter a text and background color to get the contrast ratio, AA/AAA results and the nearest passing color.
• CSS Gradient Generator Create linear, radial and conic CSS gradients with a live preview. Add and drag color stops, set the angle and copy clean CSS code in one click.
• Cubic-Bezier Editor Design CSS easing curves with a draggable cubic-bezier editor, compare them with linear in a live animation, and copy cubic-bezier() or a linear() version.
• Flexbox and Grid Playground Build flexbox and CSS grid layouts visually. Set container and item properties, name grid areas, see the result live and copy clean CSS and HTML.
• Font Pairing Previewer Preview font pairings for headings and body text with 20 open-license fonts, adjust size and line height, and copy the CSS font-family stacks.
• Font Subsetter Subset a font to the characters you need with HarfBuzz, in your browser. Get a smaller TTF/OTF and WOFF, a preview and an @font-face rule with unicode-range.
• Image Color Picker Upload an image and click any pixel to get its color as HEX, RGB, HSL, HSV and CMYK. Zoom loupe, averaging and a list of picked colors, all in your browser.
• Palette from Image Extract a color palette from any image. Upload a photo and get its dominant colors as HEX codes with their share of the image, ready to copy or export.
• PX to REM Converter Convert px to rem and em with any root font size, build a bulk conversion table and turn every px value of a CSS snippet into rem in one click.
• Tints and Shades Generator Generate tints and shades of any color in 5, 10, 20 or 25 % steps, mixed in OKLCH or sRGB, and export them as CSS variables or a Tailwind config.