Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h1>Color Browser (defective)</h1>
<color-browser class="stack"></color-browser>
              
            
!

CSS

              
                *,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --h-size: 60ch;
  --spacing: 0.5rem;
}

body {
  max-width: calc(var(--h-size) + 2 * var(--spacing));
  margin: var(--spacing) auto;
  padding-inline: var(--spacing);
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.stack > * {
  margin-block: 0;

  & + * {
    margin-top: var(--spacing);
  }
}

h1 {
  font-size: 1.2rem;
}

color-browser {
  display: block;
  max-width: 20rem; /* XXX: magic number */

  ul {
    --bg-color: #FFF;
    --shadow-color: #0003;
    --shadow-size: var(--spacing);

    max-height: 50vh;
    overflow: auto;
    padding-inline: 0;
    list-style-type: none;
    /* cf. https://lea.verou.me/blog/2012/04/background-attachment-local/ */
    background: linear-gradient(var(--bg-color) 30%, transparent),
        linear-gradient(transparent, var(--bg-color) 70%) 0 100%,
        radial-gradient(farthest-side at 50% 0, var(--shadow-color), transparent),
        radial-gradient(farthest-side at 50% 100%, var(--shadow-color), transparent) 0 100%;
    background-size: 100% calc(4 * var(--shadow-size)),
        100% calc(4 * var(--shadow-size)),
        100% calc(2 * var(--shadow-size)),
        100% calc(2 * var(--shadow-size));
    background-attachment: local, local, scroll, scroll;
    background-repeat: no-repeat;
  }

  li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: var(--spacing);
    align-items: center;

    span {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    code {
      white-space: pre;

      &::before {
        content: "🎨 ";
      }
    }
  }

  form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--spacing);
    align-items: end;
  }

  label {
    display: block;

    &:not(:has(input[type=checkbox])) span {
      display: block;
      font-size: 0.8em;
    }

    &:has(input[type=checkbox]) span::before {
      content: " ";
    }
  }

  input[type=search] {
    width: 100%;
  }

  input[type=color] {
    width: 1.4rem;
    height: 1.4rem;
    border: none;
    padding: 0;
    background-color: transparent;
  }
}
              
            
!

JS

              
                let COLORS = namedColors();

customElements.define("color-browser", class ColorBrowser extends HTMLElement {
  query = null;
  rgb = false;

  connectedCallback() {
    this.#render();
    this.addEventListener("input", this);
    this.addEventListener("change", this);
  }

  handleEvent(ev) {
    let el = ev.target;
    switch(ev.type) {
    case "change":
      if(el.type === "checkbox") {
        this.rgb = el.checked;
        this.#render();
      }
      break;
    case "input":
      if(el.type === "search") {
        this.query = el.value.toLowerCase();
        this.#render();
      }
      break;
    }
  }

  get colors() {
    let { query } = this;
    if(!query) {
      return [...COLORS];
    }

    return COLORS.filter(color => color.name.toLowerCase().includes(query));
  }

  #render() {
    this.replaceChildren();
    this.append(renderControls(), renderPalette(this.colors));
  }
});

function renderControls() {
  return makeElement("form", {
    method: "dialog",
    children: [
      createField("search", "Search"),
      createField("checkbox", "RGB")
    ]
  });
}

function renderPalette(colors) {
  let items = [];
  for(let color of colors) {
    let item = document.createElement("li");
    items.push(item);

    let value = color.hex;
    makeElement("input", {
      parent: item,
      type: "color",
      value
    });
    makeElement("span", {
      parent: item,
      text: color.name
    });
    makeElement("code", {
      parent: item,
      text: value
    });
  }

  let list = document.createElement("ul");
  list.append(...items);
  return list;
}

function createField(type, caption) {
  let children = [
    makeElement("span", { text: caption }),
    makeElement("input", { type })
  ];
  return makeElement("label", {
    children: type === "checkbox" ? children.reverse() : children
  });
}

function makeElement(tag, { parent, children, text, ...attribs }) {
  let el = document.createElement(tag);
  if(text) {
    el.textContent = text;
  }
  for(let [name, value] of Object.entries(attribs)) {
    el.setAttribute(name, value);
  }
  if(children) {
    el.append(...children);
  }
  parent?.appendChild(el);
  return el;
}

// cf. <https://www.w3.org/TR/css-color-3/#svg-color>
function namedColors() {
  return [{
    name: "aliceblue",
    hex: "#F0F8FF",
    rgb: "240,248,255"
  }, {
    name: "antiquewhite",
    hex: "#FAEBD7",
    rgb: "250,235,215"
  }, {
    name: "aqua",
    hex: "#00FFFF",
    rgb: "0,255,255"
  }, {
    name: "aquamarine",
    hex: "#7FFFD4",
    rgb: "127,255,212"
  }, {
    name: "azure",
    hex: "#F0FFFF",
    rgb: "240,255,255"
  }, {
    name: "beige",
    hex: "#F5F5DC",
    rgb: "245,245,220"
  }, {
    name: "bisque",
    hex: "#FFE4C4",
    rgb: "255,228,196"
  }, {
    name: "black",
    hex: "#000000",
    rgb: "0,0,0"
  }, {
    name: "blanchedalmond",
    hex: "#FFEBCD",
    rgb: "255,235,205"
  }, {
    name: "blue",
    hex: "#0000FF",
    rgb: "0,0,255"
  }, {
    name: "blueviolet",
    hex: "#8A2BE2",
    rgb: "138,43,226"
  }, {
    name: "brown",
    hex: "#A52A2A",
    rgb: "165,42,42"
  }, {
    name: "burlywood",
    hex: "#DEB887",
    rgb: "222,184,135"
  }, {
    name: "cadetblue",
    hex: "#5F9EA0",
    rgb: "95,158,160"
  }, {
    name: "chartreuse",
    hex: "#7FFF00",
    rgb: "127,255,0"
  }, {
    name: "chocolate",
    hex: "#D2691E",
    rgb: "210,105,30"
  }, {
    name: "coral",
    hex: "#FF7F50",
    rgb: "255,127,80"
  }, {
    name: "cornflowerblue",
    hex: "#6495ED",
    rgb: "100,149,237"
  }, {
    name: "cornsilk",
    hex: "#FFF8DC",
    rgb: "255,248,220"
  }, {
    name: "crimson",
    hex: "#DC143C",
    rgb: "220,20,60"
  }, {
    name: "cyan",
    hex: "#00FFFF",
    rgb: "0,255,255"
  }, {
    name: "darkblue",
    hex: "#00008B",
    rgb: "0,0,139"
  }, {
    name: "darkcyan",
    hex: "#008B8B",
    rgb: "0,139,139"
  }, {
    name: "darkgoldenrod",
    hex: "#B8860B",
    rgb: "184,134,11"
  }, {
    name: "darkgray",
    hex: "#A9A9A9",
    rgb: "169,169,169"
  }, {
    name: "darkgreen",
    hex: "#006400",
    rgb: "0,100,0"
  }, {
    name: "darkgrey",
    hex: "#A9A9A9",
    rgb: "169,169,169"
  }, {
    name: "darkkhaki",
    hex: "#BDB76B",
    rgb: "189,183,107"
  }, {
    name: "darkmagenta",
    hex: "#8B008B",
    rgb: "139,0,139"
  }, {
    name: "darkolivegreen",
    hex: "#556B2F",
    rgb: "85,107,47"
  }, {
    name: "darkorange",
    hex: "#FF8C00",
    rgb: "255,140,0"
  }, {
    name: "darkorchid",
    hex: "#9932CC",
    rgb: "153,50,204"
  }, {
    name: "darkred",
    hex: "#8B0000",
    rgb: "139,0,0"
  }, {
    name: "darksalmon",
    hex: "#E9967A",
    rgb: "233,150,122"
  }, {
    name: "darkseagreen",
    hex: "#8FBC8F",
    rgb: "143,188,143"
  }, {
    name: "darkslateblue",
    hex: "#483D8B",
    rgb: "72,61,139"
  }, {
    name: "darkslategray",
    hex: "#2F4F4F",
    rgb: "47,79,79"
  }, {
    name: "darkslategrey",
    hex: "#2F4F4F",
    rgb: "47,79,79"
  }, {
    name: "darkturquoise",
    hex: "#00CED1",
    rgb: "0,206,209"
  }, {
    name: "darkviolet",
    hex: "#9400D3",
    rgb: "148,0,211"
  }, {
    name: "deeppink",
    hex: "#FF1493",
    rgb: "255,20,147"
  }, {
    name: "deepskyblue",
    hex: "#00BFFF",
    rgb: "0,191,255"
  }, {
    name: "dimgray",
    hex: "#696969",
    rgb: "105,105,105"
  }, {
    name: "dimgrey",
    hex: "#696969",
    rgb: "105,105,105"
  }, {
    name: "dodgerblue",
    hex: "#1E90FF",
    rgb: "30,144,255"
  }, {
    name: "firebrick",
    hex: "#B22222",
    rgb: "178,34,34"
  }, {
    name: "floralwhite",
    hex: "#FFFAF0",
    rgb: "255,250,240"
  }, {
    name: "forestgreen",
    hex: "#228B22",
    rgb: "34,139,34"
  }, {
    name: "fuchsia",
    hex: "#FF00FF",
    rgb: "255,0,255"
  }, {
    name: "gainsboro",
    hex: "#DCDCDC",
    rgb: "220,220,220"
  }, {
    name: "ghostwhite",
    hex: "#F8F8FF",
    rgb: "248,248,255"
  }, {
    name: "gold",
    hex: "#FFD700",
    rgb: "255,215,0"
  }, {
    name: "goldenrod",
    hex: "#DAA520",
    rgb: "218,165,32"
  }, {
    name: "gray",
    hex: "#808080",
    rgb: "128,128,128"
  }, {
    name: "green",
    hex: "#008000",
    rgb: "0,128,0"
  }, {
    name: "greenyellow",
    hex: "#ADFF2F",
    rgb: "173,255,47"
  }, {
    name: "grey",
    hex: "#808080",
    rgb: "128,128,128"
  }, {
    name: "honeydew",
    hex: "#F0FFF0",
    rgb: "240,255,240"
  }, {
    name: "hotpink",
    hex: "#FF69B4",
    rgb: "255,105,180"
  }, {
    name: "indianred",
    hex: "#CD5C5C",
    rgb: "205,92,92"
  }, {
    name: "indigo",
    hex: "#4B0082",
    rgb: "75,0,130"
  }, {
    name: "ivory",
    hex: "#FFFFF0",
    rgb: "255,255,240"
  }, {
    name: "khaki",
    hex: "#F0E68C",
    rgb: "240,230,140"
  }, {
    name: "lavender",
    hex: "#E6E6FA",
    rgb: "230,230,250"
  }, {
    name: "lavenderblush",
    hex: "#FFF0F5",
    rgb: "255,240,245"
  }, {
    name: "lawngreen",
    hex: "#7CFC00",
    rgb: "124,252,0"
  }, {
    name: "lemonchiffon",
    hex: "#FFFACD",
    rgb: "255,250,205"
  }, {
    name: "lightblue",
    hex: "#ADD8E6",
    rgb: "173,216,230"
  }, {
    name: "lightcoral",
    hex: "#F08080",
    rgb: "240,128,128"
  }, {
    name: "lightcyan",
    hex: "#E0FFFF",
    rgb: "224,255,255"
  }, {
    name: "lightgoldenrodyellow",
    hex: "#FAFAD2",
    rgb: "250,250,210"
  }, {
    name: "lightgray",
    hex: "#D3D3D3",
    rgb: "211,211,211"
  }, {
    name: "lightgreen",
    hex: "#90EE90",
    rgb: "144,238,144"
  }, {
    name: "lightgrey",
    hex: "#D3D3D3",
    rgb: "211,211,211"
  }, {
    name: "lightpink",
    hex: "#FFB6C1",
    rgb: "255,182,193"
  }, {
    name: "lightsalmon",
    hex: "#FFA07A",
    rgb: "255,160,122"
  }, {
    name: "lightseagreen",
    hex: "#20B2AA",
    rgb: "32,178,170"
  }, {
    name: "lightskyblue",
    hex: "#87CEFA",
    rgb: "135,206,250"
  }, {
    name: "lightslategray",
    hex: "#778899",
    rgb: "119,136,153"
  }, {
    name: "lightslategrey",
    hex: "#778899",
    rgb: "119,136,153"
  }, {
    name: "lightsteelblue",
    hex: "#B0C4DE",
    rgb: "176,196,222"
  }, {
    name: "lightyellow",
    hex: "#FFFFE0",
    rgb: "255,255,224"
  }, {
    name: "lime",
    hex: "#00FF00",
    rgb: "0,255,0"
  }, {
    name: "limegreen",
    hex: "#32CD32",
    rgb: "50,205,50"
  }, {
    name: "linen",
    hex: "#FAF0E6",
    rgb: "250,240,230"
  }, {
    name: "magenta",
    hex: "#FF00FF",
    rgb: "255,0,255"
  }, {
    name: "maroon",
    hex: "#800000",
    rgb: "128,0,0"
  }, {
    name: "mediumaquamarine",
    hex: "#66CDAA",
    rgb: "102,205,170"
  }, {
    name: "mediumblue",
    hex: "#0000CD",
    rgb: "0,0,205"
  }, {
    name: "mediumorchid",
    hex: "#BA55D3",
    rgb: "186,85,211"
  }, {
    name: "mediumpurple",
    hex: "#9370DB",
    rgb: "147,112,219"
  }, {
    name: "mediumseagreen",
    hex: "#3CB371",
    rgb: "60,179,113"
  }, {
    name: "mediumslateblue",
    hex: "#7B68EE",
    rgb: "123,104,238"
  }, {
    name: "mediumspringgreen",
    hex: "#00FA9A",
    rgb: "0,250,154"
  }, {
    name: "mediumturquoise",
    hex: "#48D1CC",
    rgb: "72,209,204"
  }, {
    name: "mediumvioletred",
    hex: "#C71585",
    rgb: "199,21,133"
  }, {
    name: "midnightblue",
    hex: "#191970",
    rgb: "25,25,112"
  }, {
    name: "mintcream",
    hex: "#F5FFFA",
    rgb: "245,255,250"
  }, {
    name: "mistyrose",
    hex: "#FFE4E1",
    rgb: "255,228,225"
  }, {
    name: "moccasin",
    hex: "#FFE4B5",
    rgb: "255,228,181"
  }, {
    name: "navajowhite",
    hex: "#FFDEAD",
    rgb: "255,222,173"
  }, {
    name: "navy",
    hex: "#000080",
    rgb: "0,0,128"
  }, {
    name: "oldlace",
    hex: "#FDF5E6",
    rgb: "253,245,230"
  }, {
    name: "olive",
    hex: "#808000",
    rgb: "128,128,0"
  }, {
    name: "olivedrab",
    hex: "#6B8E23",
    rgb: "107,142,35"
  }, {
    name: "orange",
    hex: "#FFA500",
    rgb: "255,165,0"
  }, {
    name: "orangered",
    hex: "#FF4500",
    rgb: "255,69,0"
  }, {
    name: "orchid",
    hex: "#DA70D6",
    rgb: "218,112,214"
  }, {
    name: "palegoldenrod",
    hex: "#EEE8AA",
    rgb: "238,232,170"
  }, {
    name: "palegreen",
    hex: "#98FB98",
    rgb: "152,251,152"
  }, {
    name: "paleturquoise",
    hex: "#AFEEEE",
    rgb: "175,238,238"
  }, {
    name: "palevioletred",
    hex: "#DB7093",
    rgb: "219,112,147"
  }, {
    name: "papayawhip",
    hex: "#FFEFD5",
    rgb: "255,239,213"
  }, {
    name: "peachpuff",
    hex: "#FFDAB9",
    rgb: "255,218,185"
  }, {
    name: "peru",
    hex: "#CD853F",
    rgb: "205,133,63"
  }, {
    name: "pink",
    hex: "#FFC0CB",
    rgb: "255,192,203"
  }, {
    name: "plum",
    hex: "#DDA0DD",
    rgb: "221,160,221"
  }, {
    name: "powderblue",
    hex: "#B0E0E6",
    rgb: "176,224,230"
  }, {
    name: "purple",
    hex: "#800080",
    rgb: "128,0,128"
  }, {
    name: "red",
    hex: "#FF0000",
    rgb: "255,0,0"
  }, {
    name: "rosybrown",
    hex: "#BC8F8F",
    rgb: "188,143,143"
  }, {
    name: "royalblue",
    hex: "#4169E1",
    rgb: "65,105,225"
  }, {
    name: "saddlebrown",
    hex: "#8B4513",
    rgb: "139,69,19"
  }, {
    name: "salmon",
    hex: "#FA8072",
    rgb: "250,128,114"
  }, {
    name: "sandybrown",
    hex: "#F4A460",
    rgb: "244,164,96"
  }, {
    name: "seagreen",
    hex: "#2E8B57",
    rgb: "46,139,87"
  }, {
    name: "seashell",
    hex: "#FFF5EE",
    rgb: "255,245,238"
  }, {
    name: "sienna",
    hex: "#A0522D",
    rgb: "160,82,45"
  }, {
    name: "silver",
    hex: "#C0C0C0",
    rgb: "192,192,192"
  }, {
    name: "skyblue",
    hex: "#87CEEB",
    rgb: "135,206,235"
  }, {
    name: "slateblue",
    hex: "#6A5ACD",
    rgb: "106,90,205"
  }, {
    name: "slategray",
    hex: "#708090",
    rgb: "112,128,144"
  }, {
    name: "slategrey",
    hex: "#708090",
    rgb: "112,128,144"
  }, {
    name: "snow",
    hex: "#FFFAFA",
    rgb: "255,250,250"
  }, {
    name: "springgreen",
    hex: "#00FF7F",
    rgb: "0,255,127"
  }, {
    name: "steelblue",
    hex: "#4682B4",
    rgb: "70,130,180"
  }, {
    name: "tan",
    hex: "#D2B48C",
    rgb: "210,180,140"
  }, {
    name: "teal",
    hex: "#008080",
    rgb: "0,128,128"
  }, {
    name: "thistle",
    hex: "#D8BFD8",
    rgb: "216,191,216"
  }, {
    name: "tomato",
    hex: "#FF6347",
    rgb: "255,99,71"
  }, {
    name: "turquoise",
    hex: "#40E0D0",
    rgb: "64,224,208"
  }, {
    name: "violet",
    hex: "#EE82EE",
    rgb: "238,130,238"
  }, {
    name: "wheat",
    hex: "#F5DEB3",
    rgb: "245,222,179"
  }, {
    name: "white",
    hex: "#FFFFFF",
    rgb: "255,255,255"
  }, {
    name: "whitesmoke",
    hex: "#F5F5F5",
    rgb: "245,245,245"
  }, {
    name: "yellow",
    hex: "#FFFF00",
    rgb: "255,255,0"
  }, {
    name: "yellowgreen",
    hex: "#9ACD32",
    rgb: "154,205,50"
  }];
}
              
            
!
999px

Console