文字・背景・枠線の色の段階的な明度と組み合わせを支援し、CSSカラーコードを生成するCLIツール

通常、サイトやアプリで使う色はあらかじめ定義して使用します。

明度と彩度は同じで、色相（Hue）だけを変えたカラーパレットを決めるのは難しくありません。

しかし、徐々に薄く（明るく）なる文字、徐々に濃く（暗く）なる背景のように、彩度と色相は同じでも複数段階の明度が必要な場合があります。

このとき、文字・背景・枠線はそれぞれ異なる段階の明度として宣言する必要があります。100%を最も明るい明度の値とした場合、白の上に96%の明度の背景色を持つボックスは見分けられますが、96%の明度を文字色に適用すると見えません。

また、文字・背景・枠線はそれぞれ単独で使うものではありません。この3つは組み合わせて使われます。それぞれの色を宣言したあと組み合わせてみると、背景上の文字が見えなかったり、背景と線を区別できなかったりすることもあります。これを調整するのは簡単ではありません。

文字・背景・枠線それぞれに4段階の明度を導入すると、その組み合わせは実に64通りになり、さらにダークモードまで考慮すると64通りの組み合わせを2セット作る必要があります。

そこで私は、文字・背景・枠線の色と明度段階を設定でき、すべての組み合わせを一目で確認できるCLIツールを作りました。

YAML形式の設定ファイルを基にCSSカラーコードを生成します。

ライト／ダークモードにおける文字・背景・枠線のすべての段階を一目で確認でき、組み合わせも試せるプレビュー機能を提供します。

副次的に、このプログラムはローカルLLMを使い、AIとのペアプログラミングで開発しました。コードをどう実装するかは私が指示し、物理的なコーディング作業はAIに任せました。

ローカルLLM環境は次のとおりです。

関連記事