カラーツール
ウェブサイト、グラフィック、デザインシステム用の色を変換、調整、混合、生成します。
よく使うタスク
ウェブサイト、グラフィック、デザインシステム用の色を変換、調整、混合、生成します。
カラーツールについて
使い方 カラーツール
ウェブサイト、グラフィック、デザインシステム用の色を変換、調整、混合、生成します。
すべて表示
カラーコンバーター
編集可能なHEX、RGB、RGBA、HSL、HSLA、HSV値を変換し、同じ色をプレビューして、コードやデザインシステムに必要な形式をコピーします。
オンライン色の明るさ調整ツール
ベースカラーと明るさの割合を指定して、白に向かって線形に明るくした色を生成します。HEX・RGB・HSV・HSLの各形式で結果を確認・編集できます。
CSSグラデーションジェネレーター
再現可能なカラースケールを作成し、生成された各ストップをプレビューして、CSS、チャート、デザイントークン用の正確なHEXシーケンスをコピーできます。
色を暗くする
ベースカラーを黒にブレンドして暗くするカラーツールです。HEX、RGB、HSV、HSLの各形式に対応し、暗さの割合をスライダーで調整できます。
彩度調整
単一の不透明色の彩度を-100から+100の範囲で調整し、結果をHEX、RGB、HSV、HSLで表示します。
グレースケール変換
HEX、RGB、HSV、HSLの各フィールドとカラーピッカーで選択した単一色を、HSL方式で彩度ゼロのグレーに変換します。ブラウザ内で完結する軽量ツールです。
色を反転
HEX、RGB、HSV、HSLの各フィールドとカラーピッカーで単一の色を選び、RGB各チャンネルを255から引くことで色を反転します。
ランダムカラー生成
ブラウザ内でランダムなRGBまたはHSLカラーを生成し、HEX・RGB・HSLの各値を表示します。
カラーミキサー
2つの不透明なRGB色を指定した割合で混ぜ、正確なHEXコードを生成します。
色相シフト
単色のHSL色相を回転させて別の色に変換するツールです。
オンライン3色カラースキームツール
ベースカラーから3つの色相を等間隔（120度ごと）に生成するトライアドカラースキーム作成ツールです。
オンライン4色カラースキームツール
固定の長方形テトラッド配色を生成するブラウザツール。ベースカラーを選ぶと、HSLオフセット0°、60°、180°、240°の4色を自動計算します。
オンライン補色ツール
選択したベースカラーから、HSL色相環で正確に180度反対の補色を即座に生成します。HEX、RGB、HSV、HSLの各形式に対応し、結果はブラウザ内で計算されます。
オンライン分割補色ツール
ベースカラーを選ぶと、その補色の両隣30度の2色を加えた3色の分割補色パレットを生成します。
オンライン類似色配色ツール
ベースカラーを選び、色相の間隔を調整して、調和のとれた類似色の3色セットをブラウザ内で生成します。
オンライン単色カラーパレット生成ツール
ベースカラー1色から、同じ色相・彩度で明度だけを段階的に変えた単色パレット（3〜12色）を生成します。HEX/RGB/HSV/HSLで色を指定でき、各スウォッチは個別に編集可能です。
オンライン正方形カラースキームツール
4つの等間隔な色相（90度ごと）を持つ正方形配色を生成するブラウザ内ツール。HEX/RGB/HSV/HSL入力に対応し、各スウォッチは個別に編集可能。
オンライン画像カラーピッカー
画像のピクセルをクリックして、その正確な色をHEX・RGB形式で取得できるブラウザ内ツールです。
画像カラーピッカー
画像から最大20色のパレットを抽出し、CSS変数やSVG・PNGとして書き出せるブラウザ内ツールです。
オンライン一括画像色抽出ツール
最大30枚の画像から、クリックした位置の色をまとめて抽出し、各画像ごとにパレットを作成・エクスポートできるブラウザ完結型ツールです。