リスティング広告運用代行正規代理店のASUE

2014年09月09日 Web制作

配色に困ったらこのサイト!Web配色ツール7選!!

 

こんにちは!ASUEのナナミチです。
デザインするうえで悩むことの一つ、配色!
今回は配色するうえで便利な配色ツールをご紹介します。
140909

HUE/360

img01

色相・彩度・明度をいじりながら色の組み合わせを選択できるます。

★使い方
画面左にある『Brightness』と書かれた下にある白、灰色、黒色のボックスをクリックすると色相環全体の明度が変わります。
『Color Space』は色空間、『Hue Step』は色相環の色合いを増やせます。
『Chroma Step』は明度のステップ数を調整、
『M&S Judge』をONにすると一番最初に選んだ色と調和する色だけを表示することができます。

Colourco.de

img04

カラーコードやカラースキームを作成できるツールです。

★使い方

画面上でマウスを動かすと色が変化します。
左右で『色相』、上下で『明るさ』、マウススクロールで『彩度』
画面上をクリックするとその色を保存することができます。

img04-001

 

色をどんどん作成していくことができます。
増えた色は、pngファイル、scssファイル、lessファイルでダウンロードすることができます。

NIPPON COLORS

img03

 

和風なデザインにはこのサイト!
画面上で好きな色をクリックすると背景色が変わり、CMYKやRGBの数値を出してくれます。
『MUNSELL』をONにするとちょっと面白いことが起こります。

色の変化や動きとデザインが個人的に好きでずっと見ていたいです…!

Color Hexa

img06

 

ページ上部の検索欄にカラーコードを入力すると、その色に関する細かい情報が表示されます。

 

 色見本と配色サイト

img07

様々なカテゴリから色の見本が選べるツールです。
Webで表現できる1600万色の色見本を見ることができたり、配色参考サイトがすぐ見つかったりととても便利です。

 

Color Scheme Designer

img08

配色のサンプルページやWebページに落とし込んだ時にどうなるか見ることができてとても便利です。
気に入った配色はPhotoshopのカラーパレットや「HTML+CSS」や「HML」で書き出すこともできます。

COLOURlovers

img05

配色コミュニティサイトです。
作成した配色やパターンを投稿したり、共有することができます。

まとめ

たくさんの配色ツールサイトの一部をご紹介しました。いかがだったでしょうか?
困った時だけでなく、配色がマンネリ化してきた…!!って時にも役にたつのではないでしょうか?!
配色で困ったときは、便利な配色ツールをぜひ活用してみてください!

ナナミチ

ナナミチ

ASUEのディレクター&デザイナー。 Webデザインの制作では反応率を高めることに拘り続けています。 DTPオペレーター→スタジオカメラマン→ASUEという変わった経歴を持っていて、写真の腕はプロ?級を目指してます。 趣味でつまみ細工の髪飾りのオーダーをいただいて制作してます。
TAG

RELATED POST

関連記事

ASUEの最新情報を
お届けします。

お電話でのお問い合わせ

ASUE株式会社へのお電話でのお問い合わせは0120-212-183まで! ASUE株式会社へのお電話でのお問い合わせは0120-212-183まで!

※本ダイヤルはリスティング広告認定資格者が対応いたします。

[営業時間]9:00~18:30 [定休日]土・日・祝

メールでのお問い合わせメールでのお問い合わせ

ページ上部へ戻る