🎨 Design

Design-oriented tools such as color conversion and CSS generation

• Color Converter

  Convert color codes between HEX, RGB, and HSL.

  Recommended
• CSS Gradient Generator

  Generate linear-gradient or radial-gradient CSS from colors and positions.

• CSS Grid Generator

  Generate CSS Grid styles from column count, row count, and gap.

• Favicon Generator

  Generate multi-size favicon PNGs, a manifest, and HTML tags from an image.

• CSS Unit Converter

  Convert between px, rem, em, and pt.

• Box Shadow Generator

  Generate a CSS box-shadow by specifying offset, blur, and color.

• Color Contrast Checker

  Calculate the contrast ratio between a foreground and background color and check it against the WCAG AA/AAA criteria.

• Color Blindness Simulator

  Simulate how a color appears to people with protanopia, deuteranopia, tritanopia, or achromatopsia.

• Color Palette Generator

  Generate shade variations plus complementary, analogous, and triadic color palettes from a base color.

• Cubic Bezier Generator

  Generate a CSS cubic-bezier() easing function from four control points and visualize the curve.

• CSS Clamp Calculator

  Calculate a responsive CSS clamp() value from a min/max viewport width and font size.

• Image Color Extractor

  Extract the dominant colors from an image as a color palette.

• Icon Size Cheatsheet

  Look up the icon sizes required for Web, iOS, Android, macOS, Windows, and social media.

• CSS Flexbox Generator

  Generate CSS Flexbox styles from direction, alignment, and gap.

• CSS Border Radius Generator

  Generate a CSS border-radius value by specifying the radius of each corner.