ToolKit Slate

Color Converter and Picker

Choose a color and convert it between HEX, RGB, and HSL. It’s made for designers, developers, students, and anyone editing a website, image, slide, or style guide.

Edit any field and the others update. Color names like “tomato” work too.

Text contrast (WCAG)
White text on this color
Black text on this color
Lighter and darker shades
Matching colors

Pick a color to begin.

About this tool

Pick a color visually or paste a value you already have. The tool shows matching formats so you can copy the one your project needs, checks how readable text is on that color, and suggests shades and matching colors for a small palette.

How to use it

  1. Pick a color with the color picker, or type or paste a value into any of the HEX, RGB, or HSL fields. Names like “tomato” work as well.
  2. The other formats update at once. Use the small copy button beside a field, or Copy to take all three.
  3. Check the contrast results to see if white or black text is readable on the color.
  4. Click any shade or matching color to move to it. Download saves the palette as CSS variables.

Common uses

  • Convert a design color for CSS
  • Check a brand color
  • Create a small palette
  • Move between tools that use different color formats
  • Test text readability

Tip: Test text colors against their background before publishing. A nice color that people can’t read is not doing you any favors. Aim for at least 4.5:1 for body text.

Privacy note

Colors are converted in your browser. The optional “Pick from screen” button uses your browser’s own eyedropper and only works in browsers that offer one.

Frequently asked questions

What is the difference between HEX, RGB, and HSL?

They describe the same colors in different ways. HEX (#024ad8) and RGB (rgb(2, 74, 216)) give red, green, and blue amounts. HSL (hsl(220, 98%, 43%)) gives hue, saturation, and lightness, which makes it easier to build lighter, darker, or softer variants by hand.

What do the contrast ratings mean?

They follow WCAG 2. Normal text needs at least 4.5:1 (AA) or 7:1 (AAA). Large text and interface parts such as icons and input borders need 3:1. The tool shows the ratio and the best rating for white and for black text on your color.

Does it support transparency?

You can paste values like rgba(), hsla(), or 8-digit HEX, but the alpha channel is dropped and the solid color is used.

Why does a color look different on another screen?

Screens differ in brightness, calibration, and color range. Values are exact, but how they look is not. Check important brand colors on the devices your audience uses.