同じ色ひとつでも、聞く相手によって書き方を変える必要があります。CSS には 16 進コード、デザインツールには RGB、色相を変えずに明度だけ動かすときは HSL、印刷所には CMYK といった具合です。この変換ツールは、そのどの表記で入力しても残り全部を一度に示します。そして続けて出てくる 2 つの問いにも答えます。その上に白い文字と黒い文字のどちらが読めるかを WCAG のコントラスト基準で採点し、ホバー時の色やデザインシステムの色階調が必要なときに、明るい版と暗い版がどう見えるかを示します。
ブランドカラーのような固定値には 16 進が向きます。短くどこでも通じます。バリエーションを作るときは HSL を使ってください。数字を 1 つ変えるだけで同じ色相の明るい色や落ち着いた色が得られ、3 つのチャンネルを当てずっぽうで触らずに済みます。
目安と考えてください。実際の印刷色は紙・インク・印刷機のプロファイルで変わるため、印刷所は数式ではなくカラープロファイルで変換します。欲しい色をおおまかに伝える用途に使い、最終的な印刷仕様にはしないでください。
この色と白または黒の文字とのあいだの WCAG コントラスト比です。本文には 4.5:1 が AA の基準、大きな文字や太字は 3:1、7:1 が AAA です。3:1 を下回ると多くの人にとって読みづらくなるので使わないほうがよいでしょう。
どちらも色相と彩度から始まります。HSL の 3 つ目の値は黒から純色を通って白まで進むので、明暗の階調を作るのに向きます。HSV の値は黒から純色までで、多くのカラーピッカーが正方形のグラデーションとして見せているのがこれです。
rgba や 8 桁の 16 進に含まれるアルファ値は受け取りますが無視します。変換結果は不透明な色を説明するものです。とくにコントラストは、半透明な色の背後に何があるか分からなければ計算できません。