Advertisement

Trending_color_palettes_-_Coolors-2

 

美しいカラーパレットを生成できるツールはたくさんありますが、配色を探しているときに役立つ便利なオンラインツールCoolorsをご紹介します。

 

人気トレンドのおしゃれな配色カラーパレットを確認、編集できたり、写真から色を抽出したコラージュの作成、色覚障がい診断ツールの他に、配色の明るさや彩度、色温度なども調整できるなど、配色に必要なあらゆるツールが揃っています

 

 

Coolorsとは

Coolors_-_The_super_fast_color_schemes_generator_

 

Coolorsは、Spaceキーを押すたびに配色をランダムで作成、編集できるオンラインツール。配色に自信がなくても、数千を超える美しい配色カラーパレットからインスピレーションを見つけることもできます。

 

失敗しない配色えらびに役立つさまざまなツールが同時に公開されている点もポイントです。では、Coolorsの使い方を詳しくみていきましょう。

 

 

Coolorsの使い方

 

Coolorsの使い方は、基本的な2通りとなります。

 

まずは、「Start the Generator」と書かれた青色のボタンでツールを立ち上げたら、あとはお好みの色が見つかるまでSpaceバーをクリックするだけ。思いがけない配色を見つけることができそう。

 

 

 

もうひとつが、人気カラーを自分好みにカスタマイズする方法です。

 

「Explore Trending Palettes」と書かれた白いボタンをクリックすると、話題となっているトレンドカラーを一覧で確認できます。

 

気に行った配色カラーパレットを見つけたら、右下にあるアイコンをクリック>Open in the generatorでジェネレーターを開きましょう。

 

Trending_color_palettes_-_Coolors

 

 

表示された各色のカラーは、色味の変更などのカスタマイズも直感的に行うことができます。

 

 

 

5色の配色だけでなく、自由にカラーパレット数を増やしたり、減らすことも可能。追加するときも、隣り合う配色を自動的に考慮した色が選択されます。

 

 

 

配色カラーパレット全体の明るさや彩度、色温度などもツールバーより変更でき、リアルタイムでプレビューできるのも便利です。

 

 

 

さらに、色覚障がいのあるひとにどのように見えているのかテスト、検証することも可能です。1型2色覚(Protanopia)など症状別に違いを確認してみましょう。

 

 

 

完成した配色カラーパレットは、さまざまな方法でエクスポートすることも可能。PDFやJPGファイルはもちろん、Adobeカラーパレット用ASE、SVGファイル、さらにはCSSによる書き出しまでできてしまいます。

 

日常のウェブデザインやグラフィック制作の配色えらびに困ったときに確認してみてはいかがでしょう。

 

 

 

Coolorsのその他の配色ツールまとめ

 

Coolorsでは配色カラーパレットを生成するだけでなく、色にまつわるさまざまなツールも同時に公開しています。

 

Color Picker

直接HEXカラーコードを入力するか、カラーパレットから色を選択するだけで、細かい色情報を教えてくれるツール。色の名前にはじまり、HEXからやRGB、CYMKなどのカラー値もひと目でわかりやすく確認できます。

 

Color_picker_-_Coolors-conversion

 

色合いや彩度の異なるカラーバリエーションから、新しく色を選択することも可能。

 

Color_picker_-_Coolors-2-variations

 

類似色や補色、スプリット補色など配色えらびに欠かせない色情報がぎっしり。

 

Color_picker_-_Coolors-3-color-harmonie

 

色覚障がい者向けの配色確認、ここでも行うことができます。

 

Color_picker_-_Coolors-4-blindness-simulator

 

 

Image Picker

画像をアップロードすると、自動で配色カラーパレットを作成してくるツール。手持ちの画像以外にも、フリーストック写真からも選択可能で、配色数を増減にも対応しています。

 

 

 

Collage Maker

こちらも画像をアップロードすることで、自動で色を抽出し、オシャレなコラージュ画像に加工できるツール。レイアウトや画像サイズなどもフレキシブル。

 

 

 

■ Gradient Palette

2つの色を選択することで、グラデーション用の段階的な配色カラーパレットを生成してくれるツール。配色数も自由に設定可能。

 

Create_a_gradient_palette_-_Coolors

 

 

Gradient Maker

美しいCSSグラデーションカラーを作成できるツールで、2色以外にも複数のマルチカラーによるグラデーションを表現できる点がポイント。

 

 

 

Explore Gradients

膨大なCSSグラデーションのコレクションから、お気に入りのひとつを見つけてみても良いかも。

 

 

 

■ Color Contrast Checker

文字テキストと背景色のコントラスト比を自動計算してくれるツール。

 

Color_contrast_checker_-_Coolors

 

 

Coolors for Chrome

Chromeで利用できる拡張機能プラグインiOSアプリAdobe拡張機能として購入することも可能です、

 

adobe-extension

 

 

この他の配色オンラインツールも参考にしてみてはいかがでしょう。

この記事は、2016年8月22日に公開してから再編集、アップデートを随時行っています。新しいツールを加え、サービスが終了しているツールは削除し、合計83個の配色ツールサ