CSS Named Colors 🎨

[zzeleznick]

CSS Named Colors

I've been an admirer of the microsite colours.neilorangepeel.com that displays the named css colors, which I've used for selecting background colors for reveal.js presentations.

Using the new panel feature (see #95 and #100), I built the colours microsite in Kit.

Demo

Notes

• I expected the tabs component to scroll on x-overflow instead of increasing the width of the page
• For each tab, I'd ideally be able to set a custom style (e.g. solid background) or provide an html element instead of displaying the color text
• Text input currently doesn't do anything – I was hoping that the panel would be displayed on the first render without needing to type a character to show the panel

Code

Click for code

// Menu: Kit Colors
// Description: View CSS Colors
// Author: Zach Zeleznick
// Twitter: @zzxiv

// Inspired by colours.neilorangepeel.com
// Also see colors.commutercreative.com/grid

const colors = {"aliceblue":[240,248,255],"antiquewhite":[250,235,215],"aqua":[0,255,255],"aquamarine":[127,255,212],"azure":[240,255,255],"beige":[245,245,220],"bisque":[255,228,196],"black":[0,0,0],"blanchedalmond":[255,235,205],"blue":[0,0,255],"blueviolet":[138,43,226],"brown":[165,42,42],"burlywood":[222,184,135],"cadetblue":[95,158,160],"chartreuse":[127,255,0],"chocolate":[210,105,30],"coral":[255,127,80],"cornflowerblue":[100,149,237],"cornsilk":[255,248,220],"crimson":[220,20,60],"cyan":[0,255,255],"darkblue":[0,0,139],"darkcyan":[0,139,139],"darkgoldenrod":[184,134,11],"darkgray":[169,169,169],"darkgreen":[0,100,0],"darkgrey":[169,169,169],"darkkhaki":[189,183,107],"darkmagenta":[139,0,139],"darkolivegreen":[85,107,47],"darkorange":[255,140,0],"darkorchid":[153,50,204],"darkred":[139,0,0],"darksalmon":[233,150,122],"darkseagreen":[143,188,143],"darkslateblue":[72,61,139],"darkslategray":[47,79,79],"darkslategrey":[47,79,79],"darkturquoise":[0,206,209],"darkviolet":[148,0,211],"deeppink":[255,20,147],"deepskyblue":[0,191,255],"dimgray":[105,105,105],"dimgrey":[105,105,105],"dodgerblue":[30,144,255],"firebrick":[178,34,34],"floralwhite":[255,250,240],"forestgreen":[34,139,34],"fuchsia":[255,0,255],"gainsboro":[220,220,220],"ghostwhite":[248,248,255],"gold":[255,215,0],"goldenrod":[218,165,32],"gray":[128,128,128],"green":[0,128,0],"greenyellow":[173,255,47],"grey":[128,128,128],"honeydew":[240,255,240],"hotpink":[255,105,180],"indianred":[205,92,92],"indigo":[75,0,130],"ivory":[255,255,240],"khaki":[240,230,140],"lavender":[230,230,250],"lavenderblush":[255,240,245],"lawngreen":[124,252,0],"lemonchiffon":[255,250,205],"lightblue":[173,216,230],"lightcoral":[240,128,128],"lightcyan":[224,255,255],"lightgoldenrodyellow":[250,250,210],"lightgray":[211,211,211],"lightgreen":[144,238,144],"lightgrey":[211,211,211],"lightpink":[255,182,193],"lightsalmon":[255,160,122],"lightseagreen":[32,178,170],"lightskyblue":[135,206,250],"lightslategray":[119,136,153],"lightslategrey":[119,136,153],"lightsteelblue":[176,196,222],"lightyellow":[255,255,224],"lime":[0,255,0],"limegreen":[50,205,50],"linen":[250,240,230],"magenta":[255,0,255],"maroon":[128,0,0],"mediumaquamarine":[102,205,170],"mediumblue":[0,0,205],"mediumorchid":[186,85,211],"mediumpurple":[147,112,219],"mediumseagreen":[60,179,113],"mediumslateblue":[123,104,238],"mediumspringgreen":[0,250,154],"mediumturquoise":[72,209,204],"mediumvioletred":[199,21,133],"midnightblue":[25,25,112],"mintcream":[245,255,250],"mistyrose":[255,228,225],"moccasin":[255,228,181],"navajowhite":[255,222,173],"navy":[0,0,128],"oldlace":[253,245,230],"olive":[128,128,0],"olivedrab":[107,142,35],"orange":[255,165,0],"orangered":[255,69,0],"orchid":[218,112,214],"palegoldenrod":[238,232,170],"palegreen":[152,251,152],"paleturquoise":[175,238,238],"palevioletred":[219,112,147],"papayawhip":[255,239,213],"peachpuff":[255,218,185],"peru":[205,133,63],"pink":[255,192,203],"plum":[221,160,221],"powderblue":[176,224,230],"purple":[128,0,128],"rebeccapurple":[102,51,153],"red":[255,0,0],"rosybrown":[188,143,143],"royalblue":[65,105,225],"saddlebrown":[139,69,19],"salmon":[250,128,114],"sandybrown":[244,164,96],"seagreen":[46,139,87],"seashell":[255,245,238],"sienna":[160,82,45],"silver":[192,192,192],"skyblue":[135,206,235],"slateblue":[106,90,205],"slategray":[112,128,144],"slategrey":[112,128,144],"snow":[255,250,250],"springgreen":[0,255,127],"steelblue":[70,130,180],"tan":[210,180,140],"teal":[0,128,128],"thistle":[216,191,216],"tomato":[255,99,71],"turquoise":[64,224,208],"violet":[238,130,238],"wheat":[245,222,179],"white":[255,255,255],"whitesmoke":[245,245,245],"yellow":[255,255,0],"yellowgreen":[154,205,50]};
const colorGroups = {"pink":["pink","lightpink","hotpink","deeppink","palevioletred","mediumvioletred"],"purple":["lavender","thistle","plum","orchid","violet","fuchsia","magenta","mediumorchid","darkorchid","darkviolet","blueviolet","darkmagenta","purple","mediumpurple","mediumslateblue","slateblue","darkslateblue","rebeccapurple","indigo"],"red":["lightsalmon","salmon","darksalmon","lightcoral","indianred","crimson","red","firebrick","darkred"],"orange":["orange","darkorange","coral","tomato","orangered"],"yellow":["gold","yellow","lightyellow","lemonchiffon","lightgoldenrodyellow","papayawhip","moccasin","peachpuff","palegoldenrod","khaki","darkkhaki"],"green":["greenyellow","chartreuse","lawngreen","lime","limegreen","palegreen","lightgreen","mediumspringgreen","springgreen","mediumseagreen","seagreen","forestgreen","green","darkgreen","yellowgreen","olivedrab","darkolivegreen","mediumaquamarine","darkseagreen","lightseagreen","darkcyan","teal"],"cyan":["aqua","cyan","lightcyan","paleturquoise","aquamarine","turquoise","mediumturquoise","darkturquoise"],"blue":["cadetblue","steelblue","lightsteelblue","lightblue","powderblue","lightskyblue","skyblue","cornflowerblue","deepskyblue","dodgerblue","royalblue","blue","mediumblue","darkblue","navy","midnightblue"],"brown":["cornsilk","blanchedalmond","bisque","navajowhite","wheat","burlywood","tan","rosybrown","sandybrown","goldenrod","darkgoldenrod","peru","chocolate","olive","saddlebrown","sienna","brown","maroon"],"white":["white","snow","honeydew","mintcream","azure","aliceblue","ghostwhite","whitesmoke","seashell","beige","oldlace","floralwhite","ivory","antiquewhite","linen","lavenderblush","mistyrose"],"gray":["gainsboro","lightgray","silver","darkgray","dimgray","gray","lightslategray","slategray","darkslategray","black"]}
const allColors = Object.values(colorGroups).reduce((a,b) => a.concat(b), []);

// Adapted from https://stackoverflow.com/a/3943023
const pickTextColor = ([r, g, b]) => {
  const L = r * 0.299 + g * 0.587 + b * 0.114;
  return (L > 186) ? "black" : "white";
}

const componentToHex = (v) => v.toString(16).padStart(2, 0)

const rgbToHex = ([r, g, b]) => `#${[r,g,b].map(componentToHex).join('').toUpperCase()}`

const formatRgb = ([r, g, b]) => `rgb(${r},${g},${b})`

const showCategory = (category) => {
  const dataset = category ? colorGroups[category] : allColors;
  const inner = dataset.map(name => {
    const rgb = colors[name]
    // console.log(`rgb: ${rgb}, name: ${name}`);
    const color = pickTextColor(rgb);
    return `<div class="flex flex-col h-20 w-full justify-center items-center" style="background: ${name}">
        <div style="color:${color}" class="text-base font-bold font-sans"> ${name.toUpperCase()} </div>
        <div style="color:${color}" class="text-xs font-mono"> ${rgbToHex(rgb)} ${formatRgb(rgb)} </div>
    </div>`
  }).join('\n');
 const html = `
  <div class="grid grid-cols-1">
   ${inner}
  </div>`
  // console.log(`category: ${category}`, html);
  return html
}

const buildTabs = () => {
  const groups = Object.keys(colorGroups);
  let tabs = [ {
    name: "All",
    method: async () => await arg("all", showCategory())
  }];
  groups.map(name => {
    tabs.push( { name, method: async () => await arg(name, showCategory(name)) } )
  });
  tabs.map(({name, method}) => {
   onTab(name, method);
  });
}

// await arg("all", showCategory())
// NOTE: current api requires typing before panel is displayed if we pass in a function like (input) => {}

buildTabs();

[johnlindquist]

Quick thoughts (running out for bit):

• tabs scroll x - cool idea, I'll def look into it
• tabs background - also awesome idea, I'll look into it too
• display on first render: Use the "input" prop of the arg

await arg(
  {
    message: "Type something",
    input: "John",
  },
  input => `Hi ${input}`
)

Sorry that was so brief, gotta run

[zzeleznick]

Thanks, @johnlindquist!

I was hoping that an empty string passed to input would display the placeholder text (message) and trigger the first render, but alas it did not. I elected to use a single space character as input instead.

await arg(
  {
    message: "Type something",
    input: "",
  },
  input => `Hello ${input ? input : "World"}`
)

Below you can see that filtering using input for a panel is quite smooth!

kit-colors-reactive-filter.mp4

Unfortunately, it appears that navigating between tabs tends to cause that UI to flicker.

kit-colors-reactive.mp4

In the static panel case, tab navigation is very smooth.

kit-colors-static.mp4

[johnlindquist]

Hmm, "input" causes a:

• Launch prompt
• Set input value from app
• Send input back to script
• Run script with input

So I can see why that would hiccup when tab-switching.

I'll play with a inital/first render option and see how we can polish that up.

---

From a different perspective, this is filtering a list. If I allow you to pass styles/classes/html along with an Array of choices, we could go pretty wild with decorative lists... 🤔

[zzeleznick]

Thanks for investigating!

Per your note above and going out on a limb here, would reducing the debounce time to 50 ms for our setPanelHTML like we do for setUnfilteredChoices help?

I think I might only see 20% of your vision on decorative lists, but I like the idea of passing an array of html elements or a style sheet!

[johnlindquist]

It's worth a shot.👍

Fyi: It's worth looking at the .kenv/logs/kit.log to get a better grasp of script start, messages, and script end. Clear the log, run a script you're familiar with, and check the output

[zzeleznick]

Thanks for the tip!

I currently have a shortcut for the console.log and have checked kit.log on occasion, especially when something unexpected happens (e.g. hung the process with an error within a setInterval function).

// Menu: Kit Logs
// Description: Tail Kit logs
// Author: Zach Zeleznick
// Twitter: @zzxiv
// Shortcut: cmd shift space

let cmd = `tail -f ${kenvPath("logs", "console.log")}`

iterm(cmd)