Jazzと読書の日々

iPadを筆記具として使う方法を模索します

Obsidianでカラー見本を作ってみよう

cssで色を指定するとき。

基本色

名前で指定できる基本色は147色あります。

大昔のパソコンでは256色しかディスプレイに出せなくて、その中で識別しやすい色に限るとこれくらいだったのかな。 半分くらいに絞られていますね。 Webデザインに使うときも、これ以上混在すると見にくくなりそうです。

この基本色をObsidianに表示してみます。

Colors.md

dataviewスクリプトで書いてみました。

```dataviewjs
c =["aliceblue","antiquewhite","aqua","aquamarine","azure","beige","bisque","black","blanchedalmond","blue","blueviolet","brown","burlywood","cadetblue","chartreuse","chocolate","coral","cornflowerblue","cornsilk","crimson","cyan","darkblue","darkcyan","darkgoldenrod","darkgray","darkgreen","darkkhaki","darkmagenta","darkolivegreen","darkorange","darkorchid","darkred","darksalmon","darkseagreen","darkslateblue","darkslategray","darkturquoise","darkviolet","deeppink","deepskyblue","dimgray","dodgerblue","firebrick","floralwhite","forestgreen","fuchsia","gainsboro","ghostwhite","gold","goldenrod","gray","green","greenyellow","honeydew","hotpink","indianred","indigo","ivory","khaki","lavender","lavenderblush","lawngreen","lemonchiffon","lightblue","lightcoral","lightcyan","lightgoldenrodyellow","lightgreen","lightgrey","lightpink","lightsalmon","lightseagreen","lightskyblue","lightslategray","lightsteelblue","lightyellow","lime","limegreen","linen","magenta","maroon","mediumaquamarine","mediumblue","mediumorchid","mediumpurple","mediumseagreen","mediumslateblue","mediumspringgreen","mediumturquoise","mediumvioletred","midnightblue","mintcream","mistyrose","moccasin","navajowhite","navy","oldlace","olive","olivedrab","orange","orangered","orchid","palegoldenrod","palegreen","paleturquoise","palevioletred","papayawhip","peachpuff","peru","pink","plum","powderblue","purple","red","rosybrown","royalblue","saddlebrown","salmon","sandybrown","seagreen","seashell","sienna","silver","skyblue","slateblue","slategray","snow","springgreen","steelblue","tan","teal","thistle","tomato","turquoise","violet","wheat","white","whitesmoke","yellow","yellowgreen"]

s = ""
for(i=0; i<c.length; i++){
 s+= "<div style='background:" + c[i] + ";'>" + c[i] + "</div>"
}
dv.paragraph(s)
```

使い方

プレビューすると色の帯が並びます。

名前を長押しして選択状態にしてコピー。 これをcssに貼り付けてお使いください。 タップするだけでクリップボードに保存するようにしようかと思ったけど、案外複雑になるので簡略に済ませました。

まとめ

このカラーコード。 意外と重宝する。