Color Components

The picker modal is portaled to document.body, so using it (drag, presets, hex field, footer buttons, backdrop, Escape) only ever closes the picker — never the host modal. Escape closes the topmost dialog first : the picker when it is open, then « Éditer ».

Live : #3366FF · Footer : #F59E0B

Square on the left, controls on the right. Resize the window / panel to see it collapse back to vertical : collapse="viewport" reacts to the screen, collapse="container" reacts to its own width.

A presentational color chip (2xs → xl), used by the picker presets, lists, legends… The last one shows the empty state : the ordinary border, no fill.

The mark that sits beside a name in a row. A missing colour is never a grey fill — that would read as « its colour is grey ». Each pair below shows the same setting with a colour and without one.

For a tint behind initials or an icon. It goes through color-mix, so a colour served as rgb(…) or named works exactly like a hex one — appending two hex digits does not.