How do I make a random color button?

If you use the HSL (Hue, Saturation & Lightness) Color Model you can sweep the Hue (ie color) by linearly adjusting one independent parameter (0 - 360). Likewise using HSL you can sweep Lightness (ie amount of white / black) or Saturation (ie amount of color) by adjusting one independent parameter (0 - 1). The HSL Color Model is the basis of how paints are mixed and is better than the RGB Color Model for controlling the human perception of color.




There are two formulas you can use to generate HSL colors. The first is very long and mathematically complicated as it calculates the RGB from HSL coordinates:

var Number H = Max(Min([Hue (0 - 360)], 360), 0);
var Number S = Max(Min([Saturation (0 - 1)], 1), 0);
var Number L = Max(Min([Lightness (0 - 1)], 1), 0);
var Number C = (1 - Abs(2 * $L - 1)) * $S; //Chroma
var Number X = $C * (1 - Abs(Mod($H / 60, 2) - 1));
var Number m = $L - $C / 2;

var Number Rp = If(
    0 <= $H and $H <  60, $C,
   60 <= $H and $H < 120, $X,
  120 <= $H and $H < 180,  0,
  180 <= $H and $H < 240,  0,
  240 <= $H and $H < 300, $X,
  300 <= $H and $H <= 360, $C
);
var Number Gp = If(
    0 <= $H and $H <  60, $X,
   60 <= $H and $H < 120, $C,
  120 <= $H and $H < 180, $C,
  180 <= $H and $H < 240, $X,
  240 <= $H and $H < 300,  0,
  300 <= $H and $H <= 360,  0
);
var Number Bp = If(
    0 <= $H and $H <  60,  0,
   60 <= $H and $H < 120,  0,
  120 <= $H and $H < 180, $X,
  180 <= $H and $H < 240, $C,
  240 <= $H and $H < 300, $C,
  300 <= $H and $H <= 360, $X
);
var Number iR = Round(255 * ($Rp + $m));
var Number iG = Round(255 * ($Gp + $m));
var Number iB = Round(255 * ($Bp + $m));
var Text RRx = Case(Int($iR/16), 
   0, "0",
   1, "1",
   2, "2",
   3, "3",
   4, "4",
   5, "5",
   6, "6",
   7, "7",
   8, "8",
   9, "9",
  10, "A",
  11, "B",
  12, "C",
  13, "D",
  14, "E",
  15, "F"
);
var Text Rx = Case(Rem($iR, 16), 
   0, "0",
   1, "1",
   2, "2",
   3, "3",
   4, "4",
   5, "5",
   6, "6",
   7, "7",
   8, "8",
   9, "9",
  10, "A",
  11, "B",
  12, "C",
  13, "D",
  14, "E",
  15, "F"
);
var Text GGx = Case(Int($iG/16), 
   0, "0",
   1, "1",
   2, "2",
   3, "3",
   4, "4",
   5, "5",
   6, "6",
   7, "7",
   8, "8",
   9, "9",
  10, "A",
  11, "B",
  12, "C",
  13, "D",
  14, "E",
  15, "F"
);
var Text Gx = Case(Rem($iG, 16), 
   0, "0",
   1, "1",
   2, "2",
   3, "3",
   4, "4",
   5, "5",
   6, "6",
   7, "7",
   8, "8",
   9, "9",
  10, "A",
  11, "B",
  12, "C",
  13, "D",
  14, "E",
  15, "F"
);
var Text BBx = Case(Int($iB/16), 
   0, "0",
   1, "1",
   2, "2",
   3, "3",
   4, "4",
   5, "5",
   6, "6",
   7, "7",
   8, "8",
   9, "9",
  10, "A",
  11, "B",
  12, "C",
  13, "D",
  14, "E",
  15, "F"
);
var Text Bx = Case(Rem($iB, 16), 
   0, "0",
   1, "1",
   2, "2",
   3, "3",
   4, "4",
   5, "5",
   6, "6",
   7, "7",
   8, "8",
   9, "9",
  10, "A",
  11, "B",
  12, "C",
  13, "D",
  14, "E",
  15, "F"
);
"<div style='background-color:#" & 
$RRx & $Rx & $GGx & $Gx & $BBx & $Bx &
";'>" & 
$RRx & $Rx & ":" & $GGx & $Gx & ":" & $BBx & $Bx &
"</div>":

The second formula is short as it makes use of the CSS hsl() function:

var Number H = Max(Min([Hue (0 - 360)], 360), 0);
var Number S = 100 * Max(Min([Saturation (0 - 1)], 1), 0);
var Number L = 100 * Max(Min([Lightness (0 - 1)], 1), 0);

"<div style='background-color:hsl(" & 
$H & "," & $S & "%," & $L & 
"%);'>" & 
"hsl(" & $H & ", " & $S & "%, " & $L & "%)" &
"</div>"


Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=664

https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=665