色合いと陰影ジェネレーター
任意の色のより明るい色合いと最も暗い陰影をHEXコード付きで自動生成します。
色のトーンとシェードを生成する方法
ベースカラーを選択する
ビジュアルセレクターで開始色を選択するか、HEXコードを入力します。
トーンとシェードを確認する
選択した色から、より明るい5つのトーン（ティント）と、より暗い5つのシェード（シャドウ）が自動的に生成されます。
必要なHEXコードをコピーする
任意のスウォッチをクリックして、HEXコードをクリップボードにコピーします。
トーン・シェードジェネレーターについてのよくある質問
色の明るい変数と暗い変数があることは、統一されたデザインパレットを作成する際に不可欠です（例えば、ホバー状態、背景、またはボーダーなど）。このツールはこれらを自動的に計算します。
トーン（tint）とシェード（shade）の違いは何ですか？
+
トーンは色に白を混ぜる（明るくする）ことで得られ、シャドウは黒を混ぜる（暗くする）ことで得られます。
何個のバリエーションが生成されますか？
+
ベースカラーから、より明るいトーン5個とより暗いシャドウ5個、合計10個を生成します。
コードをコピーできますか？
+
はい、リスト内の任意の色をクリックして、HEXコードをコピーできます。
Tailwindのようなデザインパレットを作成できますか？
+
はい、多くのデザインシステムで使用されている50～900の色スケールとまったく同じコンセプトです。
無料ですか？
+
はい、このツールは完全に無料です。
色情報はサーバーにアップロードされますか？
+
いいえ、すべての計算はあなたのブラウザで直接実行されます。
色
カラーコンバーター（HEX、RGB、HSL、CMYK）
HEX、RGB、HSL、CMYKの間で任意の色を瞬時に変換でき、ライブプレビューと最も近い色名を表示します。
カラーパレットジェネレータ
ベースカラーから5色の調和したパレット（補色、類似色、三色配色、単色配色）を作成します。
CSSグラデーションジェネレーター
最大4色の線形または放射状グラデーションを作成し、すぐに使用できるCSSコードをコピーします。
WCAGコントラストチェッカー
テキストと背景色の組み合わせがAA および AAA のアクセシビリティレベルを満たしているかを確認します。
ランダムカラー
クリック1つでランダムに色を生成し、その名前、HEX/RGB/HSLコード、および類似色を発見できます。
カラーピッカー（スポイト）
ブラウザのスポイトツールを使用して画面から任意の色を選択するか、クラシックなカラーピッカーを使用します。
色盲シミュレーター
画像をアップロードして、一色型色覚異常、二色型色覚異常、または三色型色覚異常の人がどのように見えるかを確認します。
メッシュグラデーションジェネレーター
メッシュグラデーション（ぼかされた色のパッチ）で背景を作成し、PNGでダウンロードするか、CSSコードをコピーします。
カラーミキサー
2つの色を混ぜて、HEXコード付きで段階的に中間色を発見します。
カラーホイール（調和）
ホイール上で色を選択して、調和のとれた組み合わせを発見してください：補色、類似色、三色配置など。
画像からのパレット抽出ツール
画像をアップロードすると、その支配的な色を自動的に抽出し、各色のHEXコード付きのパレットを生成します。
画像の平均色
画像をアップロードして、HEX、RGB、HSLコード付きの平均色を瞬時に計算します。
