utilariumColor picker

Color picker

Pick a color and copy its code in HEX, RGB, HSL, HSV, CMYK or OKLCH. Make a palette of five colors, pick colors from a picture and check the contrast of text.

Everything is free. There is no sign-up, no ad and no limit. Your colors and your pictures stay on your device.

Pick and convert a color

Drag in the box, use the sliders, or type a code. You edit color 1 of the palette. The page shows the code in every format.

Type HEX, rgb(), hsl(), hsv(), cmyk() or oklch().

This browser has no eye dropper. Use a picture below to pick a color from an image.

  • HEX#0F766E
  • RGBrgb(15, 118, 110)
  • HSLhsl(175, 77%, 26%)
  • HSV / HSBhsv(175, 87%, 46%)
  • CMYK (approximate)cmyk(87%, 0%, 7%, 54%)
  • OKLCHoklch(51.1% 0.086 186.4)

Pick a color from your picture

Choose a picture. The page reads it on your device and never uploads it. Click a pixel to pick it, or use the arrow keys and Enter.

You can also drop a picture here.

Palette generator

Press the space bar to make a new palette. Lock a color to keep it. The address holds the palette, so you can share the link.

The wheel shows where each color sits by hue and saturation.

Saved palettes

No saved palette yet. Saved palettes stay in this browser.

    Contrast checker

    Check that text is easy to read on its background. The page uses the WCAG 2.x ratio.

    Large text sample

    Normal text sample. The quick brown fox jumps over the lazy dog.

    17.85:1

    • AA normal text (4.5:1)Pass
    • AA large text (3:1)Pass
    • AAA normal text (7:1)Pass
    • AAA large text (4.5:1)Pass
    • Controls and icons (3:1)Pass

    Shades and tints

    A tint mixes the picked color with white. A shade mixes it with black.

    • #CFE4E2
      Tint 80%
    • #9FC8C5
      Tint 60%
    • #6FADA8
      Tint 40%
    • #3F918B
      Tint 20%
    • #0F766E
      Base
    • #0C5E58
      Shade 20%
    • #094742
      Shade 40%
    • #062F2C
      Shade 60%
    • #031816
      Shade 80%

    Export the palette

    Copy the code or save a file. It is free and needs no account.

    Questions

    Is the color picker free?

    Yes. It is free. There are no ads, no limits and no sign-up. Export is free too: CSS, Tailwind, JSON, SVG and PNG.

    Do you upload my picture?

    No. The browser reads the picture and draws it on your device. The picture and its colors are never sent to a server. Read more about privacy.

    How do I get the HEX code of a color?

    Drag in the color box or move the sliders. The page shows the HEX code under the box. Click Copy next to it. You can also type a code in any format and the page converts it.

    How do I pick a color from a picture or from the screen?

    To use a picture, choose a file and click a pixel. The loupe shows the pixels around the pointer. In browsers that have an eye dropper, click Pick from the screen to pick any color you can see.

    How do I make a color palette?

    Press the space bar in the palette section, or click New palette. Lock the colors you like. Choose a harmony rule such as complementary, analogous, triadic, tetradic or monochrome. The palette is in the address, so you can share the link.

    What contrast do I need for readable text?

    WCAG level AA needs a ratio of 4.5 to 1 for normal text and 3 to 1 for large text. Level AAA needs 7 to 1 and 4.5 to 1. The checker shows each result and suggests a text color that passes.

    Is the CMYK value exact?

    No. The page uses the simple screen formula. A print shop uses a color profile, so the print result can differ.

    Where are my saved palettes?

    In this browser, in local storage. They never leave your device. If you use another browser, you start again. A shared link always holds its palette.