[Cursor] microsoft/pxt#​11292 — add a new color picker block

[IanMatthewHuff]

adds a new color picker block! the motivation here is that we've always had a lot of targets/extensions that define multiple blocks for getting colors in various color spaces. for example, the neopixel extension in micro:bit, the circuit playground editor, pxt-ev3 (for the home button color), some of the boards in pxt-maker, the color fading extension in arcade, etc.

as a result, we have a lot of duplicated color space conversion code in our many repos. given how universal this is to all of our targets, this PR aims to create one color picker block to rule them all!

the new block natively supports all of the usual color formats:

• RGB
• HSV
• HSL
• CMYK
• HEX strings

internally, the color is stored as HSV in a mutation on the block. the reason for this is that the HSV and HSL color spaces have a lot of points that map to the same color in the RGB derived color spaces, so if you compile down to RGB then you get a lot of jumping around for the various HSV and HSL channel values as the hue changes.

on hardware the colors are all actually stored as 24 bit RGB numbers which i believe is universally how we do it in all of our targets. there are new functions on the colorHelpers namespace for converting the various formats to 24 bit RGB.

the UI for the fields is a barebones HSV color picker:

like pauseuntil, this block is optional. unlike pauseuntil, we have a lot of targets where this block probably won't need to be in the default categories that come with the editor. for this reason, i had to a add a new scheme that allows extensions to contribute builtin blocks to the toolbox. in order to have this block appear in the toolbox, you simply need to define a function that has the builtinBlockId="makecode_color_picker" comment annotation like so:

    //% block
    //% builtinBlockId="makecode_color_picker"
    //% color=#0fbc11
    export function __colorPicker(value: number): number {
        return 0
    }

the color parameter is also necessary to make the block match the color of whatever category contains it. adding this will also add monaco toolbox entries for all the various colorHelper functions.

right now the builtinBlockId annotation only supports the color picker, but i plan to add support for pause until and other blocks in the future. the first place this block is going to be used is in the color fading extension in arcade (i have some devious plans to completely overhaul the APIs in that extension)

---

Mirrored from upstream PR: https://​github.com/microsoft/pxt/pull/11292
Created automatically by pr-sxs-human-evals for code-review agent comparison.
(URL wrapped in a code span so GitHub does not create a cross-reference on the upstream timeline.)

---

Note

Medium Risk
Touches block compilation, decompilation, and toolbox generation across the editor; behavior is opt-in but the new conversion and UI paths are broad and user-facing.

Overview
Introduces a shared MakeCode color picker Blockly block (makecode_color_picker) with RGB, HSV, HSL, CMYK, and hex modes, an HSV-based mutation for stable editing, and companion shadow blocks/fields plus a dropdown UI widget.

Adds colorHelpers runtime APIs (ported from color-convert, with ThirdPartyNotice) and Blockly compile/decompile paths so colorHelpers.* calls map to the new block. Extensions opt in via builtinBlockId="makecode_color_picker" on a stub API (with color for category styling); toolbox and Monaco snippets are generated from that annotation instead of a normal block definition.

Also extends FieldSlider CSS variables for reuse by the hue control and minor formatting in pxt-helpers / license text.

^{Reviewed by Cursor Bugbot for commit f58ab97. Bugbot is set up for automated code reviews on this repo. Configure here.}

[IanMatthewHuff]

Originally by THEb0nny on 2026-05-05T17:58:20Z (mirrored from https://​github.com/microsoft/pxt/pull/11292)

This is cool! I needed this earlier

[IanMatthewHuff]

Originally by THEb0nny on 2026-05-05T18:13:54Z (mirrored from https://​github.com/microsoft/pxt/pull/11292)

I think the circle is enough to tell you which color I chose. I think the colored square on the left is unnecessary...

[IanMatthewHuff]

Originally by riknoll on 2026-05-07T22:17:31Z (mirrored from https://​github.com/microsoft/pxt/pull/11292)

@​THEb0nny i'm just copying what most color pickers do for the preview! plus i think having a nice big square makes it way easier to see changes take effect

[IanMatthewHuff]

@cursor review

[cursor]

Cursor Bugbot has reviewed your changes and found 5 potential issues.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit f58ab97. Configure here.}

[cursor]

Format switch ignores inputs

High Severity

After a saved block loads HSV from its mutation, changing the format dropdown re-applies stored colorHSV instead of reading the current channel or hex values. Edits to inputs are overwritten and the converted color no longer matches what the block displays before the switch.

Additional Locations (1)

• pxtblocks/plugins/colorpicker/colorPickerDropdown.ts#L19-L26

 

^{Reviewed by Cursor Bugbot for commit f58ab97. Configure here.}

[cursor]

Toolbox RGB defaults all zero

Medium Severity

Builtin toolbox XML for the color picker sets every RGB shadow NUM field to 0, so new blocks from the toolbox start as black. The inline comment and Monaco snippets use yellow (255, 255, 0), so the default block color does not match the intended example.

 

^{Reviewed by Cursor Bugbot for commit f58ab97. Configure here.}

[cursor]

Toolbox shadows lack format

Medium Severity

Toolbox shadows for makecode_color_picker_number omit the format mutation, so RGB channels initialize as degree fields (max 360) instead of 0–255 RGB. Channel limits and the color UI behave incorrectly until the block reshapes the shadows.

 

^{Reviewed by Cursor Bugbot for commit f58ab97. Configure here.}

[cursor]

Hex mode skips HSV store

Medium Severity

When the format is hex, setColorHSV updates the hex text field but returns without assigning this.colorHSV. Internal HSV stays stale while the hex string changes, so mutations, format switches, and other logic that rely on colorHSV can disagree with the displayed hex color.

 

^{Reviewed by Cursor Bugbot for commit f58ab97. Configure here.}

[cursor]

Hex picker ignores typed hex

Medium Severity

Opening the visual picker from the hex string field uses colorPickerBlock.colorHSV directly and never calls readColorFromInputs(), unlike the numeric channel fields. After typing a hex value, the widget can open on the wrong color until another sync path runs.

 

^{Reviewed by Cursor Bugbot for commit f58ab97. Configure here.}