Ai Colors

中心の流れは意図的に短い。情景を書いて色を受け取る。AIColors は文の調子と場面を読み取り、5〜8色のパレットを名前と短い説明付きで返す。この名前が思った以上に効く。顧客と話すための語彙になり、議論は方向性の話にとどまる。まだ誰も思い浮かべられない色コードの話にはならない。

スウォッチは1つずつ、パレットはまとめてコピーできる。Figma に貼る、スタイルシートに残す、同僚に渡す、といった日常の用途はこれで足りる。スクリーンショットでは足りない場面、たとえばスライドや提案書の PDF には PNG 書き出しを使う。Figma プラグインもデザイントークンの書き出しもないので、最後のひと手間は自分でやる。

変換ツールは HEX、RGB、HSL、HSV、CMYK、OKLCH を読み書きする。最近の案件で効くのは OKLCH だ。色相が変わっても明度の感じ方が揃うので、パレットの段階がきれいに見える。デザインシステムがモダンな CSS 色構文を使っているなら、別の計算ツールを開く往復が不要になる。同じ値がグラデーション作成にも流れ込む。

コントラストチェッカーは WCAG 2.2 の比率と APCA のスコアを並べて出す。二つの方式はしばしば結論が分かれる。両方見えると役に立つ。WCAG は準拠の可否に答え、APCA は実際の文字サイズと太さでの見え方に近い。検査はするが修正はしない。どの色を変えるかは自分で決める。

画像を読み込むと、主要な色が一覧になる。処理はブラウザ内で完結する。未公開の商品写真を扱うときには、この点が大きい。続けてプレビュー機能がパレットをレイアウトに載せる。背景、本文、アクセントとしての見え方が分かり、5つの四角を並べただけでは得られない判断ができる。

ジェネレーター以外にも、普通は一つずつ検索する道具が揃っている。カラーピッカー、明度と彩度の段階作成、色の混色、色覚異常のシミュレーション、CSS の色名一覧、Tailwind の既定パレット全体、ブランドカラーの参考、そして個別の色ページには変換値、配色の調和、コントラストが載る。単体では目新しくない。同じ画面にまとまっていることが時間の節約になる。