WebサイトをデザインしていてもアプリのUIを設計していても、必ずつきまとうのが「色」の設計です。

そんな色を扱う際に、現在個人的にベストだと思っているツールの組み合わせが最近完成したので紹介します。

Adobe Kuler

Adobe Kulerは、配色の組み合わせを作成、保存、共有できるAdobeのWebサービスです。色のセットは、Photoshop や Illustrator などのスウォッチ形式としてダウンロードもできます。

類似色や補色といった特定のセオリーに従った配色パターンも簡単に作成できるし、公開されている配色パターンをカスタマイズして作成することもできます。

Colllor

Colllorは、指定した色を中心にその色から派生する色調のカラーパレットを生成してくれるWebサービスです。

色を一つ指定すると、明度、彩度、別の色とのミックス、近似色のカラーパレットが作成されます。

ColorChooser

ColorChooserは、カラーピッカーで選択した色を自動的に UIColor や NSColor のコードに変換して、クリップボードにコピーできるMac用のアプリケーション(有料)です。メニューバーに常駐するので、どこからでも呼び出せます。

同様のものとしてDeveloper Color Picker(無料)がありますが、こちらはMac標準のカラーピッカーを拡張するものなので、個人的にはメニューバーに常駐しているColorChooserの方が使いやすいです。

自分の使い方としては、

  1. Adobe Kulerで配色パターンを作成し、
  2. 使いどころによって明度や彩度のコントラストを増減したいときはColllorでパレットを作成して、
  3. ColorChooserでサクっとコード(主にCocoa)に反映する

1で全体的な配色パターンを決めたら、2と3を繰り返して画面を見ながら部分的な調整していくといった感じです。

画面で確認しながら色を行ったり来たりして比較するスタイルでやっているので、2と3が気軽に簡単にできる2つのツールはかなり便利に使わせてもらっています。

また、Adobe Kulerは組み合わせの勉強にも使わせてもらっています。

まあこの手のものは自分のスタイルに合った好みのものを使えばいいと思うので、今使っていて個人的にベストだと思っている組み合わせを一例として紹介しました。

何かの参考になったらうれしいです。

ではでは。