配色デザインに必要な機能が揃うオールインワン配色ツール&アイデア集 Dopely Colors

Dopely_Colors_-_A_Free_Solution_to_all_your_Color_Problems

 

デザインでも頭を悩ますことの多い、「配色」選びに必要なあらゆるツールやデザインアイデアを公開しているウェブサイト「Dopely Colors」を今回はご紹介します。

 

美しい配色カラーパレット、グラデーションを作成したり、カラーホイールによる配色選び、配色コントラストチェック、トーンツールなどの機能がずらりと揃い、あらゆるプロジェクトに最適な配色を手軽に見つけることができます。

 

 

Dopely Colors の特長

 

Dopley Colorsは他の配色ツールと異なり、色の用途に応じてさまざまなカラーツールが用意されています。また、配色のアイデアや参考にできるサンプル例が多数揃っている点もポイントです。提供しているすべての色の組み合わせは、なんと1億通り以上。

 

どのようなツールが利用できるのか詳しく見ていきましょう。

 

 

カラーパレット・ジェネレーター

Dopely-Colors-Tools-Palette-V-1.0.8_2x.5bd945e0

 

Color Palette Toolは、デザインする際に使用する色の組み合わせ、「カラーパレット」をほんの数秒、数クリックで作成できるシンプルなツール。一貫性のある美しいカラーパレットを作成できます。

 

配色に迷ってしまうときは、Exploreページより20,000通りを越えるカラーパレットを確認でき、気に入った色は保存し、すべての配色ツールで置換できます。

 

 

 

グラデーション・ツール

 

Gradient Toolsは、2色以上の色をつかって美しいグラデーションカラーを作成できるツール。いくつでも色数、カラーストップを追加できるので、カラーホイールを意識したよりなめらかなグラデーションを表現できます。

 

さらにユニークな機能として、写真をアップロードすることで自動で色を抽出し、グラデーションを作成することも。実際に画像をアップロードしてみると、自動で美しい配色カラーパレットに変換してくれました。

 

 

左側のカラームードを選択し、さいごに右下にある「Looks Good」ボタンをクリックすると、グラデーションに変換されています。線形や円形、またはグラデーションの角度を調整すれば完成です。

 

 

Exploreページでは、およそ10万種類のグラデーションカラーも用意されています。。ツートーンカラーが主ですが、これらを土台にカラーホイールより色を選び、新しいカラーパレットを作成することも。

 

 

 

美しいグラデーションを作成する基本ルールを知っておくと、よりお好みの色合いを表現できるでしょう。

 

濁りなし!美しいグラデーションの基本ルールとCSSオンラインツール

しっかりマスター!美しいグラデーション作成徹底ガイド【Illustratorグルーバルカラー編】

しっかりマスター!美しいグラデーション作成徹底ガイド【Illustrator実践デザイン編】

 

 

カラーホイール・ツール

Dopely-Colors-Tools-Color-Wheel-Custom-V-1.0.8_2x.47e29448

 

色を選ぶときにもっとも一般的な悩みのひとつが、色の組み合わせでしょう。Color Wheel Toolを利用すれば、基本となるベースカラーを選択するだけで、色の基本原則に沿った配色を自動で提示してくれます。

 

補色や類似色などの色の組み合わせを、ボタンひとつで瞬時に切り替えることができるので、色をとにかく試してみたいというときにも便利ですよ。

 

 

カラーミキサー・ツール

 

Color Mixer Toolは、2つ以上の複数の色を手動でスライドさせながら、目的の一色を作成できるツールです。スライドにHEXカラーコードとともに、色の名前も変化していくので、直感的に色を選びたいときにオススメ。

 

 

カラートーン・ツール

Dopely-Colors-Tools-Color-Toner-Tint-_-Shade-Generator-V1.0.8_2x.783680a1

 

Color Toner Toolは、色相や色調、色合い、シェードなどを自動で作成できるインタラクティブな機能が特長です。色の明暗(Shades | Tones | Tints)を切り替え可能で、色合いとシェードが自動生成され、色数も自由に選択できます。

 

ロゴデザインやWebデザイン、タイポグラフィの制作にとても効果的で、コントラストを強調するためにペアとなる補色探しにも。

 

 

カラー変換コンバーター

Dopely-Colors-Tools-Color-Converter-V-1.0.8_2x.31b8b1bf

 

Color Converter Toolは、HEX、RGB、CMYK、HSL、HWB、HSB、LAB、NCOL、COPICなどのカラーコードを入力すれば、瞬時に他のカラーコードに一括変換できるツールです。

 

 

コントラスト・チェッカー

Dopely-Colors-Tools-Contrast-Checker-V-1.0.8_2x.7c07f5a5

 

Contrast Checker Toolは、文字テキストと背景のコントラストを確認することで、ユーザーにとって読みやすい配色かどうか判断できるツール。

 

うまくコントラストを調整できないときは、Exploreページにて20万通りを超える文字テキストの配色アイデアが用意されています。お気に入りに追加、保存しておけば、目的の色をつかって他の配色やカラーパレット、グラデーションの作成に役立てることができます。

 

 

 

カラー&イメージ・ツール

Color-and-Image.569fa1b5

 

Color&Imageページには、写真から抽出した色をつかった配色カラーパレット8,000種類も。デザインの雰囲気やムードにあった写真を見つけることで、より自分らしい配色を探すことができます。

 

 

色に必要なすべてが揃ったオールインワン配色ツール


 

さまざまな方法で美しい配色を作成するだけでなく、デザインのアイデア、参考になりそうなインスピレーションも豊富に揃い、お気に入りカラーの保存や管理などもすべて無料で行うことができるDepely Colors

 

筆者も愛用中の大量の配色ツールを活用したり、自分の誕生日カラーをメインの色にするなど、クリエイティブな方法の配色選びを楽しんでみてはいかがでしょう。

 

 

参照元リンク : Color Better, Color Faster. in your workspace – dopelycolors