Design Tools
Tools for working with color. Convert between color formats, pick colors from images, generate shades and tints, and fine-tune your palette.
Type Scale Generator — Modular Typography Scale
Generate a modular type scale from any base size and ratio. Choose from Perfect Fourth, Golden Ratio, and more — get px, rem, CSS variables or Tailwind config output. Free.
Font Size Converter — pt to px to rem
Convert font sizes between pt (print), px (screen), and rem. Set your root font size and see all three equivalents instantly. Includes a reference table of 17 common print sizes. Free.
Color Lightener & Darkener — Generate Tints and Shades
Generate lighter tints and darker shades of any color. See the full scale from white to black with one-click copy of HEX, RGB, or HSL values for each swatch. Free.
Color Code Converter — HEX, RGB, HSL & More
Convert colors between HEX, RGB, RGBA, HSL, HSLA, and CSS named colors instantly. Paste any value or use the color picker — get every format at once. Free.
HEX to RGB Converter — Free, Instant Color Conversion
Convert any HEX color code to RGB instantly. Paste your hex value and get RGB, RGBA, HSL, and HSLA outputs — each with a one-click copy button. Free.
RGB to HEX Converter — Free, Instant Color Conversion
Convert RGB to HEX instantly. Paste any RGB value and get the HEX code plus RGBA, HSL, and HSLA — all with one-click copy. Free, no sign-up required.
HEX to HSL Converter
Convert a HEX color code to HSL (hue, saturation, lightness) instantly. Also outputs RGB, RGBA, and HSLA — paste any color format and get them all at once.
HSL to HEX Converter
Convert an HSL color to HEX instantly. Paste any color value in any format and get HEX, RGB, RGBA, HSL, and HSLA outputs all at once with one-click copy.
RGB to HSL Converter
Convert an RGB color to HSL instantly. Paste any color in any format and get HEX, RGB, RGBA, HSL, and HSLA all at once with one-click copy.
HSL to RGB Converter
Convert an HSL color to RGB instantly. Paste any color in any format and get HEX, RGB, RGBA, HSL, and HSLA all at once with one-click copy.
HEX to RGBA Converter
Convert a HEX color code to RGBA and add an alpha transparency value. Paste any color and get HEX, RGB, RGBA, HSL, and HSLA outputs all at once.
Tailwind Shade Generator
Generate a full 11-stop Tailwind CSS color scale from any base color. Export as a JS object or CSS variables.
Border Radius Generator
Visually build CSS border-radius values. Control each corner independently, toggle px or %, and copy the ready-to-use shorthand.
CSS Button Generator — Custom Buttons with Live Preview
Design a custom CSS button with live preview. Adjust color, padding, font, border-radius, and shadow — then copy the CSS and HTML instantly. Free.
CSS Gradient Generator
Build linear, radial, and conic CSS gradients visually. Add color stops, adjust angles, and copy the ready-to-use CSS.
CSS Box Shadow Generator
Generate CSS box shadows with live preview. Stack multiple shadow layers and copy the final box-shadow value.
Color Palette Generator
Generate beautiful color palettes from a base color. Export as CSS variables, Tailwind config, or plain HEX list.
Contrast Checker (WCAG)
Check the contrast ratio between two colors against WCAG AA and AAA accessibility standards.