Web

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

 

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

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

 

今回は

  • カラーコードを調べる
  • 色の組み合わせをチェック
  • 色を抽出する。

 

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

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

 

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

 

 

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

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

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

 

#〇〇〇〇〇〇

 

#英数6文字です。

 

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

 

色の教科書

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

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

 

色見本と配色サイト

色見本と配色サイト - color-sample.com
色見本と配色サイト - color-sample.com

色をお探しなら、Color-Sample.Com! ファッション、内装・外壁、小物まで、あらゆるデザインの参考に、自分の色をみつけてください。色相・彩度・明度・色名など様々な角度から1600万を超える ...

続きを見る

 

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

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

 

配色の見本帳

🎨配色の見本帳 | キーカラーで選ぶ配色パターン - ホームページで作る配色
🎨配色の見本帳 | キーカラーで選ぶ配色パターン - ホームページで作る配色

色見本、配色を提案するWEB色見本のホームページ。選んだ色をキーカラーにして色の法則から多彩な配色と出会えます。漫画配色検索や旅する配色見本、カラー成分測定「色とりどり」といった色彩を調べるツールも充 ...

続きを見る

 

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

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

 

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

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

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

 

【2色】random a11y

color-site3

 

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

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

 

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

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

 

Randoma11y
Randoma11y

続きを見る

 

【5色】Palettable

color-site1

 

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

 

color-site-2

 

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

 

[D] Dislike 嫌い

[L] Like      好き

 

どちらかを選ぶだけ。

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

 

2色目以降に

[←] Remove

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

最高5色まで選べます。

 

Palettable
Palettable

続きを見る

 

ウェブ配色ツール Ver2.0

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

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

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

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

 

ウェブ配色ツール Ver3 | フォルトゥナ
ウェブ配色ツール Ver3 | フォルトゥナ

1色を選ぶだけでそこそこの配色をしてくれるツールです。高機能ではありませんが、おかしな配色になりにくいように色を自動調整します。

続きを見る

 

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

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

 

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

イメージカラーピッカー | 画像から色(カラーコード)を抽出
イメージカラーピッカー | 画像から色(カラーコード)を抽出

スマホでの操作に対応した、写真や画像から、カラーコードを抽出するウェブサービスです。サーバーにアップロードする必要がないので、安心して利用できます。

続きを見る

 

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

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

スマホにも対応。

 

-Web

Copyright© スキニノート , 2020 All Rights Reserved Powered by AFFINGER5.