カラーピッカー

カラーピッカーで選んだ色のHEX, RGB, HSL, HSV各種カラーコードを表示します。
「ここから色を選択」の左にある赤いボックスをクリック/タップするとカラーピッカーが出てくるので、そこから色を選んでください。
色を選んでカラーピッカーを閉じると下の白いボックスに選んだ色のプレビューが、左（スマホの場合は下）のテキストボックスに各種カラーコードが表示されます。
各テキストボックス横の「コピー」ボタンを押すとそれぞれのカラーコードをクリップボードにコピーすることができます。
一番下の「クリア」ボタンを押すと全ての入力を消去し、初期状態に戻します。

HEX

赤(R)・緑(G)・青(B)の値を#RRGGBBの形式で指定するカラーコードです。
RR, GG, BBはそれぞれ16進数で、00(0) - ff(255)の範囲で表されます。Webサイト制作関連では一番よく見る形式かと思います。

例：
#ff0000：原色の赤
#00ff00：原色の緑
#0000ff：原色の青
#000000：黒
#ffffff：白

余談ですが<input type='color'>で使えるデフォルトのカラーピッカーは値としてこのHEXカラーコードを取るのですが、カラーピッカーのGUI上ではRGBの値しか入力できません...なぜ...。

RGB

赤(R)・緑(G)・青(B)の値をR, G, Bで指定します。
こちらはそれぞれ10進数の数値で0 - 255の範囲となっています。カラーピッカーで入力して指定できるのはこの値になります。

例：
255,   0,   0：原色の赤
  0, 255,   0：原色の緑
  0,   0, 255：原色の青
  0,   0,   0：黒
255, 255, 255：白

HSL

こちらは上記の2つと異なり、H(色相, Hue), S(彩度, Saturation), L(輝度, Lightness)で色を指定します。
形式はH, S%, L%となり、それぞれHが0 - 360、Sが0 - 100%、Lが0 - 100%の範囲です。
色相は色そのものの性質のことで、赤 - 黄 - 緑 - 青といった色合いを角度(360°までの範囲)で表します。
彩度は色の鮮やかさの度合いで、0% - 100%で表します。値が低いほど色は薄くなり、0%では完全な白黒になります。
輝度は色の明るさのことで、こちらも0% - 100%で表します。0%が黒、100%が白で、50%で純色になります。

例：
  0, 100%,  50%：原色の赤
120, 100%,  50%：原色の緑
240, 100%,  50%：原色の青
  0,   0%,   0%：黒
  0,   0%, 100%：白

これと後述のHSVの算出ロジックを組むのに少々手こずりました。計算式のことしか考えていなかったためゼロ除算対策を忘れたりしました。
後学のため計算式をここに書き残しておこうと思います。

まずR, G, Bの値（以下$r, $g, $bとする）を用意し、その中の最大値（以下$maxとする）と最小値（以下$minとする）を割り出しておく。

$H(色相, Hue)：

これは最大値がどれかで異なる。
$maxが$rの値の場合は$H = (60 * ($g - $b)) / (max - min)。
$maxが$gの値の場合は$H = (60 * ($b - $r)) / (max - min) + 120。
$maxが$bの値の場合は$H = (60 * ($r - $g)) / (max - min) + 240となる。
$Hが負の値になった場合は、360を加算する。

$L(輝度, Lightness)：

$S(彩度, Saturation)算出の際の条件分岐に$Lの値を用いるので、先に算出しておく。
$L = (((max + min) / 2) / 255) * 100で百分率の値を出し、小数点以下は四捨五入する。

$S(彩度, Saturation)：

これは輝度が50%以下か、それとも51%以上かによって異なる。
50%以下の場合は$S = (max - min) / (max + min)で、
51%以上の場合は$S = (max - min) / (510 - (max + min))となる。
これで出た$Sの値に100をかけて百分率の値にし、小数点以下を四捨五入して算出完了。

HSV

HSVは、H(色相, Hue)・S(彩度, Saturation)までは上のHSLと同様だが、最後はV(明度, Value)となります。この3要素によって色を指定します。
Hの算出式はHSLと同じですが、彩度の算出式は細部が少々異なります。
デザインの際によく使われる形式でもあり、それはこのHSVは「直感的に色を表現できる」という利点があるからなんだそうです。
RGBは光の三原色である赤・緑・青の数値を変動させて任意の色を表現していますが、それだと「どの値をどれだけ動かすと、色がどのように変化するか」がわかりにくいです。
しかし、色相・彩度・明度の値であれば、値の変動と色の変化が比較的わかりやすいものとなります。
Hは0 - 360の範囲、Sは0% - 100%の範囲、Vは0 - 100%の範囲で、構成はHSLと同じです。

例：
  0, 100%, 100%：原色の赤
120, 100%, 100%：原色の緑
240, 100%, 100%：原色の青
  0,   0%,   0%：黒
  0,   0%, 100%：白

これも算出方法を以下に書いておきます。とはいえこちらは割とシンプルですが。色相はHSLと算出方法が全く同じなのでそのまま使いまわしています。
そしてこちらも同様にR, G, Bの値（以下$r, $g, $bとする）を用意し、その中の最大値（以下$maxとする）と最小値（以下$minとする）を割り出しておきます。

$H(色相, Hue)：

これは最大値がどれかで異なる。
$maxが$rの値の場合は$H = (60 * ($g - $b)) / (max - min)。
$maxが$gの値の場合は$H = (60 * ($b - $r)) / (max - min) + 120。
$maxが$bの値の場合は$H = (60 * ($r - $g)) / (max - min) + 240となる。
$Hが負の値になった場合は、360を加算する。

$S(彩度, Saturation)：

HSVの彩度は$S = ((max - min) / max) * 100で百分率の値を出し、小数点以下は四捨五入する。

$V(明度, Value)：

明度は$V = (max / 255) * 100で百分率の値を出し、小数点以下は四捨五入する。

とこのように、H以外は実にシンプルな計算で算出することができます。
余談ですがHSVのValue・明度はBrightnessとも呼ばれるため、HSBという名称でも呼ばれることがあるようです。