シンプルで使いやすいのが登場！ UIのデザインで役立つ、色に関する便利なツールがまとめて利用できる -hue.tools
Post on:2022年2月28日
sponsors
指定したカラーの色相、さまざまな詳細情報、混色・ブレンド・変換・グラデーションなどを生成できるオンラインツールを紹介します。
最近のUIデザインで見かける複数のカラーを使用した美しいグラデーションを生成したり、そのカラーを使用したUIデザインや写真素材なども表示され、色に関する便利なツールがまとめて利用できます。
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」で、カラーをコピーする際に必要なカラーフォーマット・色空間を正確に得ることができます。
右下の「Inspiration」「Images」では、、そのカラーを使用したデザインや写真のリンクが表示されます。
UIデザインなら、Dribbleが役に立ちます。
アートやイラストなら、Behanceです。
写真はPexelsで、CC0で使用できる素材がたくさんあります。
指定したカラーを混色・ブレンド・変換することもできます。
mixはカラーを混ぜて、それらのカラーの濃淡・ステップを好きなだけ生成でき、グラデーションのCSSも生成されます。
blendでは16のブレンドモードを使用して、カラーを混合できます。左上のアイコンをクリックして、アルファチャンネルを変更して、細かい調整もできます。
modifyでは8種類のモディファイアを組み合わせてカラーを調整できます。
sponsors
