どれ使う？使い勝手の良いカラースキームツール8選！

Web制作ツール

2013.04.05

イメージ

今更ながら最近PSPの「勇者のくせになまいきだor2」が楽しくて仕方ない seki です。世界に平和はおとずれなぁい!!!

さてさて今回は、もう何番煎じになるか分りませんが･･･！私がよく使うカラースキームツールのご紹介です。こういうツールは、突然URLが消えてなくなってしまう事もあるので、定期的におさらいも兼ねて一覧を作っておくのはいいことなんだ･･･！と自分に言い聞かせつつ、最近のものから定番のものまで、これだけ抑えておけば大丈夫！という、多機能で使いやすいものを選んでみました。

詳細は以下より。

カラースキームツールを使いこなそう！

色選びを感覚でやると怒られる･･･！という現実を知ってからというもの、こういうツールを自然とブックマークし、集めるようになりました。説得力ある色選びをするには欠かせないツールのご紹介。

「kuler」

これはもう定番中の定番ですね！Photoshopにも軽いものが入っていますが、色の組み合わせを作ったり、人気順を見たり、投票できたり、保存出来たり、共有できたりと、この手のツールでは有名なサイト。adobeのアカウントでログインして使うと中々便利です。が、様々な人が作ったカラーなので、適当に選んで説得力(笑)になってしまわないよう、作るものに適した組み合わせを選ぶのが難しいところですね。

「colorschemedesigner」

これも有名！検索でブッチギリで出てきます。指定した色の、補色、三色組、四色組、類似色、類似色と補色、といったカラースキームを正確に出してくれるばかりか、[Light page example]と[Dark page example]を押すと、それを使ったwebデザインのサンプルを表示してくれたり、[Export]でテキストやPhotoshopのパレット(.aco)を吐き出してくれたりと、基本的な機能は全て揃っているかと。[Adjust Scheme]の[Preset:]で色々な同色のパターンも作ることが出来ます。ガチガチの優等生といった所ですね！一番よく利用しています。

「colorotate」

3Dのインタフェースをマウスで操作しながらカラーパレットが作れるもの。基本機能はしっかり抑えつつ、色味の追加や変更がかなり細かく、また容易に出来ます！kulerと同じく、自分で一から作るのは力量まかせという感もありますが、色々なパターンを見ているだけでも勉強になります。

「Color Sphere」

こちらは機能もUIもシンプルで使い勝手が◎！もちろんIllustratorやPhotoshopにも作った色を吐き出してくれます。Harmony、Vision、Quantizeで色のパターンや数などを変更することができます。Harmonyのカラースキームも種類多くて迷ったら見る！というのにおススメツール。

「colorexplorer」

こちらはシンプルかつ機能が豊富。写真から色を抽出してくれたり、作った色をパレットに保存しておいて、最後にまとめてPhotoshopやPNGデータとして落としてこれたり。ちょっと明度を変えたい、彩度を変えたいというのも簡単に出来るので、使いやすいかと。ちなみに左下の項目で作った色の名前も見ることができます。

「Colour Code」

最近リリースされたばかりのようです。シンプルかつ中々ユニークなUIで、マウスを左右に動かすと色相を、上下に動かすと光度を、スクロールで彩度を、それぞれ変更してくれて、画面クリックで一時保存、ゴミ箱アイコンをクリックで作った色を消すことも出来ます。scheme modeを使えば、元の色をベースに、カラースキームを作成してくれます。サイト自体もお洒落で可愛いデザインですよね！使っていこうか検討中。

ちょっと余談の色選びに便利なツールいろいろ

ここからは余談ですが、こういうツールもあるよ！という所のご紹介。

「0to255」

こちらは特定の色を入力すると、その色より明るい色から暗い色まで段階的に30個くらい出してくれる便利な機能！Fireworksにもカラーパレット的なものがあるので、あまりこちらを使う事は少ないですが、その他の人で、ボタンまわりの1pxラインの色味や、グラデーションの色選択時なんかに、自分ルールを決めておくにはいいかもしれません。カラーをクリックすると、数値をコピーしてくれるのが地味にうれしい。