カラーコード（色番号）や配色を調べるのにオススメなサイト

パソコンで絵を描いたり、サイトのデザイン、ブログのサムネイルを作ったりとデジタルで色を選ぶときに、カラーコードを使う機会もあるのですが、

そのコードの番号がわからない。

今回は

など、「色」で困ったらここに行く。

私がいつも利用しているサイトをまとめました。

色を見ることでインスピレーションが湧いたり、気分転換にもなるのでオススメです。

色に番号があるのを知っておくと便利。

まず紹介する前に、カラーコード（色の番号）があります。

パソコンで色を使った編集をするときに超絶使うので、好きな色はメモしておきましょう。

＃英数６文字です。

使用頻度が高そうな色は毎回調べるよりも、メモしてコピペしておくと作業時間短縮できます。

色の教科書

私がサイトの色や曲のジャケットの色、とにかく何か作るときに使うサイトはこちら。

主にカラーコードを調べるために使っています。

色見本と配色サイト

トップページにあるカラーパレットで色を作り、カラーコードを調べる。似たような色や、求めてる色も微妙な違いの中から見つけることが出来ます。

色の名前とかも好きです（笑）詞で使えそう。

配色の見本帳

基本的には１色選ぶだけで、たくさんの組み合わせを知ることが出来る。その量が膨大。

「マンガ配色検索」「旅する配色見本」というメニューもあります。特に色が決まってなければ、ここで探す。

２色以上の色の組み合わせ

何色か選んで、バランス、相性を見たい。

ブログのデザインを考えるときによく使うサイトです。

【2色】random a11y

サイトを開くだけでランダムで２色表示され、文字と背景の相性を一発で見れるサイト。

ロゴものはシンプルな方がいいし、サクサク選べます。

「NEXT」をクリックすれば色が変わります。

CSSコードも生成されるので、サイト作りにもありがたい。

【５色】Palettable

「Palettable」は、「好き」「嫌い」を選択するだけで、５色選んでくれる簡単サイト。

サイトに行くとランダムで色表示されるので、

[D] Dislike 嫌い

[L] Like      好き

どちらかを選ぶだけ。

選んだ色に対して、これはどう？と新たに色を提案してくるので、それに対して好き嫌いを示すだけ。

２色目以降に

[←] Remove

が表示されます。１つ前の色を選び直したいときは、このボタンで戻るだけ。

最高５色まで選べます。

ウェブ配色ツール Ver2.0

サイト作りに特化した配色選びが出来ます。

画面右の設定画面で色や明るさなどを決めると、

• 全体背景
• メニュー
• 見出し

などの色を設定してくれます。

色を抽出してカラーコードを調べる。

サイトや画像を見て使いたい色があるけど、なんの色かわからない。

そんなときには、画像から色を抽出して調べることが出来ます。

「ファイルを選択」をクリックし、画像を選ぶと「画像の色一覧」に抽出された色の番号が表示されます。

画像はサーバーにアップロードせずローカル環境だけで処理します。

スマホにも対応。