WEBデザインみたいなことをしていて、色見本サイトはものすごく便利です。
良いアイデアが思いつかないときでも、色を見ながら考えていたら思いついたり、つかなかったり。
ということで、WEBデザインなどに便利な色見本サイトのまとめです。
目次
色見本と配色サイト
赤、橙、黄、緑、青、紫、黒、白色系のカラーサンプルを手軽に見ることができます。その他にも、鮮度、明度、彩度、日本の伝統色からもサンプルを見ることができます。
Adobe Color CC
カラーホイール | カラースキーム – Adobe Color CC
どこででもカラーテーマ、パレット、スキーマを作成できます。デザインはCreative Cloudアプリケーション＆ソフトウェア間で同期できます。
Paletton
Paletton – The Color Scheme Designer
簡単な操作で直感的に色の組み合わせを作ることができるツールです。メインカラーと組み合わせ方を選ぶだけで、ナイスな配色をしてくれます。
ウェブ配色ツール
1色を作れば自動的に配色を作ってくれるツールです。
colourcode
colourcode – find your colour scheme
マウス移動で色表示、良い色を見つけたら、クリックすることで、カラーパレットに追加していくツール。マウスを動かしながら直感的にパレットを作っていくことができます。
HUE / 360
![[ HUE - 360 ] The Color Scheme Application](https://nelog.jp/wp-content/uploads/2014/11/HUE-360-The-Color-Scheme-Application.jpg "[ HUE - 360 ] The Color Scheme Application")
[ HUE / 360 ] The Color Scheme Application
1色決めると、自動で相性の良いカラーを表示してくれるツールです。
Stylify Me
Stylify Me – Online Style Guide Generator
URLを入力すると、そのページで使用されている色を抽出してくれるWEBツールです。ちなみに、サムネイルは、Yahoo!から抽出したカラーです。
Coolors
Coolors – The super fast color palettes generator!
スペースキーを押すとランダムにカラーパレットを作ってくれるツール。気に入った色は、クリックすれば固定されます。
Find Guidelines
Find Guidelines – The fastest way to brand assets.
各種サービスのブランドカラーコードを取得できます。加えて、ブランドアセット利用のガイドラインページへのリンクがあります。
BrandColors
Twitterや、Facebookなど、各サービスにはブランドカラーというものがあります。そういったブランドカラーが16進数のカラーコードで取得できるので便利です。
色の名前と色見本
Wikipedia等で紹介されている色の名前と色見本がまとめられているサイト。和の色、中文、フランス語、英語の名前などから、カラーサンプルを見ることができます。
WEB色見本 原色大辞典
WEB色見本 原色大辞典 – HTML Color Names
ブラウザで名前が定義されている色名とカラーコードが載っている基本色辞典です。定義されている色は、定義名でCSSに書いてあると、どんな色かわかりやすかったり。
Webセーフカラー
Webセーフカラー web216 – Web Safe Colors
WEBセーフカラー216色を一覧できます。
日本の伝統色 和色大辞典
日本の伝統色 和色大辞典 – Traditional Japanese Color Names
日本の伝統色465色の色名とカラーコードを一覧できます。
世界の伝統色 洋色大辞典
世界の伝統色 洋色大辞典 – Traditional World Color Names
カタカナ表記される慣用色285色の色名とカラーコードを一覧できます。
ブラウザ拡張
その他にも、サイトを閲覧していて、「この色いいね！」とカラーコードを取得したいときは、以下のカラーピッカーなどが便利です。
Firefox内蔵開発ツールのスポイト機能
Firefox内蔵の開発ツールには、スポイトツールがあって以下のように拡大して色を取得することができます。狭いところでもマウスで簡単に色をピックアップすることができます。
ColorZilla
ColorZilla :: Add-ons for Firefox
マウスカーソルで、Firefox上の色ならどこでも取得できるアドオンです。
ColorPick Eyedropper
ColorPick Eyedropper – Chrome ウェブストア
マウスカーソルで、Chromeのウェブページ上の色ならどこからでも取得できる拡張です。
まとめ
僕は、Wordpressテーマのデザインを変更するときは、色見本を眺めながらどうするか考えます。
なので今回、一度整理してみようっと使っていたブックマークにあったカラーサンプルサイトをまとめてみました。
他にも調べてみたら、僕の知らなかったサイト（ツール）なども結構あって思わぬ収穫でした。
僕はデザインのプロではないので、こういったサイトは、本当に助かります。
