Color Picker
Pick a color using the native color input, type HEX/RGB/HSL values manually, or use the browser Eyedropper to sample colors from anywhere on screen. All formats stay in sync.
How to Pick a Color
Click the colored square to open your browser's native color picker. Alternatively, type a HEX, RGB, or HSL value directly — the other fields will update automatically.
In Chrome and Edge, the Eyedropper button lets you sample any color visible on your screen, including colors in other browser tabs or applications.
Output Formats
HEX is the most common format in CSS and design tools. RGB specifies red, green, and blue channels independently. HSL represents hue, saturation, and lightness, which is easier to reason about when adjusting colors. HWB uses hue, whiteness, and blackness — a newer CSS format that's intuitive for mixing.