スケールジェネレーター

色合いジェネレーターの仕組み - 入力、確認、エクスポート

1つの色からOKLCHで知覚的に均一な11段階のデザインシステム用スケールを作成します。

1. 01

   入力

   HEXを貼り付けるか、任意の色ページの「スケールを作成」をクリックして値を取り込みます。

2. 02

   確認

   色が最も近い段階にスナップします。各段階の下に白と黒に対するWCAGコントラスト値が表示されます。

3. 03

   エクスポート

   Tailwind / CSS変数 / SCSS / JSONを選択してコードに直接コピーできます。

色合いジェネレーター FAQ

色合い生成について実際に寄せられる4つの質問

なぜ11段階なのですか？

11段階の50～950は、Tailwind、Radixなどの主流デザインシステムで使用されているスケールと一致するため、置き換えにコストがかかりません。

色相がずれることはありますか？

いいえ。補間はOKLCHで実行され、色が最も近い段階に固定されるため、色相は50から950まで保持されます。

このスケールを商用利用できますか？

はい。色合いスケールはライセンスのない計算された数値であるため、エクスポートしたものは自由に使用できます。

なぜ一部の段階が灰色がかって出てくるのですか？

高彩度の色は端の方でsRGBの範囲から外れるため、エンジンはそこで彩度を圧縮し、段階が灰色やネオン色にならず鮮やかさを保つようにしています。

結果を取得した後

ここから先に進み、色を活用しましょう。