Pick a Color, Get the Code
You’ve got a specific shade of pink in mind for a client’s website. You need the exact hex code, and maybe the RGB values for the mobile developer and the HSL values for creating hover state variations. One color, three formats, all in one place.
Click anywhere in the color space to select a color, or type a HEX value directly if you already know what you want. The large preview panel shows the selected color prominently so you can assess it on screen. HEX, RGB, and HSL values update instantly. Copy any of them with one click.
Which Format to Use When
HEX (#EC4899) is the most compact and the format developers have been using in CSS since forever. If you’re writing a stylesheet, this is probably what you’ll paste.
RGB (rgb(236, 72, 153)) is essential when you need transparency, rgba() lets you add an alpha channel. It maps directly to how screens produce color with red, green, and blue subpixels.
HSL (hsl(330, 82%, 60%)) is underrated for practical work. Want a lighter version of your color? Bump the lightness from 60% to 75%. The hue and saturation stay the same, so it still “belongs” to the same color family. Try doing that intuitively with HEX values, it’s almost impossible without a converter.
Real Workflow
You’re building a UI and the designer hands you a mockup with a vibrant pink button. You pick the color here, grab #EC4899. The hover state needs to be slightly lighter, convert to HSL, increase lightness by 10%, done. The active/pressed state needs to be darker, decrease lightness by 10%.
For additional formats like HSV and CMYK, the Color Format Converter covers those. The Palette Generator takes your picked color and builds harmonious combinations around it. The Tint & Shade Generator creates 10 lighter and 10 darker variations.
Works on mobile browsers too, the color input adapts to touch. Everything runs in your browser, nothing gets transmitted.