RGB から HEX へ、HSL へ: 実用的なガイド

仕組み

各チャンネルを 0 ～ 255 に固定して丸め、# の後ろにチャンネルごとに 2 桁の 16 進数を書き込みます。 HSL は RGB 比から導出されます。色相はドミナントチャネルから、彩度は最大値と最小値の間の距離から、明度はそれらの平均から得られます。

デザインツールはさまざまな形式をエクスポートし、CSS は特定の形式を想定します。手動で変換すると丸め間違いが発生しやすくなりますが、すべての表現を並べて表示すると、3 通りに書かれた同じ色を簡単に確認できます。

rgb(99, 91, 255) は #635BFF、hsl(244, 100%, 68%) です。 HEX 形式は、CSS 作成者が最も頻繁に貼り付けるものです。 HSL は、新しいチャンネルを推測することなく、暗くしたり彩度を下げたりするのが簡単です。

体系的な色合いと色合いが必要な場合は、HSL でデザインします。色相と彩度を維持し、明度を段階的に変化させます。出力用に HEX を保存しますが、将来の調整のためにデザインファイルに HSL メモを保存します。

私の HEX 値が別のツールで異なるのはなぜですか?

値は 0 ～ 255 に固定されて丸められ、大文字の HEX として書き込まれます。一部のツールでは、小文字または無効な入力が保持されます。

HSLとは何ですか?

別の表現: 色相 (度)、彩度と明度 (パーセント)。色の調整に便利です。

コントラストをチェックしているのでしょうか？

いいえ。これはカラー形式を変換します。コントラストチェックは別のツールです。

このツールは本当に無料ですか?

はい。アカウント、ペイウォール、使用制限はありません。 Tools App は、その背後にあるスタジオである aumenso によって資金提供されています。

入力した内容はアップロードされますか?

いいえ。ツールはブラウザのタブで実行されます。入力した内容は当社に送信されたり保存されたりすることはありません。