Color Picker: Get 11 Color Formats in Your Browser
Choose a color with the native picker or use the screen EyeDropper where supported. The Color Picker shows the selected color in 11 formats, including hex, RGB, HSL, HSV, HWB, CMYK, LAB, LCH, and OKLab. Copy any format with one click, and check the nearest CSS named color alongside the values.
Color Picker is a browser-based tool for choosing a color and viewing it in 11 formats at once. Use the native picker to select a color, or use the screen EyeDropper where supported. The tool also shows the nearest CSS named color, so you can review a recognizable name alongside the numeric and coded values.
Once you select a color, Color Picker displays its available representations, including hex, RGB, HSL, HSV, HWB, CMYK, LAB, LCH, and OKLab. Click a format string to copy it for pasting into your work. The picker presents the formats together, making it easier to compare values without manually converting them. The nearest CSS named color is shown as a reference; it is the closest named color, not necessarily an exact match.
These formats describe colors in different ways. Hex and RGB represent color with coded or numeric channel values, while HSL and HSV use hue-based models; LAB, LCH, and OKLab provide other ways to express color. Having several representations available can help when a stylesheet, design reference, or document calls for a particular format. The tool lets you choose a color first and then copy the representation that fits your task.
Color Picker runs entirely in your browser. Your input is processed on your device and is not uploaded, stored, or sent to a server. After the page has loaded, the tool works without a connection, so you can use it offline. It is useful for developers, designers, and anyone who needs to select, inspect, or copy color values in different formats.
Step 1: Open the Color Picker and choose a color with the native picker.
Step 2: If your browser supports it, use the screen EyeDropper to select a color from your screen.
Step 3: Adjust the color until it looks right; the available format values update for the selected color.
Step 4: Review the 11 color formats and the nearest CSS named color shown alongside them.
Step 5: Click the format string you need to copy it for pasting into your code or document.
Use case: Choose a color interactively instead of guessing at a color value, then copy the representation you need.
Use case: Use the screen EyeDropper where supported to pick a color from a design or document and get its exact displayed values.
Use case: Compare the same color in multiple formats before deciding which representation to use in your work.
Use case: Copy a hex or RGB value for a stylesheet, or choose another available format when that is what your task needs.
Use case: Check the nearest CSS named color when you want to see whether a selected color has a familiar name.
Use case: Get a color value in one place instead of manually translating between the formats shown by the picker.