以下の内容はhttps://wineroses.hatenablog.com/entry/2025/03/19/145736より取得しました。


Obsidian:cssに使える色の名前は147あるの

cssを書くときの必需品なので。

cssの色見本

色見本を表示するdataviewスクリプトです。 多用するので作り直してみました。

Colors.md

下記スクリプトをファイルにしてください。

```dataviewjs
const css1 = "font-size:small;text-align:center;"
const css2 = "width:20%;height:7em;float:left;padding-top:3em;"

const colors =[
"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"
]

d = colors.map(x => `<div style='${css2}background:${x};'><div>${x}</div></div>`)
s = `<div style="${css1}">${d.join("")}</div>`
dv.paragraph(s)
```

実行例

リーディングビューにするとレンガ状に並びます。

使いたい色を長押しすると選択状態になるのでコピーしてお使いください。

まとめ

基本147色と言いながら実質140色なんだよなあ。 7色足りない。

これはgraygreyが同じ色なのに二度定義されているから。 darkgraydarkgreyみたいに2つずつある。

アメリカ英語とイギリス英語の相克を感じます。 譲らない文化圏だもの。




以上の内容はhttps://wineroses.hatenablog.com/entry/2025/03/19/145736より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14