Color Picker

Pick a color visually or paste a CSS color value. Compare the swatch and copy its HEX, RGB or HSL code for your stylesheet.

Browser-based processingResults depend on your deviceFree, no sign-up
💡 Click the color swatch box to open the visual color picker, or type any HEX, RGB, or HSL value above.
HEX
#B9FF66
RGB
rgb(185, 255, 102)
HSL
hsl(87, 100%, 70%)
JSON Formatter & Validator
Format, validate and minify JSON with exact error line & column — everything runs in your browser.
HTML Formatter
Format and beautify HTML code instantly in your browser with Prettier (the industry-standard formatter, MIT-licensed). No uploads, no sign-up, works offline.
CSS Formatter
Format and beautify CSS code instantly in your browser with Prettier (the industry-standard formatter, MIT-licensed). No uploads, no sign-up, works offline.

Convert a HEX color to RGB and HSL

Enter #336699 to get rgb(51, 102, 153) and hsl(210, 50%, 40%). Open the color swatch to change the shade visually, then copy the notation your stylesheet uses.

Pick one color or extract a full palette

If your browser’s native picker offers an eyedropper, use it to sample a single pixel. To find several dominant colors in a photo, use the image palette generator. Check a text and background pair with the contrast checker before putting the colors into a design.

Frequently Asked Questions

  • Can I enter an existing CSS color?
    Yes. Paste a HEX, RGB or HSL value to see the corresponding swatch and copy another notation.
  • Does every browser have an eyedropper?
    The swatch uses your browser’s native color picker. Eyedropper controls depend on the browser and operating system.
200 free tools
Browser-based tools
Local file processing
Free — no sign-up