シンプルで使いやすいのが登場! UIのデザインで役立つ、色に関する便利なツールがまとめて利用できる -hue.tools

指定したカラーの色相、さまざまな詳細情報、混色・ブレンド・変換・グラデーションなどを生成できるオンラインツールを紹介します。

最近のUIデザインで見かける複数のカラーを使用した美しいグラデーションを生成したり、そのカラーを使用したUIデザインや写真素材なども表示され、色に関する便利なツールがまとめて利用できます。

UIのデザインで役立つ、色に関する便利なツールがまとめて利用できる -hue.tools

hue.tools
hue.tools -GitHub

hue.toolsの特徴

hue.toolsはカラーを操作するためのシンプルなツールで、そのカラーの詳細情報、そのカラーを使用したデザインや写真、混色・ブレンド・変換などを簡単に利用できます。MITライセンスで、商用プロジェクトでも無料で利用できます。

hue.toolsには、4つの機能が用意されています。

  • info
    指定したカラーをさまざまな色空間やフォーマットに変換
    Dribble、Behance、Pexelsなどで同じカラーを使用しているデザインや写真へのリンク
    Triad、Analogous、Polyadなどの色の組み合わせ・ハーモニー
    指定したカラーの補色
    color name listによるカラーの名前
  • mix
    複数のカラーを混ぜて、それらのカラーの濃淡・ステップを好きなだけ生成
    補間モードを切り替えて、色の混合方法を変更
  • blend
    16のブレンドモード(乗算、カラーバーン、ソフトライトなど)のいずれかを使用してカラーを混合
    アルファチャンネルを変更して、細かい調整
  • modify
    8種類のモディファイアを組み合わせてカラーを調整
    モディファイア: Brighten, Darken, Tint, Shade, Desaturate, Saturate, Lighten, Spin

さっそく、hue.toolsを使用してみました。
ベースに使用したカラーは、今年のトレンドカラーです。

2022年のトレンドカラーは最も幸せで暖かいブルー!「ベリーペリ(Very Peri)」

infoでは、指定したカラーのさまざまな色空間での値が表示されます。上部の「Output format」で、カラーをコピーする際に必要なカラーフォーマット・色空間を正確に得ることができます。

サイトのキャプチャ

hue.tools - info

右下の「Inspiration」「Images」では、、そのカラーを使用したデザインや写真のリンクが表示されます。
UIデザインなら、Dribbleが役に立ちます。

サイトのキャプチャ

#6667abのイメージをdribbble.comで見る

アートやイラストなら、Behanceです。

サイトのキャプチャ

#6667abのイメージをbehance.netで見る

写真はPexelsで、CC0で使用できる素材がたくさんあります。

サイトのキャプチャ

#6667abのイメージをPexels.comで見る

指定したカラーを混色・ブレンド・変換することもできます。

サイトのキャプチャ

hue.tool - mix

mixはカラーを混ぜて、それらのカラーの濃淡・ステップを好きなだけ生成でき、グラデーションのCSSも生成されます。

サイトのキャプチャ

hue.tool - mix

blendでは16のブレンドモードを使用して、カラーを混合できます。左上のアイコンをクリックして、アルファチャンネルを変更して、細かい調整もできます。

サイトのキャプチャ

hue.tools - blend

modifyでは8種類のモディファイアを組み合わせてカラーを調整できます。

サイトのキャプチャ

hue.tools - modify

sponsors

top of page

©2022 coliss