How do I make a random color button?

You have to use a color model and (1) an online service or (2) JavaScript library to select a swatch of colors.

Example Service: I Want Hue
Colors for data scientists. Generate and refine palettes of optimally distinct colors.
http://tools.medialab.sciences-po.fr/iwanthue/index.php

Example Library: Chroma.js
JavaScript library for all kinds of color manipulations 
https://github.com/gka/chroma.js/

Here is the math:

Colour Space Conversions
https://poynton.ca/PDFs/coloureq.pdf

If you keep to all letters you will generate lighter colors.

https://www.w3schools.com/colors/colors_names.asp

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

I forgot to permit the demo:

HSL to RGB ~ Various Color Swatches Sweeping Hue / Saturation / Lightness
https://haversineconsulting.quickbase.com/db/bnscpmym8?a=td

You might in particular be interested in this color swatch report that takes the default Vibrant Success (RGB = x02B8EA), converts to HSL (193, 98.3%, 46.3%) and then sweeps Hue through 360 degrees in increments of 10 degrees using the same Saturation and Lightness values. This give you the ability to create colors similar to the (now blue) Vibrant Success.


Sweep Vibrant Success
https://haversineconsulting.quickbase.com/db/bnscpmym8?a=q&qid=5