カラー生成のこんな便利ツールがあったとは! ベタ塗りのカラーと同じに見える半透明のカラーを生成するツール -Alphredo

同じ背景色に配置したベタ塗りのカラーと同じに見える半透明のカラーを生成するツールを紹介します。

半透明のカラーは背景に重なると、ベタ塗りのカラーと同じになります。たとえば、シャドウやダイアログの背後の背景など半透明で複数の背景で動作するUI要素に最適です。不透明度を下げたブラックを使用するのではなく、ニュートラルカラーの半透明カラーを使用すると、より美しいUIをデザインできます。

下記は、上はベタ塗り、下は半透明です。

ベタ塗りのカラーと同じに見える半透明のカラーを生成する便利ツール -Alphredo

Alphredo

Alphredoの使い方は簡単、登録など面倒なことは一切ありません。
まずは、サイトにアクセスして、「Launch Alphredo」をクリックします。

サイトのキャプチャ

Alphredo

変換したいカラーのHEX値を左側に入力するだけで、そのカラーと同じように見える半透明のカラーが生成されます。カラーを変更・追加したい場合は、HEX値を変更するか、下部の「Add Color」で追加できます。

左: HEX値のカラー、右: 半透明のカラー

変換したいカラーのHEX値を左側

左半分はHEX値、右半分は半透明のカラーで、背景に重なることで同じカラーになります。ただし、白地にブラックなどは不透明度が高くなるため、肉眼では違いを感じられないと思います。

ベタ塗り(ホワイト)の背景と、透明の背景で比較すると違いがよく分かります。

ベタ塗りと半透明の比較

左: HEX値のベタ塗りカラー、右: HSLA値の半透明カラー

背景を変更する場合は、左のパネル「Background」から。デフォルトでホワイト・ブラックがあり、「Custom」から好きなカラーに変更できます。また、半透明のカラーの彩度は「Saturation」から変更できます。

背景色の変更

背景色の変更

作成したカラーは「Export」からコピペできます。

カラーのエクスポート

カラーのエクスポート

Figmaのプラグインも用意されています。

サイトのキャプチャ

Alphredo -Figma

こちらも使い方は簡単です。
変換したいカラーのレイヤーを選択し、背景を持つフレームに収まっていることを確認します。あとは、プラグインを実行するだけです。

sponsors

top of page

©2022 coliss