美しいカラーパレットを生成できるツールはたくさんありますが、配色を探しているときに役立つ便利なオンラインツールCoolorsをご紹介します。
人気トレンドのおしゃれな配色カラーパレットを確認、編集できたり、写真から色を抽出したコラージュの作成、色覚障がい診断ツールの他に、配色の明るさや彩度、色温度なども調整できるなど、配色に必要なあらゆるツールが揃っています。
Coolorsとは
Coolorsは、Spaceキーを押すたびに配色をランダムで作成、編集できるオンラインツール。配色に自信がなくても、数千を超える美しい配色カラーパレットからインスピレーションを見つけることもできます。
失敗しない配色えらびに役立つさまざまなツールが同時に公開されている点もポイントです。では、Coolorsの使い方を詳しくみていきましょう。
Coolorsの使い方
Coolorsの使い方は、基本的な2通りとなります。
まずは、「Start the Generator」と書かれた青色のボタンでツールを立ち上げたら、あとはお好みの色が見つかるまでSpaceバーをクリックするだけ。思いがけない配色を見つけることができそう。
もうひとつが、人気カラーを自分好みにカスタマイズする方法です。
「Explore Trending Palettes」と書かれた白いボタンをクリックすると、話題となっているトレンドカラーを一覧で確認できます。
気に行った配色カラーパレットを見つけたら、右下にあるアイコンをクリック>Open in the generatorでジェネレーターを開きましょう。
表示された各色のカラーは、色味の変更などのカスタマイズも直感的に行うことができます。
5色の配色だけでなく、自由にカラーパレット数を増やしたり、減らすことも可能。追加するときも、隣り合う配色を自動的に考慮した色が選択されます。
配色カラーパレット全体の明るさや彩度、色温度などもツールバーより変更でき、リアルタイムでプレビューできるのも便利です。
さらに、色覚障がいのあるひとにどのように見えているのかテスト、検証することも可能です。1型2色覚(Protanopia)など症状別に違いを確認してみましょう。
完成した配色カラーパレットは、さまざまな方法でエクスポートすることも可能。PDFやJPGファイルはもちろん、Adobeカラーパレット用ASE、SVGファイル、さらにはCSSによる書き出しまでできてしまいます。
日常のウェブデザインやグラフィック制作の配色えらびに困ったときに確認してみてはいかがでしょう。
Coolorsのその他の配色ツールまとめ
Coolorsでは配色カラーパレットを生成するだけでなく、色にまつわるさまざまなツールも同時に公開しています。
直接HEXカラーコードを入力するか、カラーパレットから色を選択するだけで、細かい色情報を教えてくれるツール。色の名前にはじまり、HEXからやRGB、CYMKなどのカラー値もひと目でわかりやすく確認できます。
色合いや彩度の異なるカラーバリエーションから、新しく色を選択することも可能。
類似色や補色、スプリット補色など配色えらびに欠かせない色情報がぎっしり。
色覚障がい者向けの配色確認、ここでも行うことができます。
画像をアップロードすると、自動で配色カラーパレットを作成してくるツール。手持ちの画像以外にも、フリーストック写真からも選択可能で、配色数を増減にも対応しています。
こちらも画像をアップロードすることで、自動で色を抽出し、オシャレなコラージュ画像に加工できるツール。レイアウトや画像サイズなどもフレキシブル。
2つの色を選択することで、グラデーション用の段階的な配色カラーパレットを生成してくれるツール。配色数も自由に設定可能。
美しいCSSグラデーションカラーを作成できるツールで、2色以外にも複数のマルチカラーによるグラデーションを表現できる点がポイント。
膨大なCSSグラデーションのコレクションから、お気に入りのひとつを見つけてみても良いかも。
文字テキストと背景色のコントラスト比を自動計算してくれるツール。
Chromeで利用できる拡張機能プラグインやiOSアプリ、Adobe拡張機能として購入することも可能です、
この他の配色オンラインツールも参考にしてみてはいかがでしょう。