{
  "name": "colors",
  "kind": "bundled",
  "title": "Colors",
  "description": "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.",
  "version": "0.2.0",
  "icon": {
    "tile": {
      "glyph": "󰏘",
      "bg": "indigo"
    }
  },
  "author": "pal",
  "spec": "github:zcag/pal/extensions/colors@v0.17.4",
  "source": "https://github.com/zcag/pal-extensions/tree/HEAD/colors",
  "commit": "4d2559cf9c04d0133c97d7c897f19a14acb9eace",
  "manifest": {
    "name": "colors",
    "title": "Colors",
    "description": "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.",
    "version": "0.2.0",
    "icon": {
      "tile": {
        "glyph": "󰏘",
        "bg": "indigo"
      }
    },
    "author": "pal",
    "repo": "bundled",
    "license": "MIT",
    "settings": [
      {
        "kind": "select",
        "id": "format",
        "label": "Copy as",
        "description": "The notation `c` and Copy write; every other notation stays a keystroke away in the picker and the action panel.",
        "options": [
          {
            "id": "hex",
            "title": "Hex (#ff8800)"
          },
          {
            "id": "rgb",
            "title": "rgb(255, 136, 0)"
          },
          {
            "id": "hsl",
            "title": "hsl(32, 100%, 50%)"
          },
          {
            "id": "hwb",
            "title": "hwb(32 0% 0%)"
          },
          {
            "id": "oklch",
            "title": "oklch(0.744 0.181 56.5)"
          },
          {
            "id": "oklab",
            "title": "oklab(0.744 0.078 0.163)"
          },
          {
            "id": "lab",
            "title": "lab(67.75 42.16 74.06)"
          },
          {
            "id": "p3",
            "title": "color(display-p3 0.939 0.558 0.222)"
          },
          {
            "id": "name",
            "title": "The CSS name (nearest when inexact)"
          }
        ],
        "default": "hex"
      },
      {
        "kind": "boolean",
        "id": "uppercase",
        "label": "Uppercase hex",
        "text": "#FF8800 rather than #ff8800",
        "default": false
      },
      {
        "kind": "select",
        "id": "alpha",
        "label": "Alpha",
        "description": "What a translucent colour writes: the alpha kept (`#ff880080`, `rgba(…)`, `/ 0.5`) or dropped, so every copy is opaque.",
        "options": [
          {
            "id": "keep",
            "title": "Keep the alpha"
          },
          {
            "id": "drop",
            "title": "Drop it, copy the opaque colour"
          }
        ],
        "default": "keep"
      },
      {
        "kind": "list",
        "id": "sets",
        "label": "Sets shown",
        "description": "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.",
        "placeholder": "tailwind",
        "default": [
          "css",
          "tailwind",
          "material3",
          "material",
          "apple",
          "catppuccin",
          "rosepine",
          "nord",
          "solarized",
          "pal"
        ]
      },
      {
        "kind": "number",
        "id": "history_size",
        "label": "History size",
        "description": "How many picked and copied colours the history keeps, newest first, one entry per colour.",
        "min": 5,
        "max": 500,
        "default": 50
      }
    ],
    "store": {
      "tagline": "Pick, type or walk a colour, then copy it in any notation",
      "category": "developer",
      "features": [
        "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"
      ],
      "permissions": [],
      "platforms": [
        "macos",
        "linux"
      ],
      "screenshots": [
        {
          "file": "1-picker.png",
          "caption": "The picker: the swatch over the hue strip and the plane, every notation, the nearest tokens, contrast, tints, shades and harmonies"
        },
        {
          "file": "2-shades.png",
          "caption": "Tab onto the shades: the arrows walk the row, the label names the tile, Enter takes it"
        },
        {
          "file": "3-typing.png",
          "caption": "Typing a notation: a digit or # opens the field in the search row, Enter applies it"
        },
        {
          "file": "4-sets.png",
          "caption": "The named sets as swatch grids, one section per set, a filter per set"
        },
        {
          "file": "5-history.png",
          "caption": "The history: every picked and copied colour with when and where from, and the screen pick at the top"
        },
        {
          "file": "6-convert.png",
          "caption": "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"
        }
      ],
      "actions": [
        {
          "title": "Copy",
          "description": "The colour in the notation the `format` setting names; `cmd+c` always copies the hex.",
          "keys": "c, cmd+c"
        },
        {
          "title": "Pick Colour from Screen",
          "description": "Hides the panel and shows the system's loupe; the picked colour comes back into the picker (or, from the root row, onto the clipboard).",
          "keys": "p"
        },
        {
          "title": "Walk the colour",
          "description": "Hue on left/right, lightness on up/down, saturation or chroma on - and +; shift makes the step three to five times bigger.",
          "keys": "left, right, up, down, -, +"
        },
        {
          "title": "Type a notation",
          "description": "A digit or # opens the text field with that character; Enter applies, Escape closes it.",
          "keys": "0-9, #"
        },
        {
          "title": "Focus a row of tiles",
          "description": "Tab moves the focus from the swatch to the tints, the shades and each harmony; the arrows walk the row and Enter uses the tile.",
          "keys": "tab, shift+tab"
        },
        {
          "title": "Open in Picker",
          "description": "From a set tile, a history entry or a converter row: the picker on that colour.",
          "keys": "enter"
        }
      ]
    },
    "palettes": {
      "picker": {
        "title": "Colour Picker",
        "kind": "view",
        "rank": 0,
        "description": "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.",
        "keys": [
          {
            "keys": "c",
            "title": "Copy in the chosen notation"
          },
          {
            "keys": "cmd+c",
            "title": "Copy hex"
          },
          {
            "keys": "cmd+shift+r",
            "title": "Copy rgb (h hsl, o oklch, l lab, p display-p3, n the CSS name)"
          },
          {
            "keys": "p",
            "title": "Pick Colour from Screen"
          },
          {
            "keys": "left, right",
            "title": "Hue -5° / +5° (shift: 15°)"
          },
          {
            "keys": "up, down",
            "title": "Lighter / darker by 2 points (shift: 10)"
          },
          {
            "keys": "-, +",
            "title": "Less / more saturation (chroma in OKLCH)"
          },
          {
            "keys": "m",
            "title": "Edit in HSL or in OKLCH"
          },
          {
            "keys": "0-9, #",
            "title": "Type a notation into the search row; Enter applies, Escape closes"
          },
          {
            "keys": "tab, shift+tab",
            "title": "Focus the next / previous row of tiles; arrows walk it, Enter uses the tile"
          },
          {
            "keys": "h",
            "title": "History"
          },
          {
            "keys": "n",
            "title": "Named Colours"
          },
          {
            "keys": "u",
            "title": "Back to the previous colour"
          },
          {
            "keys": "r",
            "title": "A random colour"
          }
        ]
      },
      "colors": {
        "title": "Named Colours",
        "tier": "catalog",
        "kind": "grid",
        "rank": 1,
        "description": "The named sets as swatch tiles, one section per set, a filter per set; recently opened tiles first.",
        "keys": [
          {
            "keys": "enter",
            "title": "Open in Picker"
          },
          {
            "keys": "cmd+enter",
            "title": "Copy in the chosen notation"
          },
          {
            "keys": "cmd+shift+c",
            "title": "Copy hex"
          },
          {
            "keys": "cmd+shift+n",
            "title": "Copy the token name (`slate-500`, `systemBlue`)"
          },
          {
            "keys": "cmd+i",
            "title": "The detail pane: notations, contrast, where the token is used"
          },
          {
            "keys": "tab",
            "title": "Next set"
          }
        ],
        "settings": [
          {
            "kind": "number",
            "id": "columns",
            "label": "Columns",
            "description": "Tiles per row in the grid.",
            "min": 4,
            "max": 16,
            "default": 8
          }
        ]
      },
      "history": {
        "title": "Colour History",
        "kind": "live",
        "remember": false,
        "rank": 2,
        "description": "Every picked and copied colour, newest first, with when and where from; Pick Colour from Screen at the top.",
        "keys": [
          {
            "keys": "enter",
            "title": "Open in Picker (on the top row: pick from the screen)"
          },
          {
            "keys": "cmd+enter",
            "title": "Copy in the chosen notation"
          },
          {
            "keys": "cmd+shift+c",
            "title": "Copy hex"
          },
          {
            "keys": "cmd+d",
            "title": "Remove from History"
          },
          {
            "keys": "cmd+shift+d",
            "title": "Clear History"
          }
        ]
      },
      "convert": {
        "title": "Convert Colour",
        "kind": "input",
        "rank": 3,
        "inline": true,
        "match": "^\\s*(#[0-9a-f]{3,8}|(rgba?|hsla?|hwb|oklch|oklab|lab|color)\\(.*\\)|[a-z]{3,20})\\s*$",
        "description": "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.",
        "keys": [
          {
            "keys": "enter",
            "title": "Open in Picker"
          },
          {
            "keys": "cmd+enter",
            "title": "Copy the row"
          }
        ]
      }
    }
  },
  "playable": false,
  "updated_at": "2026-11-02T04:38:11Z",
  "url": "https://pal.cagdas.io/extensions/colors",
  "tagline": "Pick, type or walk a colour, then copy it in any notation",
  "category": "developer",
  "screenshots": [
    "https://pal.cagdas.io/extensions/colors/screenshots/1-picker-dark.png",
    "https://pal.cagdas.io/extensions/colors/screenshots/1-picker.png",
    "https://pal.cagdas.io/extensions/colors/screenshots/2-shades-dark.png",
    "https://pal.cagdas.io/extensions/colors/screenshots/2-shades.png",
    "https://pal.cagdas.io/extensions/colors/screenshots/3-typing-dark.png",
    "https://pal.cagdas.io/extensions/colors/screenshots/3-typing.png",
    "https://pal.cagdas.io/extensions/colors/screenshots/4-sets-dark.png",
    "https://pal.cagdas.io/extensions/colors/screenshots/4-sets.png",
    "https://pal.cagdas.io/extensions/colors/screenshots/5-history-dark.png",
    "https://pal.cagdas.io/extensions/colors/screenshots/5-history.png",
    "https://pal.cagdas.io/extensions/colors/screenshots/6-convert-dark.png",
    "https://pal.cagdas.io/extensions/colors/screenshots/6-convert.png"
  ],
  "panel_screenshots": [
    "https://pal.cagdas.io/extensions/colors/screenshots/1-picker.png",
    "https://pal.cagdas.io/extensions/colors/screenshots/2-shades.png",
    "https://pal.cagdas.io/extensions/colors/screenshots/3-typing.png",
    "https://pal.cagdas.io/extensions/colors/screenshots/4-sets.png",
    "https://pal.cagdas.io/extensions/colors/screenshots/5-history.png",
    "https://pal.cagdas.io/extensions/colors/screenshots/6-convert.png"
  ],
  "bar_screenshots": [],
  "panel_screenshots_dark": [
    "https://pal.cagdas.io/extensions/colors/screenshots/1-picker-dark.png",
    "https://pal.cagdas.io/extensions/colors/screenshots/2-shades-dark.png",
    "https://pal.cagdas.io/extensions/colors/screenshots/3-typing-dark.png",
    "https://pal.cagdas.io/extensions/colors/screenshots/4-sets-dark.png",
    "https://pal.cagdas.io/extensions/colors/screenshots/5-history-dark.png",
    "https://pal.cagdas.io/extensions/colors/screenshots/6-convert-dark.png"
  ],
  "bar_screenshots_dark": [],
  "has_bar": false,
  "bar_items": [],
  "has_links": false,
  "links": [],
  "multi": false,
  "has_readme": true
}