3つの表記、同じ色
HEX、RGB、HSLは同じ色を別の書き方で表したものです。どれを選んでも画面に出る結果は同じなので、その場で扱いやすいものを使えば十分です。
HEXは #RRGGBB の形で、デザインツールが書き出し、開発者が受け取る基本の形式です。短くてコピーしやすいのが利点です。
RGBは赤・緑・青を0から255で書きます。コードで色を計算するときや、キャンバスに直接描くときはこの形が要ります。
HSLは色相（0から360度）、彩度、明度で書きます。人が色を調整するときの考え方に一番近い形式です。
HSLが役に立つ場面
ボタンのホバー色を作るとします。HEXでは #3E6FF4 をどれだけ暗くすればよいか見当がつかず、数字をいじっては見比べることになります。HSLなら明度を10下げるだけです。色相と彩度はそのままなので、2つの色が同じ系統に見えます。
同じやり方でパレットも作れます。色相を固定して明度を段階的に振れば濃淡の階調ができ、色相を120度ずつ回せば釣り合いの取れた対比色になります。
CSS変数で色を管理しているなら、HSLの各値を別々に持たせる手もあります。色相の数値ひとつを変えるだけで、テーマ全体の色味を動かせます。
透明度の書き方
#RRGGBBAA のような8桁のHEXは、末尾2桁が不透明度です。80 はおよそ50%、FF は完全な不透明です。現在のブラウザはこの表記をすべて理解します。
透明度が要る場面では rgba() か8桁のHEXを使いますが、半透明の色を重ねることと、最初から明るい色を選ぶことは別の結果になります。背景が変われば半透明の色も一緒に変わります。
このツールが読む書き方
3桁・4桁・6桁・8桁のHEX、rgb() と rgba()、hsl() と hsla() を受け付けます。カンマ区切りの古い表記も、スペース区切りの現行表記も通ります。
red や rebeccapurple のような色名、oklch() のような新しい色空間はまだ読めません。色名の場合はブラウザの開発者ツールでHEX値を確認してから貼り付けてください。