The iterative colour picker script from the Perception Census 2022 'Fundamentals of Perception' at https://perceptioncensus.dreamachine.world/

perception-color.js

function addClick(){
    colorPickerStatus.nClicks = colorPickerStatus.nClicks + 1;
}

function restartClicks() {
    colorPickerStatus.nClicks = 0;
}

function restartPicker() {
    colorPickerStatus.nClicks = 0;
    colorPickerStatus.indexinc = 30;
    colorPickerStatus.firsttime = true;
    colorPickerStatus.maximizeT = true;
    colorPickerStatus.testCompleted = false;

    drawPickerTable();

    document.getElementById("pickerTable").classList.remove("hideDiv");
    document.getElementById("pickerCompleted").classList.add("hideDiv");
}


function solveShowRGB(){
    if(colorPickerStatus.showRGB){
        hideRgbValues();
        colorPickerStatus.showRGB = false;
    }else{
        if(colorPickerStatus.maximizeT){
            showRgbValues();
        } else if(!colorPickerStatus.maximizeT){
            showCenterRGBValue();
        }
        colorPickerStatus.showRGB = true;
    }
}

var colorPickerStatus = {
    showRGB: false,
    indexinc: 30,
    maximizeT: true,
    firsttime: true,
    nClicks: 0,
    usageStats: true,
    visibleTable: true,
    visibleHelp: true,
    displayA4: false,
    fullscreen: false,
    flagSegure: false,
    flagSecureA4: false,
    preselection:true,
    testCompleted: false,
    getBiggerRange: function (range) {
        switch (range){
            case 30:
                return 30;
            case 18:
                return 30;
            case 18*0.6:
                return 18;
            case 18*0.6*0.6:
                return 18*0.6;
            default:
                alert("Error de rango");
                break
        }
    }
};

function sleep(milliseconds) {
    var start = new Date().getTime();
    for (var i = 0; i < 1e7; i++) {
        if ((new Date().getTime() - start) > milliseconds){
            break;
        }
    }
}



function load(){
    try{
        drawPickerTable();

    }catch(error){
        alert(error.message);
    }
}

function drawPickerTable(){
    document.getElementById("pt11").style.backgroundColor = "rgb(171,178,40)";
    document.getElementById("pt12").style.backgroundColor = "rgb(255,200,0)";
    document.getElementById("pt13").style.backgroundColor = "rgb(246,117,40)";
    document.getElementById("pt21").style.backgroundColor = "rgb(38,166,109)";
    document.getElementById("pt22").style.backgroundColor = "rgb(119,119,118)";
    document.getElementById("pt23").style.backgroundColor = "rgb(186,58,70)";
    document.getElementById("pt31").style.backgroundColor = "rgb(0,182,151)";
    document.getElementById("pt32").style.backgroundColor = "rgb(0,152,190)";
    document.getElementById("pt33").style.backgroundColor = "rgb(128,87,144)";
}

function setModalDisplay(visible) {
    document.getElementById('modal').style.display = visible ? 'flex' : 'none';
}

function updatepickerTableEvent(event, dec){

    //stop colour picker update if the test is completed
    if(colorPickerStatus.testCompleted == true) {
        return;
    }

    if(!dec){
        colorPickerStatus.preselection = false;
    }

    addClick();
    if(colorPickerStatus.firsttime){
        chronoStart();
        colorPickerStatus.firsttime = false;
    }
    var bgColor = getColor(event);

    bgColor = bgColor.substring(4, bgColor.length-1)
        .replace(/ /g, '')
        .split(',');

    //check if the selected colour is the same as the current selection
    var curColor = document.getElementById("pt22").style.backgroundColor;
    curColor = curColor.substring(4, curColor.length-1)
        .replace(/ /g, '')
        .split(',');

    if(event.id != 'pt22' && curColor[0] == bgColor[0] && curColor[1] == bgColor[1] && curColor[2] == bgColor[2]) {
        setModalDisplay(true);
        return;
    }

    if(dec){
        if(colorPickerStatus.indexinc>7) {
            if(!colorPickerStatus.preselection){
                colorPickerStatus.indexinc = colorPickerStatus.indexinc * 0.6;
            }
            updatepickerTablev5(bgColor[0],bgColor[1],bgColor[2]);
            colorPickerStatus.preselection = false;
        }
        if(colorPickerStatus.maximizeT && colorPickerStatus.indexinc < 7){
            centrePickerTable();

            if(colorPickerStatus.showRGB){
                showCenterRGBValue();
            }
            return;
        }
        if(!colorPickerStatus.maximizeT && colorPickerStatus.indexinc < 7){
            updatepickerTablev5(bgColor[0],bgColor[1],bgColor[2]);
            maximizePickerTable();
            if(colorPickerStatus.showRGB) {
                showRgbValues();
            }
            colorPickerStatus.maximizeT = true;
        }
        return;
    }
    if(colorPickerStatus.maximizeT){
        updatepickerTablev5(bgColor[0],bgColor[1],bgColor[2]);
    }

}

function stringRoundRGB(r, g , b){
    r = Math.round(r);
    g = Math.round(g);
    b = Math.round(b);
    return rgbToStringRGB(r,g,b);
}

function fillPickerTable(backgrounds){
    var backGCount = 0;
    for (var i = 0, row; row = getPickerTable().rows[i]; i++) {
        for (var j = 0, col; col = row.cells[j]; j++) {
            col.style.backgroundColor = backgrounds[backGCount];
            backGCount += 1;
        }
    }
}

function updatepickerTablev5(r,g,b){

    //document.getElementById("selectedColour").style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
    var backgrounds = [];

    if(r == 255 && g == 255) {
        backgrounds[0]  = stringRoundRGB(sumColor(r,colorPickerStatus.indexinc),sumColor(g,colorPickerStatus.indexinc), sumColor(b,-colorPickerStatus.indexinc));
    }else {
        backgrounds[0] = stringRoundRGB(sumColor(r,colorPickerStatus.indexinc), sumColor(g,colorPickerStatus.indexinc), b);
    }

    backgrounds[1] = stringRoundRGB(sumColor(r,colorPickerStatus.indexinc), sumColor(g,colorPickerStatus.indexinc), sumColor(b,colorPickerStatus.indexinc));

    if(r == 255){
        backgrounds[2] = stringRoundRGB(sumColor(r,colorPickerStatus.indexinc), sumColor(g,-colorPickerStatus.indexinc), sumColor(b,-colorPickerStatus.indexinc));

    }else{
        backgrounds[2] = stringRoundRGB(sumColor(r,colorPickerStatus.indexinc), g, b);
    }

    hsv = rgb2hsv(r,g,b);

    /*var hue = hsv.h;
    var hplus = sumHue(hue*360,colorPickerStatus.indexinc);
    var hminus = sumHue(hue*360,-colorPickerStatus.indexinc);
    var rgbplus = hsv2rgb(hplus,hsv.s,hsv.v);
    var rgbminus = hsv2rgb(hminus,hsv.s,hsv.v);*/

    var sat = hsv.s;
    var splus = sumSaturation(sat,colorPickerStatus.indexinc);
    var sminus = sumSaturation(sat,-colorPickerStatus.indexinc);
    var rgbminus = hsv2rgb(hsv.h*360,sminus,hsv.v);
    var rgbplus = hsv2rgb(hsv.h*360,splus,hsv.v);

    backgrounds[3]= stringRoundRGB(rgbminus.r, rgbminus.g, rgbminus.b);
    backgrounds[4]= rgbToStringRGB(r, g, b);
    backgrounds[5]= stringRoundRGB(rgbplus.r, rgbplus.g, rgbplus.b);

    if(g == 255){
        backgrounds[6]= stringRoundRGB(sumColor(r,-colorPickerStatus.indexinc), sumColor(g,colorPickerStatus.indexinc), sumColor(b,-colorPickerStatus.indexinc));
    }else {

        backgrounds[6] = stringRoundRGB(Math.round(r), Math.round(sumColor(g,colorPickerStatus.indexinc)), Math.round(b));
    }

    backgrounds[7] = stringRoundRGB(sumColor(r,-colorPickerStatus.indexinc), sumColor(g,-colorPickerStatus.indexinc), sumColor(b,-colorPickerStatus.indexinc));

    if(b == 255){
        backgrounds[8] = stringRoundRGB(sumColor(r,-colorPickerStatus.indexinc), sumColor(g,-colorPickerStatus.indexinc), sumColor(b,colorPickerStatus.indexinc));
    }else{
        backgrounds[8] = stringRoundRGB(r, g, sumColor(b,colorPickerStatus.indexinc));
    }

    fillPickerTable(backgrounds);

    loadCalibrationValues(r,g,b);

    if(colorPickerStatus.showRGB && colorPickerStatus.maximizeT) {
        showRgbValues();
    }
    else if(colorPickerStatus.showRGB && !colorPickerStatus.maximizeT){
        showCenterRGBValue();
    }
}

function centrePickerTable(){
    /*
    for (var i = 0, row; row = getPickerTable().rows[i]; i++) {
        for (var j = 0, col; col = row.cells[j]; j++) {
            if(col.id != "pt22"){
                col.style.backgroundColor = "rgb(255,255,255)";
                //col.style.border = 0;
            }
        }
    }*/

    colorPickerStatus.maximizeT = false;
    colorPickerStatus.testCompleted = true;
    document.getElementById("pickerTable").classList.add("hideDiv");
    document.getElementById("pickerCompleted").classList.remove("hideDiv");
    document.getElementById("finalColour").style.backgroundColor = document.getElementById("pt22").style.backgroundColor
}

function centrePickReverse() {
    colorPickerStatus.maximizeT = true;
    colorPickerStatus.testCompleted = false;

    document.getElementById("pickerTable").classList.remove("hideDiv");
    document.getElementById("pickerCompleted").classList.add("hideDiv");
}

/*
function setTableBorders(){
    function maximizePickerTable(){
        for (var i = 0, row; row = getPickerTable().rows[i]; i++) {
            for (var j = 0, col; col = row.cells[j]; j++) {
                col.style.border = "1px solid grey";
            }
        }
    }
}
*/
function maximizePickerTable(){
    for (var i = 0, row; row = getPickerTable().rows[i]; i++) {
        for (var j = 0, col; col = row.cells[j]; j++) {
            if(col.id != "pt22"){
                col.style.border = "1px solid grey";
            }
        }
    }
}
function showCenterRGBValue(){
    hideRgbValues();
    getCenterTd().innerHTML = getCenterTd().style.backgroundColor;
}

function showRgbValues(){
    for (var i = 0, row; row = getPickerTable().rows[i]; i++) {
        for (var j = 0, col; col = row.cells[j]; j++) {
            col.innerHTML = col.style.backgroundColor;
        }
    }
}

function hideRgbValues(){
    for (var i = 0, row; row = getPickerTable().rows[i]; i++) {
        for (var j = 0, col; col = row.cells[j]; j++) {
            col.innerHTML = "";
        }
    }
}

function getPickerTable(){
    return document.getElementById("pickerTable");
}

function getColor(element) {
    var bgColor = window.getComputedStyle(element).backgroundColor;
    //var bgColor = $(element).css('background-color');
    return bgColor;
}

function getCenterTd(){
    return document.getElementById("pt22");
}


function downloadSelection(){

    try{
        var texto = "";
        var currentdate = new Date();

		var rgb = stringRGBToRGB(document.getElementById("pt22").style.backgroundColor);
		var crgb;
		var redGamma, greenGamma, blueGamma, redA, greenA, blueA;
		var perc = 0;

        let data = {
            time_taken :  strtime,
            number_of_clicks : colorPickerStatus.nClicks,
            selected_colour : rgb.r + ',' + rgb.g + ',' + rgb.b,
            raw_output : 1,
        };
        saveForm(data)
        //saveForm({ 'rgb': rgb, 'time':strtime, 'clicks' : colorPickerStatus.nClicks})

    }catch(error){
        alert(error.message)
    }

}