WEBカラーチャート
WEBカラーチャート
指定した色を中心にRGBと16進数カラーコードの一覧を作成できるカラーチャート。
ブログやホームページなどの配色を統一したい場合に役立ちます。

色見本の使い方

WEBカラーチャート
ツール上部に表示されているのがカラーチャートです。
横軸が赤や青といった「色相」に対応し、縦軸が色の明るさ「輝度」に対応しています。

カラーチャートをクリックすると、下の欄にクリックした色の16進数カラーコードとRGB、HSLの値が表示されます。

基準色を設定する

このカラーチャートは基準となる色を設定することにより、その色を中心とした色の一覧にすることができます。
カラーチャートの基準色
ツール下部にある基準色の欄に基準にしたい色のカラーコードを入力しましょう。
彩度調整バーで基準色の彩度の調整もできます。

カラーチャートの配色

カラーチャートの配置
カラーチャート内の中央に表示されている枠が基準色です。
この色を基準としてカラーチャートが作成されています。

カラーチャートの色相
基準色の横方向に並ぶ色は基準色と同じ彩度・輝度を持つ色です。
これらの色を使うことで配色に統一感をもたせることができます。

カラーチャートの輝度
縦方向は色が明るさ順に並びます。
グラデーション等、陰影をつけたいときに活用できます。

関連コンテンツ

RGBと16進数カラーコードの相互変換ツール
色の表現法である「RGB」と6桁の16進数で表される「カラーコード」を相互変換するツール。
RGBとHSV・HSBの相互変換ツール
色の表現法である「RGB」と「HSV」を相互変換するツールと変換計算式の解説。
RGBとHSLの相互変換ツール
色の表現法である「RGB」と「HSL」を相互変換するツールと変換計算式の解説。