Convert Colors for Web Design
Get HEX, RGB, and HSL values for any colour β ready to paste into CSS or Tailwind.
Accepts: HEX (#fff or #ffffff), RGB (255, 255, 255), or HSL (360, 100%, 50%)
Lightness scale
Click any swatch to switch to that shade
Web Design tips
CSS supports all three formats: hex (#14b8a6), rgb(20, 184, 166), and hsl(174, 80%, 40%). Pick whichever matches your codebase conventions.
HSL is often easier to work with when building colour scales β just adjust the lightness (L) value to get lighter or darker shades.
Tailwind CSS uses HEX values in its config. Copy the HEX output and use it directly in tailwind.config.ts for custom colours.
For CSS custom properties (variables), use the RGB triplet without rgb(): --color-primary: 20, 184, 166. Then reference with rgb(var(--color-primary)).
How It Works
Why use ours?
Also check outβ¦
Convert Colors for Print (CMYK)
Convert screen colours (HEX/RGB) to CMYK values fo
Build Color Palettes for Design Systems
Convert brand colours across all formats and gener
Check Colour Contrast for Accessibility
Convert colours to get RGB values for use in contr
Convert Colors for Figma
Get the exact HEX and RGB values to paste into Fig