開始値を用意
基準色1つから50〜950の11段階を生成し、5種類のOKLCHベースモードを選んでCSS・OKLCH・Tailwindテーマ出力をコピーできます。
色相をそろえたTailwind風の生成
要点
基準色1つから50〜950の11段階を生成し、5種類のOKLCHベースモードを選んでCSS・OKLCH・Tailwindテーマ出力をコピーできます。 生成されたTailwind風スケールであり、公式パレットではありません。番号はトークン順で、線形な明度率ではなく、色域制限で彩度が落ちる場合があります。
このツールでできること
基準色1つから50〜950の11段階を生成し、5種類のOKLCHベースモードを選んでCSS・OKLCH・Tailwindテーマ出力をコピーできます。 ブランドの基本色をトークンランプへ展開し、UIで実際に使う前景／背景ペアを確認します。
確認済みの機能
必要な設定を調整
Classic・Hue Shift・Luminance Anchored・Vivid・Mutedは、HEX用にRGBへ変換・制限する前に目標明度・彩度・色相を調整します。
精度の範囲を確認
生成されたTailwind風スケールであり、公式パレットではありません。番号はトークン順で、線形な明度率ではなく、色域制限で彩度が落ちる場合があります。 再利用する前に、利用先の要件と結果を照合します。
適した用途
- ブランドの基本色をトークンランプへ展開し、UIで実際に使う前景／背景ペアを確認します。
- Classic・Hue Shift・Luminance Anchored・Vivid・Mutedは、HEX用にRGBへ変換・制限する前に目標明度・彩度・色相を調整します。 「適した用途 2」では、この内容をTailwind カラースケール生成に合わせて適用します。
- ブランドの基本色をトークンランプへ展開し、UIで実際に使う前景／背景ペアを確認します。 言語を変えずに、最初の関連ツールでTailwind カラースケール生成の結果を引き続き活用できます。
使い方
開始値を用意
基準色1つから50〜950の11段階を生成し、5種類のOKLCHベースモードを選んでCSS・OKLCH・Tailwindテーマ出力をコピーできます。 「使い方: 開始値を用意」では、この内容をTailwind カラースケール生成に合わせて適用します。
必要な設定を調整
Classic・Hue Shift・Luminance Anchored・Vivid・Mutedは、HEX用にRGBへ変換・制限する前に目標明度・彩度・色相を調整します。 「使い方: 必要な設定を調整」では、この内容をTailwind カラースケール生成に合わせて適用します。
結果を確認して次へ
ブランドの基本色をトークンランプへ展開し、UIで実際に使う前景／背景ペアを確認します。 「使い方: 結果を確認して次へ」では、この内容をTailwind カラースケール生成に合わせて適用します。
精度の範囲を確認
生成されたTailwind風スケールであり、公式パレットではありません。番号はトークン順で、線形な明度率ではなく、色域制限で彩度が落ちる場合があります。 再利用する前に、利用先の要件と結果を照合します。 本番利用やアクセシビリティ判断に使う前に、記載された制限を確認します。
操作項目の説明
開始値を用意
基準色1つから50〜950の11段階を生成し、5種類のOKLCHベースモードを選んでCSS・OKLCH・Tailwindテーマ出力をコピーできます。 「操作項目の説明: 開始値を用意」では、この内容をTailwind カラースケール生成に合わせて適用します。
必要な設定を調整
Classic・Hue Shift・Luminance Anchored・Vivid・Mutedは、HEX用にRGBへ変換・制限する前に目標明度・彩度・色相を調整します。 「操作項目の説明: 必要な設定を調整」では、この内容をTailwind カラースケール生成に合わせて適用します。
結果の算出方法
Classic・Hue Shift・Luminance Anchored・Vivid・Mutedは、HEX用にRGBへ変換・制限する前に目標明度・彩度・色相を調整します。 「結果の算出方法」では、この内容をTailwind カラースケール生成に合わせて適用します。
精度と制限
- 生成されたTailwind風スケールであり、公式パレットではありません。番号はトークン順で、線形な明度率ではなく、色域制限で彩度が落ちる場合があります。
- クリップボード、ファイルのデコード、ダウンロード、権限を使う操作は現在のブラウザ機能に依存します。
処理とプライバシー
確認済みの処理はブラウザ内で実行されます。ネットワークURLを明示的に開く操作がない限り、ファイルと色値はページ内に留まります。
実用的なヒント
- 既知のサンプルから始め、効果を確認できるよう一度に1つの項目だけ変更します。
- 本番利用やアクセシビリティ判断に使う前に、記載された制限を確認します。
トラブルシューティング
入力または操作が動作しない
表示されている範囲やファイル条件を確認し、リセット後に小さい入力またはブラウザ対応形式で再試行します。権限を使う操作にはセキュアコンテキストが必要な場合があります。
精度と制限
生成されたTailwind風スケールであり、公式パレットではありません。番号はトークン順で、線形な明度率ではなく、色域制限で彩度が落ちる場合があります。 「トラブルシューティング: 精度と制限」では、この内容をTailwind カラースケール生成に合わせて適用します。
精度の範囲を確認
生成されたTailwind風スケールであり、公式パレットではありません。番号はトークン順で、線形な明度率ではなく、色域制限で彩度が落ちる場合があります。 リセットして既知の対応値で再試行してから、アルゴリズムの問題かを判断します。
よくある質問
Tailwind カラースケール生成は何をするツールですか？
基準色1つから50〜950の11段階を生成し、5種類のOKLCHベースモードを選んでCSS・OKLCH・Tailwindテーマ出力をコピーできます。 「Tailwind カラースケール生成は何をするツールですか？」では、この内容をTailwind カラースケール生成に合わせて適用します。
最も重要な制限は何ですか？
生成されたTailwind風スケールであり、公式パレットではありません。番号はトークン順で、線形な明度率ではなく、色域制限で彩度が落ちる場合があります。 「最も重要な制限は何ですか？」では、この内容をTailwind カラースケール生成に合わせて適用します。
データはどこで処理されますか？
確認済みの処理はブラウザ内で実行されます。ネットワークURLを明示的に開く操作がない限り、ファイルと色値はページ内に留まります。 「データはどこで処理されますか？」では、この内容をTailwind カラースケール生成に合わせて適用します。
Tailwind カラースケール生成には何を用意しますか？
基準色1つから50〜950の11段階を生成し、5種類のOKLCHベースモードを選んでCSS・OKLCH・Tailwindテーマ出力をコピーできます。 基準色1つから50〜950の11段階を生成し、5種類のOKLCHベースモードを選んでCSS・OKLCH・Tailwindテーマ出力をコピーできます。
Tailwind カラースケール生成の結果を使う前に何を確認しますか？
生成されたTailwind風スケールであり、公式パレットではありません。番号はトークン順で、線形な明度率ではなく、色域制限で彩度が落ちる場合があります。 再利用する前に、利用先の要件と結果を照合します。 「Tailwind カラースケール生成の結果を使う前に何を確認しますか？」では、この内容をTailwind カラースケール生成に合わせて適用します。
Tailwind カラースケール生成の次にどの作業へ進めますか？
言語を変えずに、最初の関連ツールでTailwind カラースケール生成の結果を引き続き活用できます。 ブランドの基本色をトークンランプへ展開し、UIで実際に使う前景／背景ペアを確認します。
次のカラーワークフロー
ブランドの基本色をトークンランプへ展開し、UIで実際に使う前景／背景ペアを確認します。 「次のカラーワークフロー」では、この内容をTailwind カラースケール生成に合わせて適用します。
関連ツールで続ける
言語を変えずに、最初の関連ツールでTailwind カラースケール生成の結果を引き続き活用できます。
カラーパレットジェネレーター