カラーサンプルをデザインの参考に、色見本サイトまとめ

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

WEBデザインみたいなことをしていて、色見本サイトはものすごく便利です。

良いアイデアが思いつかないときでも、色を見ながら考えていたら思いついたり、つかなかったり。

ということで、WEBデザインなどに便利な色見本サイトのまとめです。

スポンサーリンク
レクタングル(大)広告

色見本と配色サイト

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

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

赤、橙、黄、緑、青、紫、黒、白色系のカラーサンプルを手軽に見ることができます。その他にも、鮮度、明度、彩度、日本の伝統色からもサンプルを見ることができます。

Adobe Color CC

カラーホイール  カラースキーム - Adobe Color CC

カラーホイール | カラースキーム – Adobe Color CC

どこででもカラーテーマ、パレット、スキーマを作成できます。デザインはCreative Cloudアプリケーション&ソフトウェア間で同期できます。

Paletton

Paletton - The Color Scheme Designer

Paletton – The Color Scheme Designer

簡単な操作で直感的に色の組み合わせを作ることができるツールです。メインカラーと組み合わせ方を選ぶだけで、ナイスな配色をしてくれます。

ウェブ配色ツール

ウェブ配色ツール Ver2.0

ウェブ配色ツール Ver2.0

1色を作れば自動的に配色を作ってくれるツールです。

colourcode

colourcode - find your colour scheme

colourcode – find your colour scheme

マウス移動で色表示、良い色を見つけたら、クリックすることで、カラーパレットに追加していくツール。マウスを動かしながら直感的にパレットを作っていくことができます。

HUE / 360

[ HUE - 360 ] The Color Scheme Application

[ HUE / 360 ] The Color Scheme Application

1色決めると、自動で相性の良いカラーを表示してくれるツールです。

Stylify Me

Stylify Me - Online Style Guide Generator

Stylify Me – Online Style Guide Generator

URLを入力すると、そのページ使用されている色を抽出してくれるWEBツールです。ちなみに、サムネイルは、Yahoo!から抽出したカラーです。

Coolors

Coolors - The super fast color palettes generator!

Coolors – The super fast color palettes generator!

スペースキーを押すとランダムにカラーパレットを作ってくれるツール。気に入った色は、クリックすれば固定されます。

Find Guidelines

Find Guidelines - The fastest way to brand assets.

Find Guidelines – The fastest way to brand assets.

各種サービスのブランドカラーコードを取得できます。加えて、ブランドアセット利用のガイドラインページへのリンクがあります。

BrandColors

BrandColors

BrandColors

Twitterや、Facebookなど、各サービスにはブランドカラーというものがあります。そういったブランドカラーが16進数のカラーコードで取得できるので便利です。

色の名前と色見本

色の名前と色見本

色の名前と色見本

Wikipedia等で紹介されている色の名前と色見本がまとめられているサイト。和の色中文の色フランス語英語の名前などから、カラーサンプルを見ることができます。

WEB色見本 原色大辞典

WEB色見本 原色大辞典 - HTML Color Names

WEB色見本 原色大辞典 – HTML Color Names

ブラウザで名前が定義されている色名とカラーコードが載っている基本色事件です。定義されている色は、定義名でCSSに書いてあると、どんな色かわかりやすかったり。

Webセーフカラー

Webセーフカラー web216 - Web Safe Colors

Webセーフカラー web216 – Web Safe Colors

WEBセーフカラー216色を一覧できます。

日本の伝統色 和色大辞典

日本の伝統色 和色大辞典 - Traditional Japanese Color Names

日本の伝統色 和色大辞典 – Traditional Japanese Color Names

日本の伝統色465色の色名とカラーコードを一覧できます。

世界の伝統色 洋色大辞典

世界の伝統色 洋色大辞典 - Traditional World Color Names

世界の伝統色 洋色大辞典 – Traditional World Color Names

カタカナ表記される慣用色285色の色名とカラーコードを一覧できます。

ブラウザ拡張

その他にも、サイトを閲覧していて、「この色いいね!」とカラーコードを取得したいときは、以下のカラーピッカーなどが便利です。

Firefox内蔵開発ツールのスポイト機能

スポイトツール

Firefox内蔵の開発ツールには、スポイトツールがあって以下のように拡大して色を取得することができます。狭いところでもマウスで簡単に色をピックアップすることができます。

Firefox内蔵開発ツールのスポイト機能

ColorZilla

ColorZilla

ColorZilla :: Add-ons for Firefox

マウスカーソルで、Firefox上の色ならどこでも取得できるアドオンです。

ColorPick Eyedropper

ColorPick Eyedropper

ColorPick Eyedropper – Chrome ウェブストア

マウスカーソルで、Chromeのウェブページ上の色ならどこからでも取得できる拡張です。

まとめ

僕は、Wordpressテーマのデザインを変更するときは、色見本を眺めながらどうするか考えます。

なので今回、一度整理してみようっと使っていたブックマークにあったカラーサンプルサイトをまとめてみました。

他にも調べてみたら、僕の知らなかったサイト(ツール)なども結構あって思わぬ収穫でした。

僕はデザインのプロではないので、こういったサイトは、本当に助かります。