Skip to content
toolwise

Color Picker

Pick a color and get HEX, RGB and HSL codes.

100%

Color codes

  • HEX#1D4ED8
  • RGBrgb(29, 78, 216)
  • HSLhsl(224, 76%, 48%)
  • CSS variable--color-brand: #1D4ED8;

Shades and tints

Tap a swatch to use it.

Matching colors

Complementary

Analogous

Triadic

Split complementary

Text contrast (WCAG)

White text on this color

6.70:1 · AA

Black text on this color

3.13:1 · AA for large text only

When to use it

Use this tool to choose a color and get its codes for websites, apps, slides or design tools. It also shows lighter and darker versions, colors that go well with it, and whether white or black text will be readable on top of it. It is useful for designers, developers, students and anyone building a simple brand.

How to use it

  1. Click the large color box marked Tap to pick to open your device’s color picker, or type any color in Or type any color.
  2. Move the Opacity slider if you need a see-through color.
  3. Under Color codes, copy the HEX, RGB, HSL or CSS variable with its Copy button.
  4. Under Shades and tints, tap a swatch to switch to a darker or lighter version.
  5. Under Matching colors, see Complementary, Analogous, Triadic and Split complementary colors. Tap one to use it.
  6. Check Text contrast (WCAG) to see how readable white and black text are on your color.

Worked example

You want a blue for buttons on a website. Type #1D4ED8. The codes are rgb(29, 78, 216) and hsl(224, 76%, 48%). The contrast check shows 6.70:1 for white text, which passes AA, and 3.13:1 for black text, which is only good for large text. So white text on this blue is the right choice for buttons.

For a hover effect, tap one of the darker shades. For a second accent color, look at the complementary color, which sits on the opposite side of the color wheel.

Using the codes

Paste the HEX code into design apps such as Canva or Figma. Use the RGB or HSL value in CSS, or copy the CSS variable line into your stylesheet and rename it to suit your project.

Tips

  • Check contrast early. A color that looks good may still be hard to read with text on top.
  • Use shades for a set. Picking a light tint for backgrounds and a dark shade for text keeps a design consistent.
  • Keep a short palette. One main color, one accent and a few greys is enough for most projects.

Common mistakes

  • Relying on color alone. Some people cannot tell red from green. Add text or icons to show meaning.
  • Copying codes by hand. One wrong letter changes the color. Use the copy buttons.
  • Forgetting the opacity. A semi-transparent color looks different on light and dark backgrounds.

Frequently asked questions

What is the difference between HEX, RGB and HSL?

They are three ways of writing the same color. HEX is a short code like #1D4ED8, common in web design. RGB gives the amounts of red, green and blue from 0 to 255. HSL gives the hue, saturation and lightness, which makes it easy to create lighter or darker versions.

Can I pick a color from my screen or a photo?

The color box opens your device's own color picker. On some computers, that picker includes an eyedropper for choosing colors from the screen. If yours does not, use an image color tool, then paste the code into the box here.

What do AA and AAA mean?

They are levels from the Web Content Accessibility Guidelines (WCAG). AA needs a contrast of at least 4.5:1 for normal text, and AAA needs 7:1. Large text only needs 3:1 for AA. Higher contrast is easier to read for everyone.

How does opacity change the codes?

Below 100%, the HEX code gets two extra digits for the transparency, and RGB and HSL include a slash and the opacity value, which modern browsers understand.

Which color formats can I type?

HEX codes with or without the #, rgb() and hsl() values, and named CSS colors such as red, teal or rebeccapurple.

Related tools