~/bGZo/notes

2 min read

颜色

Palette 调色板 🎨🔴🟠🟡🟢🔵🟣🟤

Custom

const raw = `
#FEDFE1 樱
#f09199 Bangumi
#cf577b Money(RMB)
#268dcd Douban Movie
#58402a Douban Book
`;
 
const colors = raw.trim().split("\n").map(line=>{
  const [hex,...rest] = line.trim().split(/\s+/);
  return {hex, label: rest.join(" ")};
});
 
const wrap = dv.el("div","");
for (const {hex,label} of colors){
  const item = wrap.createEl("span", { text: label + ':' + hex });
  Object.assign(item.style, {
    display: "inline-block",
    padding: "4px 10px",
    margin: "4px",
    borderRadius: "6px",
    background: hex,
    color: "#fff",
    fontWeight: "500"
  });
  item.setAttribute("title", hex); // hover 可见色号
}

Github Colors

const raw = `
#d4a788 Rust
#555555 C
#e0587e C++
#a77530 Java
#3e8622 C#
#4eaad3 Go
#a17dfb Kotlin
#3f7287 TypeScript
#f0e16a JavaScript
#6b1b1b Ruby
#4672a1 Python
#d15735 HTML
#514077 CSS
#4e7729 Makefile
#4495c4 Perl
#000078 Lua
#525e92 PHP
`;
 
const colors = raw.trim().split("\n").map(line=>{
  const [hex,...rest] = line.trim().split(/\s+/);
  return {hex, label: rest.join(" ")};
});
 
const wrap = dv.el("div","");
for (const {hex,label} of colors){
  const item = wrap.createEl("span", { text: label + ':' + hex });
  Object.assign(item.style, {
    display: "inline-block",
    padding: "4px 10px",
    margin: "4px",
    borderRadius: "6px",
    background: hex,
    color: "#fff",
    fontWeight: "500"
  });
  item.setAttribute("title", hex); // hover 可见色号
}

终端

References

Graph View