Color Picker (HEX/RGB/HSL)
100% PrivateColor & Design ToolsPick one color and see it in HEX, RGB and HSL together, with shades and copy-ready values.
Runs entirely in your browser. Your input is not uploaded to Ovatly or anywhere else.
- HEX
- #2563EB
- RGB
- rgb(37, 99, 235)
- HSL
- hsl(221, 83%, 53%)
- Contrast
- vs black: 4.06:1 - vs white: 5.17:1
Text needs a contrast of at least 4.5:1 against its background (WCAG AA). The HSL values are rounded to whole numbers.
- 1Pick a color with the swatch, or type a HEX value like #2563EB.
- 2Read the HEX, RGB and HSL values in the result panel.
- 3Copy the notation you need with its Copy button.
- 4Check the contrast ratios before using the color for text.
#2563EB is rgb(37, 99, 235) and hsl(221, 83%, 53%). Its contrast is 5.17:1 against white, which passes the WCAG AA minimum of 4.5:1 for normal text, and 4.06:1 against black, which does not; so this blue belongs on light backgrounds.
- HSL values are rounded to whole numbers, so converting back can differ by one unit in a channel; HEX and RGB are always exact.
- The color swatch is your operating system's picker, so it may offer extra formats (like CMYK for print) that this page does not display.
- Contrast is computed with the WCAG relative-luminance formula, the same one accessibility checkers use.
They describe the same color three ways. HEX is a compact code for CSS, RGB lists red, green and blue amounts, and HSL (hue, saturation, lightness) is the easiest to adjust by eye: keep the hue, then tune saturation and lightness.
About this tool
The Color Picker shows one color in the three notations the web actually uses (HEX, RGB and HSL) with a large preview and its contrast ratios against black and white. Designers use it to move colors between tools, developers use it to grab the exact value for CSS, and anyone building a page can check at a glance whether text in that color will be readable.
Related tools
Part of Ovatly's free tools in Color & Design Tools.