web

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

投稿日:

color-site1

  • カラーコードを調べる
  • 色の組み合わせをチェック
  • 色を抽出する。
  など、「色」で困ったらここに行く。 私がいつも利用しているサイトをまとめました。   色を見ることでインスピレーションが湧いたり、気分転換にもなるのでオススメです。    

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

まず紹介する前に、カラーコード(色の番号)があります。 パソコンで色を使った編集をするときに超絶使うので、好きな色はメモしておきましょう。  
#〇〇〇〇〇〇
  #英数6文字です。   使用頻度が高そうな色は毎回調べるよりも、メモしてコピペしておくと作業時間短縮できます。  

色の教科書

私がサイトの色や曲のジャケットの色、とにかく何か作るときに使うサイトはこちら。 主にカラーコードを調べるために使っています。  

色見本と配色サイト

[st-card-ex url="http://www.color-sample.com/" target="_blank" rel="nofollow" label="" name="" bgcolor="" color="" readmore="続きを見る"]   トップページにあるカラーパレットで色を作り、カラーコードを調べる。似たような色や、求めてる色も微妙な違いの中から見つけることが出来ます。 色の名前とかも好きです(笑)詞で使えそう。  

配色の見本帳

[st-card-ex url="https://ironodata.info/" target="_blank" rel="nofollow" label="" name="" bgcolor="" color="" readmore="続きを見る"]   基本的には1色選ぶだけで、たくさんの組み合わせを知ることが出来る。その量が膨大。 「マンガ配色検索」「旅する配色見本」というメニューもあります。特に色が決まってなければ、ここで探す。  

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

何色か選んで、バランス、相性を見たい。 ブログのデザインを考えるときによく使うサイトです。  

【2色】random a11y

color-site3   サイトを開くだけでランダムで2色表示され、文字と背景の相性を一発で見れるサイト。 ロゴものはシンプルな方がいいし、サクサク選べます。   「NEXT」をクリックすれば色が変わります。 CSSコードも生成されるので、サイト作りにもありがたい。   [st-card-ex url="https://randoma11y.com/#/?_k=rmsnxm" target="_blank" rel="nofollow" label="" name="" bgcolor="" color="" readmore="続きを見る"]  

【5色】Palettable

color-site1   「Palettable」は、「好き」「嫌い」を選択するだけで、5色選んでくれる簡単サイト。   color-site-2   サイトに行くとランダムで色表示されるので、   [D] Dislike 嫌い [L] Like      好き   どちらかを選ぶだけ。 選んだ色に対して、これはどう?と新たに色を提案してくるので、それに対して好き嫌いを示すだけ。   2色目以降に [←] Remove が表示されます。1つ前の色を選び直したいときは、このボタンで戻るだけ。 最高5色まで選べます。   [st-card-ex url="https://www.palettable.io/CAC190" target="_blank" rel="nofollow" label="" name="" bgcolor="" color="" readmore="続きを見る"]  

ウェブ配色ツール Ver2.0

サイト作りに特化した配色選びが出来ます。 画面右の設定画面で色や明るさなどを決めると、
  • 全体背景
  • メニュー
  • 見出し
などの色を設定してくれます。   [st-card-ex url="https://www.color-fortuna.com/color_scheme_genelator3/" target="_blank" rel="nofollow" label="" name="" bgcolor="" color="" readmore="続きを見る"]  

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

サイトや画像を見て使いたい色があるけど、なんの色かわからない。   そんなときには、画像から色を抽出して調べることが出来ます。 [st-card-ex url="https://lab.syncer.jp/Tool/Image-Color-Picker/" target="_blank" rel="nofollow" label="" name="" bgcolor="" color="" readmore="続きを見る"]   「ファイルを選択」をクリックし、画像を選ぶと「画像の色一覧」に抽出された色の番号が表示されます。 画像はサーバーにアップロードせずローカル環境だけで処理します。 スマホにも対応。  ]]>

この記事が気に入ったら
いいね ! しよう

Twitter で

関連記事



  • この記事を書いた人
  • 最新記事

るしる(Lucir)

元バンドマンが10年のブランクを経て音楽活動をネットで再開し、DTMで楽曲制作したり、音楽ブログ運営してます。

-web

© 2021 るしるし