サイトグラフでは、Webサイトやバナー、印刷物などのデザインに使用する色を探せる無料ツール「WEB色見本辞典」を公開しました。
色名やカラーコードから色を検索できるほか、色系統、明度、彩度、トーンなどの条件を指定して、目的に合った色を探せます。
気になる色の詳細情報や近似色、補色なども確認でき、配色づくりにも利用できます。アカウント登録やソフトのインストールは必要ありません。
WEB色見本辞典とは？
WEB色見本辞典は、さまざまな色を検索し、カラーコードや色の構成を確認できるオンライン色見本ツールです。
色名が分かっている場合だけでなく、「明るい青」「落ち着いた赤」のように、色の特徴から探したい場合にも利用できます。
Web制作やグラフィックデザインだけでなく、資料作成、イラスト制作、商品イメージの検討など、色を扱う幅広い場面で活用できます。
色名やカラーコードから検索
キーワード検索では、日本語や英語の色名などから色を探せます。
「#1E73BE」のようなHEXカラーコードを入力して、該当する色や色の詳細を確認することもできます。
探したい色の名称が分からない場合は、色系統やトーンなどの条件を組み合わせて絞り込めます。
さまざまな条件から色を探せます
WEB色見本辞典では、主に次の条件を使って色を探せます。
- キーワード
- HEXカラーコード
- 色系統
- 明度
- 彩度
- トーン
「赤系の落ち着いた色」「明るく鮮やかな青系」など、使用したいイメージに近い色を見つけたいときに便利です。
色の詳しい情報を確認できます
色の詳細ページでは、選択した色をさまざまな形式で確認できます。
- 日本語名
- 英語名
- HEX
- RGB
- HSL
- HSV
- LAB
- LCH
Web制作で使われるHEXやRGBだけでなく、色相・彩度・明度などを表す情報もまとめて確認できます。
※色によっては、日本語名や英語名などの一部情報が表示されない場合があります。
近似色・補色・類似色を確認
選択した色に近い色や、反対の位置関係にある補色、組み合わせやすい類似色なども確認できます。
「選んだ色を少しだけ明るくしたい」「アクセントになる反対色を探したい」といった場面で、配色を検討するための参考として利用できます。
配色ジェネレーターを搭載
基準となる色を選ぶと、一定の配色ルールに沿った色の組み合わせを作成できます。
主に次のような配色パターンに対応しています。
- 補色
- 分割補色
- トライアド
- テトラード
- アナログ配色
- モノクロ配色
配色に迷ったときや、メインカラーからサブカラー、アクセントカラーの候補を考えたいときに役立ちます。
グラデーションの作成にも対応
選択した色をもとに、グラデーションの組み合わせを確認できます。
Webサイトの背景やボタン、見出し、バナーなどに使用するグラデーションを検討する際にも活用できます。
気になる色をお気に入りに保存
気になる色は、お気に入りとしてブラウザに保存できます。
複数の色を比較したい場合や、後から同じ色を確認したい場合に便利です。お気に入り機能はブラウザ上で利用するため、アカウント登録は必要ありません。
※ブラウザのデータを削除した場合や、別のブラウザ・端末を使用した場合は、お気に入り情報が引き継がれないことがあります。
このような場面で利用できます
WEB色見本辞典は、次のような場面におすすめです。
- Webサイトのメインカラーを決めたい
- バナーや画像に使用する色を探したい
- HEXやRGBなどのカラー情報を確認したい
- 選択した色に近い色を探したい
- メインカラーに合う補色や類似色を確認したい
- 配色パターンやグラデーションを検討したい
- 明度や彩度、トーンから色を絞り込みたい
登録不要・無料で利用できます
WEB色見本辞典は、アカウント登録やソフトのインストールをせずに利用できます。
色を探したいときや配色に迷ったときに、ブラウザからすぐにご利用ください。
※画面に表示される色は、使用するディスプレイや端末、ブラウザなどによって見え方が異なる場合があります。印刷物や商品など、厳密な色の確認が必要な場合は、実物の色見本や校正刷りなどもあわせてご確認ください。
WEB色見本辞典を利用する
色の検索から詳細情報の確認、配色づくりまで、Web制作やデザインの色選びにぜひご活用ください。