Toolix

Developer Tool

Free Color Picker & HEX RGB HSL Converter

Pick colors visually, convert between HEX, RGB, and HSL, copy CSS color values, and check whether black or white text has stronger contrast. Built for frontend development, UI design, and quick CSS color work.

HEX RGB HSLLive color pickerContrast check

Color Picker & Converter

Pick a color, convert HEX, RGB, and HSL, then check readable text contrast.

Pick a color or edit HEX, RGB, or HSL.
Best text: White
Live Preview

#0072E5

Preview foreground switches between black and white based on contrast.

Black text

4.54:1

AA normal text

White text

4.63:1

AA normal text

Recent colors

HEX

#0072E5

RGB

rgb(0, 114, 229)

HSL

hsl(210, 100%, 45%)

Guide

How to use the color picker

Use this color picker and converter when you need to choose a web color, convert between HEX, RGB, and HSL, or quickly check whether black or white text is more readable on a selected color.

  1. 1

    Pick or enter a color

    Choose a color visually or paste a HEX, RGB, or HSL value from your CSS, design file, or browser dev tools.

  2. 2

    Review converted formats

    Check the matching HEX, RGB, and HSL values so you can use the color in CSS, design tokens, or UI documentation.

  3. 3

    Check readable text color

    Compare black and white text contrast against the selected color before using it for buttons, badges, labels, or backgrounds.

  4. 4

    Copy the value

    Copy the color format you need and paste it into CSS, Tailwind config, a design system, or a component.

Common color workflow problems

  • Copying a HEX value with the wrong number of characters.
  • Confusing RGB channel order or entering values outside the 0 to 255 range.
  • Using HSL values without checking how saturation and lightness affect readability.
  • Choosing brand colors that look good visually but fail contrast for text.
  • Mixing uppercase, lowercase, short HEX, and full HEX values across CSS files.

Frequently asked questions

Can I convert HEX to RGB and HSL?

Yes. Toolix Color Picker converts HEX colors to RGB and HSL instantly, and also supports editing RGB or HSL values to update the HEX color.

Does the color picker check contrast?

Yes. The tool calculates contrast against black and white text and shows which option is more readable for the selected color.

What color formats are supported?

The tool supports common web color formats including HEX, RGB, and HSL for CSS and UI design workflows.

Are my colors sent to a server?

No. The color picker and color conversion logic runs locally in your browser, so your colors stay on your device.