Pick any color and instantly get its HEX, RGB, HSL, and RGBA codes. All processing happens in your browser — nothing is sent to a server.
A color picker is a graphical user interface control that lets developers and designers select a color from a spectrum or palette and retrieve its machine-readable code. Modern browsers expose the native <input type="color"> API, which opens the operating system's color chooser dialog. This tool extends that native control with real-time RGB sliders, an alpha (opacity) channel, and instant output in four color formats: HEX, RGB, RGBA, and HSL.
#3B82F6.rgb(59, 130, 246).rgba(59, 130, 246, 0.75).hsl(217, 91%, 60%).Use HEX for static, opaque colors defined in design systems and stylesheets — it is the most compact notation. Use RGB/RGBA when you need to set opacity or when manipulating color values in JavaScript (since parsing a decimal triplet is simpler than hexadecimal). Use HSL when you need to programmatically derive lighter, darker, or more saturated variants of a base color — incrementing the lightness value in HSL is far more predictable than doing the same in HEX or RGB. Once you have your color values, apply them directly in our free html editor online to preview the result. Build your page's theme-color and Open Graph meta tags with our meta tag generator.
Split the HEX string into three pairs of two characters. Convert each pair from base-16 (hexadecimal) to base-10 (decimal). For example, #3B82F6 → 3B=59, 82=130, F6=246, giving rgb(59, 130, 246). This tool does the conversion automatically as you pick.
Alpha controls opacity: 1 (or 100%) is fully opaque, 0 (or 0%) is fully transparent. Values in between produce semi-transparent colors. Alpha is only supported in RGBA and HSLA notation in CSS — HEX supports it as an 8-character string (#RRGGBBAA) in modern browsers.
No. This entire tool runs in your browser using JavaScript. No color data, pixel values, or selections are transmitted to any server. The "Save This Color" feature stores swatches only in the current page session — closing the tab clears them.
Browsers do not yet provide a cross-platform screen capture API for arbitrary pixel sampling. To sample a color from your screen, use your operating system's built-in picker (Digital Color Meter on macOS, Magnifier on Windows 10+) or a browser extension like ColorZilla. Once you have the HEX code, you can paste it into the HEX field of any CSS declaration.
HSL (Hue, Saturation, Lightness) and HSV/HSB (Hue, Saturation, Value/Brightness) are both cylindrical models but differ in their third axis. In HSL, L=50% with S=100% gives a pure, saturated hue. In HSV, V=100% with S=100% also gives a pure hue, but V=0% is always black regardless of hue or saturation. CSS natively uses HSL. Adobe Photoshop and many graphic tools default to HSB/HSV.