Rudy's background colour picker (2025) for rudy who taught me so much

ffffff white f0ffff azure e0ffff light cyan f5fffa mint cream f8f8ff ghost white f0f8ff alice blue fff0f5 lavender blush e6e8fa silver f5f5f5 white smoke fffaf0 floral white fafad2 light goldenrod fff8dc cornsilk faebd7 antique white f5f5dc beige ffe4b5 moccasin ffefd5 papaya whip ffdab9 peach puff ffe4c4 bisque ffebcd blanched almond f0e68c khaki f0fff0 honeydew fffff0 ivory fffacd lemon chiffon ffffe0 light yellow faf0e6 linen ffe4e1 misty rose fdf5e6 old lace fff5ee seashell fffafa snow

Written December 3, 1997
Last updated July 10, 1998
Adapted May 23, 2025

original http://r937.com/rudysbg.htm (CodePen)

Source Code

HTML

    <main>
        <!-- white             --><label style="--bgcolor:#ffffff"><input type=radio name=whups value='#ffffff' checked><tt>ffffff</tt> white</label>
        <!-- azure             --><label style="--bgcolor:#f0ffff"><input type=radio name=whups value='#f0ffff'><tt>f0ffff</tt> azure</label>
        <!-- light cyan        --><label style="--bgcolor:#e0ffff"><input type=radio name=whups value='#e0ffff'><tt>e0ffff</tt> light cyan</label>
        <!-- mint cream        --><label style="--bgcolor:#f5fffa"><input type=radio name=whups value='#f5fffa'><tt>f5fffa</tt> mint cream</label>
        <!-- ghost white       --><label style="--bgcolor:#f8f8ff"><input type=radio name=whups value='#f8f8ff'><tt>f8f8ff</tt> ghost white</label>
        <!-- alice blue        --><label style="--bgcolor:#f0f8ff"><input type=radio name=whups value='#f0f8ff'><tt>f0f8ff</tt> alice blue</label>
        <!-- lavender blush    --><label style="--bgcolor:#fff0f5"><input type=radio name=whups value='#fff0f5'><tt>fff0f5</tt> lavender blush</label>
        <!-- silver            --><label style="--bgcolor:#e6e8fa"><input type=radio name=whups value='#e6e8fa'><tt>e6e8fa</tt> silver</label>
        <!-- white smoke       --><label style="--bgcolor:#f5f5f5"><input type=radio name=whups value='#f5f5f5'><tt>f5f5f5</tt> white smoke</label>
        <!-- floral white      --><label style="--bgcolor:#fffaf0"><input type=radio name=whups value='#fffaf0'><tt>fffaf0</tt> floral white</label>
        <!-- light goldenrod   --><label style="--bgcolor:#fafad2"><input type=radio name=whups value='#fafad2'><tt>fafad2</tt> light goldenrod </label>
        <!-- cornsilk          --><label style="--bgcolor:#fff8dc"><input type=radio name=whups value='#fff8dc'><tt>fff8dc</tt> cornsilk</label>
        <!-- antique white     --><label style="--bgcolor:#faebd7"><input type=radio name=whups value='#faebd7'><tt>faebd7</tt> antique white</label>
        <!-- beige             --><label style="--bgcolor:#f5f5dc"><input type=radio name=whups value='#f5f5dc'><tt>f5f5dc</tt> beige</label>
        <!-- moccasin          --><label style="--bgcolor:#ffe4b5"><input type=radio name=whups value='#ffe4b5'><tt>ffe4b5</tt> moccasin</label>
        <!-- papaya whip       --><label style="--bgcolor:#ffefd5"><input type=radio name=whups value='#ffefd5'><tt>ffefd5</tt> papaya whip</label>
        <!-- peach puff        --><label style="--bgcolor:#ffdab9"><input type=radio name=whups value='#ffdab9'><tt>ffdab9</tt> peach puff</label>
        <!-- bisque            --><label style="--bgcolor:#ffe4c4"><input type=radio name=whups value='#ffe4c4'><tt>ffe4c4</tt> bisque</label>
        <!-- blanched almond   --><label style="--bgcolor:#ffebcd"><input type=radio name=whups value='#ffebcd'><tt>ffebcd</tt> blanched almond</label>
        <!-- khaki             --><label style="--bgcolor:#f0e68c"><input type=radio name=whups value='#f0e68c'><tt>f0e68c</tt> khaki</label>
        <!-- honeydew          --><label style="--bgcolor:#f0fff0"><input type=radio name=whups value='#f0fff0'><tt>f0fff0</tt> honeydew</label>
        <!-- ivory             --><label style="--bgcolor:#fffff0"><input type=radio name=whups value='#fffff0'><tt>fffff0</tt> ivory</label>
        <!-- lemon chiffon     --><label style="--bgcolor:#fffacd"><input type=radio name=whups value='#fffacd'><tt>fffacd</tt> lemon chiffon</label>
        <!-- light yellow      --><label style="--bgcolor:#ffffe0"><input type=radio name=whups value='#ffffe0'><tt>ffffe0</tt> light yellow</label>
        <!-- linen             --><label style="--bgcolor:#faf0e6"><input type=radio name=whups value='#faf0e6'><tt>faf0e6</tt> linen</label>
        <!-- misty rose        --><label style="--bgcolor:#ffe4e1"><input type=radio name=whups value='#ffe4e1'><tt>ffe4e1</tt> misty rose</label>
        <!-- old lace          --><label style="--bgcolor:#fdf5e6"><input type=radio name=whups value='#fdf5e6'><tt>fdf5e6</tt> old lace</label>
        <!-- seashell          --><label style="--bgcolor:#fff5ee"><input type=radio name=whups value='#fff5ee'><tt>fff5ee</tt> seashell</label>
        <!-- snow              --><label style="--bgcolor:#fffafa"><input type=radio name=whups value='#fffafa'><tt>fffafa</tt> snow</label>
    </main>

SCSS

body {
  color: #036;
  h1 {
    text-wrap: balance;
    em {
      font-family: system-ui, sans-serif;
      font-weight: 100;
      font-size: 1rem;
    }
  }
  label {
    display: block;
    background: var(--bgcolor);
    padding: 4px;
    font-family: system-ui, sans-serif;
    &:has(input:checked) {
      font-weight: bold;
    }
    input {
      display: none;
    }
  }
}

$colors: "#ffffff", "#f0ffff", "#e0ffff", "#f5fffa", "#f8f8ff", "#f0f8ff", "#fff0f5", "#e6e8fa",
"#f5f5f5", "#fffaf0", "#fafad2", "#fff8dc", "#faebd7", "#f5f5dc", "#ffe4b5", "#ffefd5", "#ffdab9",
"#ffe4c4", "#ffebcd", "#f0e68c", "#f0fff0", "#fffff0", "#fffacd", "#ffffe0", "#faf0e6", "#ffe4e1",
"#fdf5e6", "#fff5ee", "#fffafa";

@each $color in $colors {
  body:has(input[value="#{$color}"]:checked) {
    background: #{$color};
  }
}

@media screen and (min-width: 50ch){
  main {
    columns: 2;
  }

}

@media screen and (min-width: 80ch){
  main {
    columns: 3;
  }

}

CSS (compiled)

body{color:#036}
body h1{text-wrap:balance}
body h1 em{font-family:system-ui,sans-serif;font-weight:100;font-size:1rem}
body label{display:block;background:var(--bgcolor);padding:4px;font-family:system-ui,sans-serif}
body label:has(input:checked){font-weight:bold}
body label input{display:none}
body:has(input[value="#ffffff"]:checked){background:#ffffff}
body:has(input[value="#f0ffff"]:checked){background:#f0ffff}
body:has(input[value="#e0ffff"]:checked){background:#e0ffff}
body:has(input[value="#f5fffa"]:checked){background:#f5fffa}
body:has(input[value="#f8f8ff"]:checked){background:#f8f8ff}
body:has(input[value="#f0f8ff"]:checked){background:#f0f8ff}
body:has(input[value="#fff0f5"]:checked){background:#fff0f5}
body:has(input[value="#e6e8fa"]:checked){background:#e6e8fa}
body:has(input[value="#f5f5f5"]:checked){background:#f5f5f5}
body:has(input[value="#fffaf0"]:checked){background:#fffaf0}
body:has(input[value="#fafad2"]:checked){background:#fafad2}
body:has(input[value="#fff8dc"]:checked){background:#fff8dc}
body:has(input[value="#faebd7"]:checked){background:#faebd7}
body:has(input[value="#f5f5dc"]:checked){background:#f5f5dc}
body:has(input[value="#ffe4b5"]:checked){background:#ffe4b5}
body:has(input[value="#ffefd5"]:checked){background:#ffefd5}
body:has(input[value="#ffdab9"]:checked){background:#ffdab9}
body:has(input[value="#ffe4c4"]:checked){background:#ffe4c4}
body:has(input[value="#ffebcd"]:checked){background:#ffebcd}
body:has(input[value="#f0e68c"]:checked){background:#f0e68c}
body:has(input[value="#f0fff0"]:checked){background:#f0fff0}
body:has(input[value="#fffff0"]:checked){background:#fffff0}
body:has(input[value="#fffacd"]:checked){background:#fffacd}
body:has(input[value="#ffffe0"]:checked){background:#ffffe0}
body:has(input[value="#faf0e6"]:checked){background:#faf0e6}
body:has(input[value="#ffe4e1"]:checked){background:#ffe4e1}
body:has(input[value="#fdf5e6"]:checked){background:#fdf5e6}
body:has(input[value="#fff5ee"]:checked){background:#fff5ee}
body:has(input[value="#fffafa"]:checked){background:#fffafa}
@media screen and (min-width: 50ch){main{columns:2}
}
@media screen and (min-width: 80ch){main{columns:3}
}