VoriTools

Color Picker and Palette

Explore the palette or fine-tune a color in the picker. Use the displayed color value in your CSS or design notes.

Runs locally in your browser

How to pick a colour and read its code

The picker is a flat spectrum field: drag inside the square for saturation and brightness, use the vertical slider for hue and the horizontal one for opacity, or type a colour straight into the field under them. That field always holds the current colour, as #rrggbb while it is fully opaque and as rgba(...) as soon as the opacity slider leaves 100%.

The palette beside the square carries 66 fixed swatches in three rows, and the row underneath keeps the colours you mixed yourself. Picking a colour is a local operation: the page makes no request while you drag, type or click, and no colour value leaves the browser.

  1. Drag inside the square to choose a colour, or click one of the 66 preset swatches to start from a known value.
  2. Fine-tune with the hue slider, then move the opacity slider if the colour needs transparency; the field switches to rgba(...) at that point.
  3. Type or paste a CSS colour into the field when you already know it: #rgb, #rrggbb, #rgba, #rrggbbaa, rgb(), rgba(), hsl(), a name such as red, or transparent. Press Enter to apply it.
  4. Read the value in the field and copy that text into your stylesheet, or click the small ✕ control to clear the selection and start again.

The palette, the value field and what the tool will not do

What the palette remembers

The three top rows are fixed: six greys, ten saturated colours and fifty tinted shades. They never change, and clicking one is not recorded, because a preset is not one of your own colours.

The row below them holds up to seven colours that you picked yourself, newest first: anything you type, click or settle on after dragging is added there. The list is stored in this browser under one key on voritools.com, so it survives a reload on this device, but it is not synced and another browser or device starts empty.

Reading the value field

The field is the tool's output: the current colour written in the shape CSS needs. Opaque colours appear as #rrggbb; colours with an opacity below 100% appear as rgba(...), because six hex digits cannot carry an alpha channel. The tooltip on a swatch and the small preview beside the field show the same value.

Values with alpha written in hex are read the way CSS Color 4 defines them, so #12345678 means #123456 at an alpha of 0x78/255 and is shown as the equivalent rgba(...) value, and #abcd means #aabbccdd. A value the picker cannot read keeps its red border and the page shows the message that the colour could not be parsed.

What this tool will not do

It works on one colour at a time and only in this page: there is no palette export, no CSS variable or JSON download, no contrast or accessibility check, and no colour extraction from a photo or screenshot. The sibling tool for image colours exists for that job.

There is also no copy button; the field is a normal text input, so you copy its contents the way you copy any other value. And because the recent row lives in the browser, clearing site data removes it, while private windows start with an empty row every time.

Recent tools: