Colors

Named colours as swatches to copy, and any colour converted into every notation.

palv0.1.0Developerbundled

Install in pal

Ships inside pal. Installing puts an editable copy ahead of the bundled one.

Colors: The swatch grid: recently picked first, then one section per set
The swatch grid: recently picked first, then one section per set
Colors: Convert colour: rgb(255 136 0) as hex, hsl, hwb, oklch, the nearest CSS name and the contrast ratios
Convert colour: rgb(255 136 0) as hex, hsl, hwb, oklch, the nearest CSS name and the contrast ratios
Colors: The detail pane on a conversion: a wide swatch, every notation, the nearest name, contrast on white and black
The detail pane on a conversion: a wide swatch, every notation, the nearest name, contrast on white and black
Colors: What a swatch can do: copy the hex, the rgb, the hsl or the token name
What a swatch can do: copy the hex, the rgb, the hsl or the token name
1 of 4

What it does

Colors

Two palettes. Colors is a grid of 700 named colours as swatch tiles: the 148 CSS names, pal's own tokens from app/src/ui/tokens.css (the light and the dark value of each, accent (light), tag blue (dark)), Tailwind 3.4's palette (slate 500) and Material's 2014 palette (red a200), one section per set. The tile is an SVG of the colour, so it fills the box; the hex is the subtitle. The search matches the name, the hex (#64748b), the token spelling (slate-500) and the set (tailwind). The last twelve picked lead in a Recent section, kept in the extension's storage and rebuilt when the palette lists again.

Convert colour is an input palette: type a colour in any notation and the rows are its conversions, each with a swatch, Enter copying the row. It reads hex in every length with or without the hash (#f80, ff880080), rgb() and rgba() in the comma and the space syntax with percentages and alpha (rgb(255 136 0 / 50%)), a bare triple (255 136 0), hsl() and hsla() with hue units (deg, turn, grad, rad), hwb(), oklch() and the CSS names. The rows: hex, rgb, hsl, hwb, oklch, the CSS name (or the nearest one, tagged close, near or far by its OKLab distance), and the contrast ratio on white and on black, each tagged with what it passes for normal text (AAA at 7, AA at 4.5, AA large at 3, else fail, WCAG 2). Something that is not a colour gives one inert row saying so; with nothing typed, two hint rows.

The detail pane (cmd+i), for a grid tile or a conversion row, shows a wide swatch, every notation, the exact or nearest CSS name, both contrast ratios with their levels, and the complementary colour with three lighter and three darker steps as coloured tags. The maths is extensions/colors/color.ts (sRGB, HSL, HWB, OKLab/OKLCH by Ottosson's matrices, WCAG luminance), unit-tested on its own.

Keyboard

In the grid, arrows move across and down the tiles; Enter runs the first action of the tile under the cursor.

keys action
enter Copy hex: #64748b (on a conversion row: copy that row)
cmd+enter Copy rgb: rgb(100, 116, 139)
cmd+shift+h Copy hsl: hsl(215, 16%, 47%)
cmd+shift+n Copy name: the token, slate-500, aliceblue, tag-blue
cmd+i The detail pane: notations, nearest name, contrast, relatives
cmd+k Every action of the tile

A pick from the grid moves the colour into the Recent section; the core's frecency already moves a picked tile up between listings.

Setup

Nothing to install and no permission: the table is data.json next to the code, generated by bun run extensions/colors/build.ts (the CSS table from color.ts, the tokens read from tokens.css, Tailwind and Material fetched from unpkg) and committed, so nothing is fetched at run time.

No extension settings. Per palette, [palettes.colors.settings]:

key type default what
columns number, 4 to 16 8 Tiles per row in the grid. Read once when the extension loads: after a change, Settings > Restart extension host.

Type convert at the root (or give the palette an alias) to reach the converter: an input palette is never in the index, so its rows only exist inside it.

What it does not do

  • Pick a colour from the screen: the core has no screen-sampling capability and an extension cannot read pixels, so the action is not offered.
  • List every colour you type: the grid is a fixed table; a colour outside it is converted, not stored.
  • Named colours beyond the four sets (no Pantone, no RAL); add a set to build.ts to widen the table.
  • Paste: both palettes copy. Paste the value yourself.

Platforms

macOS and Linux, the same on both: everything is in-process.

Palettes 2

  • Colorscolorsgrid

    The bundled palettes as swatch tiles; recently copied colours first.

    • ↵Copy hex
    • ⌘↵Copy rgb
    • ⌘⇧HCopy hsl
    • ⌘⇧NCopy name
  • Convertconvertinput

    Type a colour in any notation; the rows are its conversions.

    • ↵Copy the row
    • ⌘IContrast, nearest name, relatives

Actions

  • Copy hex`#64748b`; on a conversion row, Copy copies that row.↵
  • Copy rgb`rgb(100, 116, 139)`⌘↵
  • Copy hsl`hsl(215, 16%, 47%)`⌘⇧H
  • Copy nameThe token: `slate-500`, `aliceblue`, `tag-blue`.⌘⇧N

Settings

Colors, [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.