info概要

カラーパレットツールは、入力したHEXカラーコードからMaterial Designライクなカラーシェードパレットを自動生成するオンラインツールです。比較モードとシェード生成モードの2種類に対応しています。

checklist使い方

1. 1「比較」または「濃淡」モードを選択します。
2. 2HEXカラーコード（例: #3490DC）を1つ以上入力します。
3. 3「生成」ボタンをクリックします。
4. 4各シェードのカラーコードをクリックしてコピーできます。

menu_book仕様・用語解説

• 「比較」モード: 複数のカラーを並べて比較します。各色のシェード（50〜900）を横に並べて表示し、カラー間のトーンの違いを確認できます。
• 「濃淡」モード: 1色のシェードパレットを詳細表示します。選択した色の全シェードを一覧で確認できます。
• シェードステップ: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900の10段階で表示します。Material Designの慣習に基づいており、数値が小さいほど明るく、大きいほど暗い色になります。
• シェード生成アルゴリズム: 入力色を500ステップの基準色として、それより明るい色（50〜400）は白との線形補間（mixColors）、暗い色（600〜900）は黒との線形補間で生成します。例: 50ステップは白を90%混合、900ステップは黒を60%混合します。
• WCAGコントラスト比: 各シェードのテキスト色（黒または白）は、相対輝度（Relative Luminance）をL = 0.2126R + 0.7152G + 0.0722Bの式で計算し、WCAGガイドラインに基づいてコントラストが高い方を自動選択します。
• HEXカラーコード: 3桁形式（#RGB）と6桁形式（#RRGGBB）の両方に対応しています。#プレフィックスの有無も問いません。

lightbulbユースケース

• Material DesignやTailwind CSSのカラーシステム設計。
• ブランドカラーのシェードパレットを自動生成したい場合。
• アクセシビリティ（WCAG）対応のカラー選定と確認。
• Tailwind CSSの命名規則（50〜950の11段階）と本ツールの10段階シェード（50〜900）は段階数が異なる点に注意。950ステップが必要な場合は、900の結果を基準に手動で1段階暗くする。