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

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

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

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

Alphredo

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

Alphredo

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

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

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

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

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

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

背景色の変更

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

カラーのエクスポート

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

Alphredo -Figma

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