このツールでできること
カラーピッカーは1つの色を3つの形式で同時に表示します。Web用のHEX、画面用のRGB、デザイン作業用のHSLです。任意の値をクリックするとコピーできます。値の下には関連する10色、つまり5つのシェード（同じ色相を段階的に暗くしたもの）と5つのティント（同じ色相を段階的に明るくしたもの）が表示されます。
シェードとティントの作り方
ツールは選んだ色をHSLに変換し、シェードごとに明度を10ポイントずつ下げ、ティントごとに10ポイントずつ上げます。色相と彩度は（ほぼ）固定です。ティントでは彩度も少し下げるため、明るい段階が白っぽくなりすぎません。
計算例
#3B82F6（ミディアムブルー）を選ぶと、値はrgb(59, 130, 246)、hsl(217, 91%, 60%)です。1段階暗いシェードは#1D66E5、1段階明るいティントは#6CA3F8です。
形式の使い分け
CSSやHTMLではHEX、APIやツールがチャンネル値を求める場合はRGB、感覚的に色を調整したい場合はHSLを使います（色相を動かすと色の系統が変わり、明度を動かすとダークモード用のバリエーションが作れます）。
注意点
ピッカーはsRGB色空間で動作し、標準的なWebや画面の用途をカバーします。Display P3のような広色域形式には対応していません。