Color Picker & Converter

A color picker lets you visually select any color and immediately see its code in HEX, RGB, and HSL formats. It's essential for web development, UI design, graphic design, and any project where you need precise color values rather than guessing a hex code.

Use HEX in CSS stylesheets and when copying colors from design tools — it's the most widely supported and compact. Use RGB when you need to apply opacity with rgba() or when working in Canvas, WebGL, or image processing. Use HSL when you need to programmatically lighten, darken, or shift hue — adjusting lightness is much more intuitive than tweaking hex digits.

Pick the color visually using the picker above — all three formats (HEX, RGB, HSL) are shown simultaneously and update in real time. Click any value to copy it to your clipboard. You can also type a known HEX or RGB value directly into the input field to see the equivalent values in all other formats.

Every color you pick is saved to a recent-colors palette (stored only in your browser). Click any swatch to restore that color. This makes it easy to compare colors or return to a palette you were working with earlier — without needing to write anything down.

WCAG accessibility guidelines require a contrast ratio of at least 4.5:1 between text and its background for normal text (3:1 for large text). Dark text on a light background or light text on a dark background typically meets this standard. Avoid pure white (#ffffff) on pure black (#000000) for long reading — a slight off-white or dark gray is easier on the eyes.