カラー ​

Gridgram の色指定は、小さく一貫した語彙に統一されています。ノード・ コネクタ・リージョン・ノート・バッジのいずれも同じ文法を受け付ける ので、「この属性でこの値は使えたっけ？」と悩むことはあまりありません。

文法 ​

primary          # bare なテーマキーワード
accent           # テーマキーワード
accent/60        # テーマキーワード + 0–99% alpha
accent/8         # 1 桁 alpha → AA に展開（88 = hex）
#e8792f          # リテラル hex
#e8792f40        # リテラル hex + alpha
red              # CSS 名前付き色
rgb(200, 0, 0)   # その他の CSS 関数記法

テーマキーワード ​

SVGPNG

キーワードはレンダリング時にテーマで解決されます：

テーマを変えれば、primary 色の要素がすべて一斉に追従します。 置換作業は不要です。

alpha: /NN 接尾辞 ​

テーマキーワードに /NN を付けると alpha を適用できます：

accent/60   → theme.accent を 60% 不透明度で
accent/8    → theme.accent を 88% 不透明度で（1 桁は AA に展開）
primary/14  → theme.primary を 14% 不透明度で

2 桁の形は hex alpha（00–99）で、パーセンテージではありません。 00〜ff が受理されます。1 桁指定は CSS の #888 → #888888 と 同じ要領で /8 → /88 に展開されます。

リテラル色 ​

CSS が受け付けるものは何でも使えます — 色名、hex、rgb() / rgba()、 hsl() など。リテラル色はリージョンの 自動 tint を回避 します。 詳細は リージョン › スタイリング 参照。

icon :a @A1 tabler/user "red"     color=red
icon :b @B1 tabler/user "#8b5cf6" color=#8b5cf6
icon :c @C1 tabler/user "rgba"    color=rgba(139,92,246,0.6)

ノードの自動 tint ​

ノードに 1 色 を指定すると、Gridgram はその色でリングを描きつつ、 内側を約 8% 不透明度で自動塗り します。1 色だけ指定すれば 「濃いリング + 薄い塗り」の見た目が自動で得られます。

tint は color が設定されていれば発動します（テーマキーワード / リテラル のいずれでも）。自分で明示した alpha は書いたとおりに 尊重されます。

次に読む ​

• テーマ — カスタムテーマ定義、キャンバス背景、 透過の扱い