How to use Color Picker and Converter
- Choose Color picker or Typed value as the source.
- Use the native color control, or type a HEX, RGB or HSL value in the text field.
- The color swatch and its equivalent values update as you change the input.
- Copy the full result or a value you need from the table.
Example: Color Picker and Converter
Convert a design color given as an RGB value.
Options
- Color source
- The picker opens your browser's color control. Choose Typed value when you have a value from CSS or a design file. Only the selected source is used, so the other field can keep its previous value.
- Typed formats
- Enter three- or six-digit HEX, comma-separated integer rgb() channels from 0 to 255, or hsl() with degrees and percentages. Alpha channels, named colors, and CSS variables are outside this tool's input scope.
Supported inputs and limits
Where your input is processed
This tool processes your input in this browser. Your text and files are not uploaded to UseFreeTools. Check this tool's limits for anything it may save on your device.
One color, three useful notations
HEX writes each red, green and blue channel as two hexadecimal digits. RGB writes the same channels as decimal numbers. HSL describes hue, saturation and lightness, which can be easier to adjust by hand. All three results on this page describe the same rounded sRGB color. The values are ready to copy into CSS, but check them in the design where they will be used, especially when text sits on top of a background.
Questions about Color Picker and Converter
Can I type RGB or HSL instead of using the picker?
Yes. Switch the source to Typed value and enter a value such as rgb(56, 102, 168) or hsl(215, 50%, 44%). The picker and typed field stay separate, and only the source you select is converted.
Why is the converted HSL value not identical to my input?
The result is based on whole red, green and blue channels. An HSL input can fall between those channel values, so it is rounded to the nearest eight-bit color before the tool prints HSL again.
Does this tell me whether my text is readable?
No. A color by itself has no text contrast score. Put your text and background colors into Contrast Checker to see the ratio and the WCAG text thresholds.