How to use the color picker + converter
Use the native color picker or enter a three-digit or six-digit hexadecimal color. The tool displays equivalent HEX, RGB, and HSL values for an opaque sRGB color. HSL hue and percentages are rounded to whole numbers for readability. Alpha channels, named colors, and arbitrary CSS expressions are not accepted as input. Display appearance depends on screen calibration and surrounding colors.
Work directly in the input area at the top of this page and choose the settings that match your task. Run the action to see the output separately from your original input. Start with a small example whose result you can check, then process the value you actually need. Changing an input clears an older result so it cannot be mistaken for a fresh conversion.
Processing runs in your browser. This tool does not send your input to a conversion server, create an account history, or save the input in browser storage. A copied result remains subject to your device clipboard settings, while a downloaded file stays on your device until you remove it. Anyone with access to your screen or browser can still see the information you enter.
Use Copy for text output or Download for a local file. If clipboard access is unavailable, select the output and copy it manually. Clear removes the current result and any main text or file input; settings remain available for another run. Keep original files and important values until you have checked that the output works in the application where you intend to use it.
Frequently asked questions
When should I use HSL instead of HEX or RGB?
HSL separates hue from saturation and lightness, so you can build a consistent palette by changing only the lightness. HEX and RGB describe the same colours but make a “slightly darker version of this” far harder to express.
Does converting between formats change the colour?
HEX and RGB are the same values written differently, so nothing is lost. HSL conversion involves rounding, so a round trip can shift a channel by one — invisible on screen, but worth knowing if you compare values exactly.
How do I check a colour has enough contrast for text?
Body text needs a contrast ratio of at least 4.5:1 against its background, and large text 3:1. Lightness alone is not enough of a guide: two colours with similar lightness can be unreadable together even when they look distinct.