Share Immersive color picker

Copy link

November 04, 2025

Immersive color picker

Live testing https://companion.benetou.fr/index.html?username=q4_named_color_picker

11 lines of JavaScript :

fetch('colors.json').then( res => res.json() ).then( colors => {

colors.map( c => {

let boxEl = document.createElement("a-box")

boxEl.id = 'color_'+c.name

let [r,g,b] = c.rgb.replace('RGB(','').replace(')','').split(',').map( n => Number(n)/100 )

let pos = ${1-r} ${0.5+g} ${-0.5-b}

boxEl.setAttribute("position", pos)

boxEl.initialPosition = pos

boxEl.setAttribute("scale", ".1 .1 .1")

boxEl.setAttribute("color", c.name)

boxEl.setAttribute("target", "")

boxEl.setAttribute("onpicked", "setFeedbackHUD('color'+selectedElements.at(-1).element.getAttribute('color'))" )

boxEl.setAttribute("onreleased", "let el = selectedElements.at(-1).element; el.setAttribute('position',el.initialPosition)" )

AFRAME.scenes[0].appendChild(boxEl)

Inspired by https://news.ycombinator.com/item?id=45748816

Dataset https://gist.github.com/jennyknuth/e2d9ee930303d5a5fe8862c6e31819c5

...more