Colors

Pick, type or walk a colour, then copy it in any notation

palupdated 2026-10-27DeveloperComes with pal

Open in pal

Comes with pal, so a new install already has it; the button finds it in pal again if you removed it. This page can't see what your pal has installed.

Colors: The picker: the swatch over the hue strip and the plane, every notation, the nearest tokens, contrast, tints, shades and harmonies
The picker: the swatch over the hue strip and the plane, every notation, the nearest tokens, contrast, tints, shades and harmonies
Colors: Tab onto the shades: the arrows walk the row, the label names the tile, Enter takes it
Tab onto the shades: the arrows walk the row, the label names the tile, Enter takes it
Colors: Typing a notation: a digit or # opens the field in the search row, Enter applies it
Typing a notation: a digit or # opens the field in the search row, Enter applies it
Colors: The named sets as swatch grids, one section per set, a filter per set
The named sets as swatch grids, one section per set, a filter per set
Colors: The history: every picked and copied colour with when and where from, and the screen pick at the top
The history: every picked and copied colour with when and where from, and the screen pick at the top
Colors: Convert Colour: hsl(30 100% 50%) as hex first, then every notation and the nearest CSS name; the pane has the contrast on white and black
Convert Colour: hsl(30 100% 50%) as hex first, then every notation and the nearest CSS name; the pane has the contrast on white and black
1 of 6

What it does

A colour picker for the keyboard: pick a pixel off the screen, type any notation, or walk hue and lightness with the arrows, then copy the colour in any notation. Also named palettes as swatch grids, a history and a converter.

  • Pick a pixel off the screen with the system's loupe; the Pick Colour row copies it straight away
  • Every notation at once (hex, rgb, hsl, oklch, lab, display-p3, CSS name), plus contrast with AA/AAA badges
  • Arrows walk hue and lightness, - and + saturation; m switches between HSL and OKLCH
  • Tints, shades and harmonies as tiles to pick from
  • Named palettes as swatch grids: CSS, Tailwind, Material, Apple, Catppuccin, Rosé Pine, Nord, Solarized
  • A history of every colour you picked or copied, and a converter for any notation

Palettes 4

  • Colour Pickerpickerview

    The colour under the keys: every notation, tints, shades, harmonies, contrast and the nearest tokens; `p` picks from the screen, a digit types a notation.

    • CCopy in the chosen notation
    • ⌘CCopy hex
    • ⌘⇧RCopy rgb (h hsl, o oklch, l lab, p display-p3, n the CSS name)
    • PPick Colour from Screen
    • ←or→Hue -5° / +5° (shift: 15°)
    • ↑or↓Lighter / darker by 2 points (shift: 10)
    • -orLess / more saturation (chroma in OKLCH)
    • MEdit in HSL or in OKLCH
    • 0-9or#Type a notation into the search row; Enter applies, Escape closes
    • ⇥or⇧⇥Focus the next / previous row of tiles; arrows walk it, Enter uses the tile
    • HHistory
    • NNamed Colours
    • UBack to the previous colour
    • RA random colour
  • Named Colourscolorsgridcatalog

    The named sets as swatch tiles, one section per set, a filter per set; recently opened tiles first.

    • ↵Open in Picker
    • ⌘↵Copy in the chosen notation
    • ⌘⇧CCopy hex
    • ⌘⇧NCopy the token name (`slate-500`, `systemBlue`)
    • ⌘IThe detail pane: notations, contrast, where the token is used
    • ⇥Next set
  • Colour Historyhistorylive

    Every picked and copied colour, newest first, with when and where from; Pick Colour from Screen at the top.

    • ↵Open in Picker (on the top row: pick from the screen)
    • ⌘↵Copy in the chosen notation
    • ⌘⇧CCopy hex
    • ⌘DRemove from History
    • ⌘⇧DClear History
  • Convert Colourconvertinputinline

    Type a colour in any notation; the rows are its conversions. Enter opens the picker on it. At the root a hex, a function notation or a CSS name answers inline under a Convert Colour section.

    • ↵Open in Picker
    • ⌘↵Copy the row

Actions

  • CopyThe colour in the notation the format setting names; cmd+c always copies the hex.Cor⌘C
  • Pick Colour from ScreenHides the panel and shows the system's loupe; the picked colour comes back into the picker (or, from the root row, onto the clipboard).P
  • Walk the colourHue on left/right, lightness on up/down, saturation or chroma on - and +; shift makes the step three to five times bigger.←or→or↑or↓or-or
  • Type a notationA digit or # opens the text field with that character; Enter applies, Escape closes it.0-9or#
  • Focus a row of tilesTab moves the focus from the swatch to the tints, the shades and each harmony; the arrows walk the row and Enter uses the tile.⇥or⇧⇥
  • Open in PickerFrom a set tile, a history entry or a converter row: the picker on that colour.↵

Settings

Extension, [extensions.colors]

format
Hex (#ff8800) select

The notation `c` and Copy write; every other notation stays a keystroke away in the picker and the action panel. One of hex, rgb, hsl, hwb, oklch, oklab, lab, p3, name.

uppercase
Off boolean
alpha
Keep the alpha select

What a translucent colour writes: the alpha kept (`#ff880080`, `rgba(…)`, `/ 0.5`) or dropped, so every copy is opaque. One of keep, drop.

sets
csstailwindmaterial3materialapplecatppuccinrosepinenordsolarizedpal list

Which named sets the grid lists under All: css, tailwind, material3, material, apple, catppuccin, rosepine, nord, solarized, pal. The filter dropdown still reaches every set.

history_size
50 number

How many picked and copied colours the history keeps, newest first, one entry per colour.

Named Colours, [palettes.colors]

columns
8 number

Tiles per row in the grid.

Defaults shown. Change them in pal's settings window or in the config file.

The README

Everything Colors does, key by key, from the extension's own README.md

Colors

A colour picker for the keyboard, the named sets, a history and a converter. Four palettes over one colour maths (colors in @zcag/pal).

Colour Picker is a view level: a large swatch on a sunken well over a hue strip and a saturation/value plane (the ring marks where the colour sits), the colour in hex, rgb, hsl, hwb, oklch, oklab, lab and display-p3 with its CSS name (or the nearest, in OKLab), the nearest Tailwind and Material tokens, the contrast on white, on black and against the previous colour with the WCAG level as a badge, and nine tints, nine shades and the complementary, analogous, triadic, split and tetradic harmonies as tiles. The arrows edit the colour in place, in HSL or in OKLCH (m), where a chroma step stops at the sRGB gamut edge instead of clipping. A digit or # opens a text field in the search row: type any notation, Enter applies it. p picks a pixel off the screen with the system's loupe; the panel hides for it and comes back in the picker on the colour. The colour, the model and the history live in the extension's storage, so Escape and a restart lose nothing.

Named Colours is a grid of 995 swatch tiles, one section per set and a filter per set: the CSS names, Tailwind 3.4, the Material 3 baseline tonal palettes, the 2014 Material palette, Apple's system colours (light and dark), Catppuccin (four flavours), Rosé Pine (three variants), Nord, Solarized and pal's own tokens. The search matches the name, the hex, the token (slate-500, systemBlue, mocha/mauve) and the set; the detail pane says where the token is used. Enter opens a tile in the picker.

Colour History (live, so its rows at the root follow every pick and copy) lists every picked and copied colour, newest first, with where it came from and when, and Pick Colour from Screen as its first row, which is also at the root: the loupe, then the colour copied in the chosen notation with the HUD naming it.

Convert Colour is an input palette: type a colour in any notation and every notation is a row; Enter opens the picker on it, ⌘Enter copies the row.

Keyboard

The picker:

keys action
c, enter Copy in the notation the format setting names (Enter uses a focused tile instead)
cmd+c Copy hex; cmd+shift+r rgb, cmd+shift+h hsl, cmd+shift+o oklch, cmd+shift+l lab, cmd+shift+p display-p3, cmd+shift+n the CSS name
left, right Hue -5° / +5° (shift: 15°)
up, down Lighter / darker by 2 points (shift: 10)
-, + Less / more saturation (chroma in OKLCH)
m Edit in HSL or in OKLCH
0-9, # Type a notation: the field opens with the character, enter applies, escape closes
tab, shift+tab Focus the next / previous row of tiles; left/right walk it, up/down step rows, enter uses the tile
p Pick Colour from Screen
h History
n Named Colours
u Back to the previous colour
r A random colour
escape Leave (or close the text field)

The grid: enter opens the tile in the picker, cmd+enter copies it in the chosen notation, cmd+shift+c the hex, cmd+shift+n the token, cmd+i the detail pane, tab the next set. The history: enter opens, cmd+enter copies, cmd+d removes, cmd+shift+d clears. The converter: enter opens the picker, cmd+enter copies the row.

Setup

Nothing to install. Picking from the screen needs no permission on macOS (NSColorSampler, 10.15 and later); on Linux the desktop's screenshot portal draws the picker and may ask once. The sets are data.json next to the code, generated by bun run colors/build.ts (the CSS table from the SDK's colors, the tokens read from tokens.css, Tailwind and Material fetched from unpkg, Material 3 computed from the baseline seed with @material/material-color-utilities from esm.sh, Catppuccin from its GitHub palette; Apple, Rosé Pine, Nord and Solarized are hand-kept in sets.ts) and committed, so nothing is fetched at run time.

Settings, [extensions.colors]:

key type default what
format hex, rgb, hsl, hwb, oklch, oklab, lab, p3, name hex What c, Copy and the grid's cmd+enter write.
uppercase boolean false #FF8800 rather than #ff8800.
alpha keep, drop keep A translucent colour copies with its alpha, or as the opaque colour.
sets list of set ids every set Which sets the grid lists under All: css, tailwind, material3, material, apple, catppuccin, rosepine, nord, solarized, pal. The dropdown reaches every set.
history_size number, 5 to 500 50 How many colours the history keeps.

Per palette, [palettes.colors.settings]: columns (4 to 16, default 8), tiles per row in the grid, read once when the extension loads.

What it does not do

  • A pointer: the plane and the strip are drawn, not clicked; the arrows and the typed notation move the colour.
  • Colours outside sRGB: a color(display-p3 …) beyond it is clipped per channel on the way in, and a chroma step in OKLCH stops at the edge.
  • Named colours beyond the ten sets (no Pantone, no RAL); add a set to build.ts or sets.ts to widen the table.
  • Paste: the palettes copy. Paste the value yourself.

Platforms

macOS and Linux. The screen pick is NSColorSampler on macOS and the org.freedesktop.portal.Screenshot.PickColor portal on Linux (xdg-desktop- portal with a backend that implements it: GNOME, KDE, wlroots via xdg-desktop-portal-wlr do); everything else is in-process.