Colour and gradient

The picker

bi already paints a hex literal in the colour it names. Picking a different one still meant typing digits, which is what this tool is for: put the cursor on #fb4934 and run :set editor color.

The curve’s arrangement comes up — source, picker split to its right, form down the edge — with focus on the picker.

┌──────────────────────────────────┐
│            ◯                     │   the square: saturation left to right,
│                                  │   value bottom to top, painted at the
└──────────────────────────────────┘   current hue; the ring is the colour
 ▌ red · yellow · green · cyan · blue · magenta · red ▐   the hue strip
 ▌ ░░░░▒▒▒▒▓▓▓▓████████████████████ ▐                    alpha, for eight digits
 ████████████████│███████████████████                    before │ now

The square is 512 pixels a side, the strips sit under it, and the swatch at the bottom shows the colour you opened on to the left of the bar and the colour now to the right, so a change is judged against what it replaces. The component the keys act on carries a bright border.

tuning.c In and out of the colour picker 1 / 5 play

1. start The cursor on a hex literal. bi already paints it in the colour it names; picking a different one is what the tool is for.
2. 1 :set editor colorEnter An HSV square with a hue strip under it, split beside the code, and the form down the edge.
3. 2 jjll The keys move through colour space — h l saturation, j k value — and rewrite the digits on line 25 as they go.
4. 3 Tabll Tab moves to the hue strip; l turns the hue. The swatch at the bottom keeps the colour you opened on to the left of the bar, so the change is judged against what it replaces.
5. 4 Esc Esc closes the picker and puts the cursor back on the literal, which is now the colour you left the square on.

The way in and the way out are the curve editor’s: :set editor color on the literal, Esc back to the text. What the square rewrites is the six digits under the cursor — there is no palette file, no swatch library and nothing to sync.

Keys

A step is a fiftieth of each range — 0.02 of saturation, 7.2° of hue, 5 of the 255 alpha steps — and counts multiply, so 5l is a tenth of the way across. :tool color step 0.1 makes them coarser.

The three yanks go into the register ring exactly as y does in text, so p pastes them into any buffer: #fb4934 for a stylesheet, 0.984, 0.286, 0.204 for a shader, 251, 73, 52 for a byte-oriented API.

A grey remembers what it was. Black has no saturation and grey no hue, and six digits cannot say what they were, so the picker keeps hue and saturation beside the colour: j down to black and k back up returns the same red.

As commands

The form carries R G B A, H S V (or L), Mode and Step, and every one of them turns — move R and the state follows, move H and the digits do. The status row reads #fb4934 h 6 s 71 v 98.

What counts as a colour

# and six or eight hex digits, with the cursor anywhere on them, on the #, or just after the last digit. Quotes around it belong to the language and are left alone. Three-digit CSS shorthand is not picked up, because writing six digits back would change the shape of the literal. Anywhere else, the answer is no colour under the cursor.

Writing back replaces the digits and nothing else: the case is kept, so #FB4934 stays upper, and a six-digit literal stays six — no alpha strip is drawn and no alpha is written.

The gradient bar

A gradient is a list of stops, each a position along 0..1 and a colour. :set editor gradient with the cursor in the list draws the ramp beside the text with a triangle under each stop, the selected one white.

[[0, "#000000ff"], [0.5, "#ff8800ff"], [1, "#ffffffff"]]

The ramp is linear in sRGB between neighbouring stops and flat outside them, which is what CSS and every engine’s default do. The literal is found the way the curve’s is — a bracket scan out to the innermost group whose children each hold one number and one colour — so no layout is needed: a number is a position and a colour is a colour.

tuning.c In and out of the gradient editor 1 / 6 play

1. start The torch stop list in plain C: three rows of a number and a hex string.
2. 1 :set editor gradientEnter The list drawn as a ramp, one triangle per stop, with the form down the edge.
3. 2 Tab Tab walks the stops; the selected triangle is white.
4. 3 lll h and l slide the stop by a step, and the number in the code follows. Stops sort themselves — slide one past its neighbour and the two change places in the ramp and in the text.
5. 4 c c opens the colour picker over this stop — ramp, picker and both forms at once. Moving in the square from here rewrites the hex on line 32, the way l just rewrote the number beside it.
6. 5 Esc×2 Esc closes the picker, Esc again closes the ramp. The stop list is back to being C, carrying whatever the ramp was moved to.

The way in and the way out are the curve editor’s: :set editor gradient on the list, Esc back to the text with the edits already in the buffer. What you slide is the number in the file.

Stops sort themselves. t is clamped to 0..1 and nothing else: slide a stop past its neighbour and the two change places in the list, in the text, and the moved one stays selected. The list an engine reads is always sorted, and the editor never asks you to keep it so.

:tool gradient also takes stop, t, color, step, add [t], delete, pick and yank, and its form shows the stop and its t as readouts with the step underneath. The status row reads stop 2 of 3 t 0.500 #ff8800ff.

Both at once

c on a stop does not replace the bar with the picker — it joins them. The picker’s picture splits to the right of the bar, and its form goes under the gradient’s form, so the two pictures sit side by side and the two forms stack at the edge. Every step the picker takes redraws the ramp, because both are views of one buffer, and Esc or :q in the picker lands you back on the bar.

Closing them

:w and :q are the source’s, as for the curve: :w from any of the three windows writes the buffer, :q closes the tool and puts the cursor back. Closing any one window by hand closes the rest — a form with no picture, or a picture with no form, is half a tool.

The anchor is the byte of the #, or of the gradient’s open bracket. After every change the tool re-reads from there; when the literal is gone it looks again from the source’s cursor, or by its path when the property view opened it, and otherwise says colour lost or gradient lost and blanks the picture until you open it again.