HSL を HEX に換算 Hue Saturation Lightness ↔ Hexadecimal 無料 オンライン 安全
HSL で値を入れれば、その場で HEX として読めます。計算はあなたのブラウザーの中で行われ、どこへも何も送られません。そして答えが何に左右されるかは、前提にせず下に書いてあります。
アップロードなし
この書き方はどこから来たか
十六進とRGBは、同じものを二通りに書いたものです。画面の色は三つの数——赤と緑と青の光をどれだけ出すか——で、どれも〇から二五五まで、つまり一バイトです。十六進はそのバイトを十六を底として書くだけですから、#FF8800 と rgb(255, 136, 0) は同じ画素への同じ命令です。HSLが考え出されたのは、どちらも人には読めないからでした。色相を色相環の角度で、彩度と明度を百分率で与えますから、作り手は三つの数を計算し直さずに何かを明るくできます。CMYKはまったく別の世界、光ではなく「インキ」のものです。減法で、四枚の版から組み立てられ、画面が出せるすべての色には届きません。画面は光を出し、紙は光を返すだけだからです。
どこで出会うか
十六進は、様式表に打ち込むものであり、意匠の道具が手渡してくるものです。RGBは色に計算が要るところならどこにでも現れます。階調、透明度、濃淡を算出する符号。HSLは手で配色を整えるときに手が伸びる書き方です。したいと思う変更は、たいてい三つの数のどれか一つの変更だからです。CMYKは印刷所が求めるもので、そこへ換算する瞬間こそ、意匠が光であることをやめてインキになる瞬間です。
よくある質問
私のCMYKの結果が印刷所のものと違うのはなぜですか。
唯一正しい換算というものが存在しないからです。このページの計算は、機器に依らない素朴なもので、出発点や大まかな相当値が要るときにはこれが正しい答えです。印刷所は、特定のインキと紙と印刷機を織り込んだ色の形を通して換算します。同じRGBの色でも、光沢紙と非塗工紙とでは別のCMYK値になります。きっちり合わせねばならないものについては、式を信じるより印刷所にその形を尋ねてください。
画面の色のいくつかが印刷できないのはなぜですか。
両者が届く色がそろっていないからです。画面は光を足して色を作り、インキがどうしても並べない鮮やかで濃い青緑や緑を出せます。紙は光を吸って色を作り、いちばん明るくなれるのは紙そのものの白までです。それぞれが届く色の範囲を色域と呼び、重ならないところでは、換算は手持ちのうちいちばん近い色を選ぶほかありません。画面で鮮やかな色が刷ると少しくすんで見えがちなのは、そのためです。
答えは正確ですか。
二つの単位が整数どうしで互いに定義されている場合は正確です — ページは数字の上でそう述べており、丸めは何桁表示するかにしかありません。比が有限小数にならない場合は十二桁の有効数字を示し、関係は近似であると述べます。そうでないふりはしません。
入力したものは端末から出ていきますか。
いいえ。計算はお使いのブラウザーの中で行われます。何も送られませんし、送る先のサーバーもありません。一度読み込めば、通信を切っても動きます。
なぜ HSL を HEX に変換するのか
HSL で色を決めました。それは考えられる表記だからです。色相 30、彩度 29%、明度 28%、くすんだ茶色で、ホバー状態用にはより淡い 34% のバージョン。さて、その色は、hex コードを求める場所へ行かなければなりません。デザイントークンのファイル、ブランドシート、hsl() を理解しないツール、メールのテンプレート、同僚へのメッセージ。HSL を HEX に変換するとは、筋道立てて考えた色を、短く、あいまいさがなく、あらゆるものに理解される形で書き留めることです。
この変換は、デザイナーが最初に出会うものとは逆方向に働きます。人にやさしい三つの数字から始めて、三バイトに至ります。各段階は単純な算数ですが、三角法のようなケースと丸めがいくつか絡むので、人はそれを代わりにやってもらいたがります。ページはブラウザ内でそれを行い、何もアップロードされません。以下には、三つの数字が六桁の hex 数字にどうなるか、変換が何を保つか、HSL を経た色が出発点から一、二段階ずれることがある理由、デザイナーがこの変換を使う方法、避けるべき落とし穴が載っています。
変換のしくみ
色相、彩度、明度から赤、緑、青へ
変換ツールはまず彩度（クロマ）を求めます。それは色が灰色からどれだけ離れているかで、彩度とともに大きくなり、明度が 50% から離れるにつれて小さくなります。それから色相を、それぞれ幅 60 度の、色相環の六つの扇形のうちの一つに置き、扇形から、三つのチャンネルのどれが最大で、どれが最小で、どれがその間にあるかを決めます。最後に、明度が正しく出るよう定数を加え、三つの値を 0 から 1 の範囲から 0 から 255 に拡大し、それぞれを整数に丸めます。その三バイトを十六進で、各二桁で書きます。
数字を使った例
hsl(30, 29%, 28%) を取ります。クロマは (1 − |2 × 0.28 − 1|) × 0.29 = 0.56 × 0.29 = 0.1624 です。30 度の色相は最初の扇形の中ほどなので、中間のチャンネルはクロマの半分、0.0812 です。加える定数は 0.28 − 0.0812 = 0.1988 です。したがって赤は 0.1624 + 0.1988 = 0.3612、緑は 0.0812 + 0.1988 = 0.28、青は 0.1988 です。255 を掛けて丸めると、92、71、51 になります。hex では、それは #5C4733 です。
灰色
彩度が 0% のとき、色相にかかわらず色は灰色で、三つのバイトは等しくなります。hsl(0, 0%, 50%) は #808080 です。色相は無視されるので、どんな色相の数字でも同じ灰色になります。
変換が保つものと保てないもの
あなたが記述したとおりに色を保つ
結果は、あなたが与えた色相、彩度、明度を持つ色を、バイトとして書いたものです。入力した三つの数字は、目が仕分けるとおりの色、つまり色相環上の色相、どれだけ飽和しているか、どれだけ明るいかです。だから HSL は持つ価値があり、変換はあなたの選択を忠実に hex に運びます。
戻るときに同じ数字は約束できない
二つは同じ色を記述しますが、HSL は異なる幾何学を通してそれに到達し、その三つの数字は書き出すときに整数の度と整数のパーセントに丸められます。したがって、HSL に取って戻した色は、出発点から一、二段階ずれることがあります。見た目は同じでも、バイト単位では同じではありません。私たちの例では、#5A4632 は HSL がおよそ hsl(30, 29%, 28%) の色でした。それらの丸められた数字を戻すと #5C4733 となり、赤が二段階離れています。正確なバイトが必要なら、hex を保ってください。
パーセントと度の記号
ページは、色相を度で、彩度と明度をパーセントで読みます。記号付きでも無しでも書けます。360 を超える、または 0 を下回る色相は色相環で巻き戻されるので、390 は 30 と同じです。
実用的な使い方
デザイントークンのファイルを書く
デザインシステムは、色をトークンとして保存します。多くのチームは、筋道立てて考えられるので HSL で色を作り、すべてのツールが読めるので hex で公開します。各トークンについて HSL を HEX に一度変換すれば、公開されるファイルは誰もが使えるものになります。
hsl() を読めないツール向けの色を作る
メールクライアント、一部の文書エディタ、古いグラフィックスプログラム、多くのグラフのライブラリは、hex しか受け付けません。HSL で求めたものは何でも、それらが使えるようになる前に変換しなければなりません。
生成されたパレットを確認する
色相を回転させてパレットを生成するスクリプトは、hsl() の値の一覧を返します。それらを、スタイルシートに入れたりデザイナーに渡したりするコードとして見るには、それぞれを hex に変換します。同じコードに丸められ、したがって本当は違わない値を見つけることもできます。
メッセージで色を共有する
hex コードは短く、コピーでき、色を扱うほぼ誰にも理解されます。hsl() の値はより長く、デザインの外ではなじみが薄いです。誰かに色を送るなら、hex が礼儀にかなった形です。
ここで HSL を HEX に変換する方法
hsl の値を入力するか貼り付ける
最初の欄に、hsl(30, 29%, 28%) の形で、あるいは三つの数字だけで色を入力します。色相は度、彩度と明度はパーセントです。
hex コードを読む
答えはすぐに、hsl(30, 29%, 28%) = #5C4733 のように現れます。大文字とハッシュ記号付きで書かれます。
作業にコピーする
コードをスタイルシート、トークンファイル、メッセージで使います。逆方向には、HEX を HSL に変換がワンクリックです。
これらの表記の由来
hex と RGB は同じものを二通りに書いたもの
画面の色は三つの数字、つまり赤、緑、青の光をどれだけ出すかで、それぞれ 0 から 255、一バイトです。hex は単にそのバイトを十六進で書いたものです。数字を見るには、HEX を RGB に変換してください。
HSL と CMYK
HSL は、どちらも人間には読みにくいために発明されました。色相を色相環の周りの角度として、彩度と明度を百分率として示すので、デザイナーは三つの数字を計算し直さずに、何かをより明るくできます。CMYK はまったく別の世界、光ではなくインクのものです。減法混色で、四つの印刷版から作られ、画面が光を発するのに対して紙は反射するだけなので、画面が出せるすべての色には届きません。
HSL を HEX に変換するときの落とし穴
元のコードが戻ると期待する
hex コードから始め、HSL に変換し、何も調整せずに戻すと、一、二段階離れた別のコードになることがあります。一つの色なら見えません。デザインシステムでは、どちらの形がマスターかを決め、もう一方は派生したものとして扱ってください。
彩度と明度の取り違え
二つは間違えて入れ替えやすいものです。hsl(30, 28%, 29%) は hsl(30, 29%, 28%) ではありません。順序は色相、彩度、明度です。画面の色が期待どおりに見えないなら、逆にしていないか確認してください。
明度が明るさではないことを忘れる
同じ明度の二つの色は、明るさが違って見えることがあります。明度 50% の黄色は、50% の青よりずっと明るく見えます。文字と背景の色を選ぶなら、明度の数字の比較ではなく、きちんとしたツールでコントラストを確認してください。
範囲外の値を使う
彩度と明度は 0 から 100 パーセントに制限されます。その範囲外の値は切り詰められます。明度 120% は白より明るいのではなく、白です。
変換する前に人が尋ねる質問
hsl(0, 100%, 50%) は hex で何ですか。
#FF0000、純粋な赤です。
hsl(0, 0%, 100%) は hex で何ですか。
#FFFFFF、白です。
小数を使えますか。
はい。hsl(30.5, 28.6%, 27.8%) は受け付けられます。結果は整数のバイトに丸められます。
変換は正確ですか。
入力した数字に対して正確なバイトを、整数値に丸めて与えます。HSL の数字が丸められていたので、戻すと一段階ずれることがあります。
色はアップロードされますか。
いいえ。算数はブラウザ内で行われ、何もどこにも送られません。
どうやって戻しますか。
HEX を HSL に変換を使います。
HSL を HEX に変換するときの賢い選び方
どちらの形がマスターかを決める
HSL でデザインするなら、HSL の値を出どころとして保ち、hex を出力として公開します。ブランドが hex を与えるなら、それを保ち、変化形にだけ HSL を使います。二つを対等な出どころとして混ぜることが、ずれを生みます。
変化には HSL を、固定には hex を使う
濃淡の一族が必要なときは、HSL で作業します。色をあらゆるツールで同一になるよう固定する必要があるときは、hex として書きます。
入力した数字を残す
パレットのメモに、hex の隣に HSL の値を記録しておいてください。あとで誰かがより淡いバージョンを望んだら、すでに丸められたコードからではなく、あなたの数字から始められます。
色相環の六つの扇形
どのチャンネルが高く、どれが低いか
変換は色相環を 60 度の六つの扇形に分け、それぞれの扇形で、一つのチャンネルが最大、一つが最小で、三つ目がなめらかに変わります。0 から 60 では、赤が最大、青が最小で、緑が上がります。赤が黄色に変わります。60 から 120 では、緑が最大で赤が下がります。黄色が緑に変わります。120 から 180 では、緑は高いままで青が上がります。緑がシアンに変わります。180 から 240 では、青が引き継ぎ、緑が下がります。240 から 300 では、青は高いままで赤が上がります。青がマゼンタに変わります。300 から 360 では、赤が再び引き継ぎ、青が下がります。HSL を HEX に変換するとき、色相がどの扇形にあるかを知っていると役立ちます。答えの三つの組のどれが最大になるかを教えてくれるからです。
なぜ答えに家族的な類似があるのか
同じ色相と彩度で明度が異なる色は、親戚のように見える hex コードを与えます。どの組が高く、どれが低いかのパターンが同じで、拡大縮小されているだけです。#5C4733、#7A5F44、#A38461 は、すべて同じ仲間で、赤が最大、次が緑、次が青です。これを一目で読めるようになり、間違いに気づきやすくなります。
明度のランプを作る
一つの色相、九段階
この変換の非常に実用的な使い道は、非常に淡い色から非常に暗い色までの、一つの色のランプを作ることです。デザインシステムが 50、100、200 と 900 まで続くラベルを付けるような尺度です。色相と彩度を選び、明度を 96、90、80、70、60、50、40、30、20 パーセントといった値で刻みます。各段階について HSL を HEX に変換すれば、同じ仲間に属する九つのコードが得られます。最も淡い段階と最も暗い段階で彩度をわずかに、数ポイント下げるほうが、一定に保つより自然に見えることがよくあります。
段階に名前を付ける
各段階に、値ではなく役割を記録する名前を付けてください。最も淡いものにはサーフェス、次には枠線、最も暗いものには文字。コードの中で、名前は次の読み手にその色が何のためのものかを伝え、それを使う規則に触れずに、背後の数字を変えられます。
明るいテーマと暗いテーマ
ランプを鏡写しにする
暗いテーマは、しばしば明るいテーマのランプをひっくり返したものです。最も淡い段階は明るいテーマではページの背景になり、最も暗い段階は暗いテーマの背景になります。ランプを HSL で作ったなら、暗いテーマに必要なのは二組目の変換だけです。ブランドの性格を保つため色相は固定し、彩度の高い色は暗い背景で刺々しく見えがちなので、彩度を少し調整します。
両方のテーマを確認する
両方のテーマの各文字と背景の組について、コントラストをテストしてください。白の上でうまくいく色は、ほぼ黒の上では失敗することがあり、確認はコントラストのツールと、いま作った hex コードで一分かかります。
色の大まかなイメージしかないとき
色相環から始めて、磨く
hex コードがまったくなく、考えだけがあることもあります。穏やかな青、暖かいオレンジ、新鮮な緑。HSL は始めるのに良い場所です。色相環の目印から色相を選び、適度な彩度と中程度の明度を設定して、HSL を HEX に変換して何ができたか見られるからです。騒々しすぎるなら彩度を下げ、平板に見えるなら明度を動かします。各試行は数秒で済み、スタイルシートにそのまま入れられる hex コードで終わります。
関連する換算ツール
同じ系統のツールが、隣接する換算をカバーします。戻るには、HEX を HSL に変換を使ってください。コードの背後の数字には、HEX を RGB に変換とRGB を HEX に変換があり、印刷にはHEX を CMYK に変換とCMYK を HEX に変換があります。同じスタイルシートのサイズには、px を rem に変換が、このページが色にすることを長さに対して行います。
計算例
アプリの成功状態のために緑を選んだとします。hsl(145, 55%, 38%)。それを入力して #2C9658 を読みます。そのコードをトークンファイルで --success として使います。成功の通知の背景には同じ色相を取り、hsl(145, 45%, 94%) で #E9F7EF を読みます。枠線には hsl(145, 45%, 78%) で、#AEE0C3 と読めます。三つのコード、一つの色相、すべて一分で導かれ、それぞれがチームのどのツールでも開ける、素直な hex コードです。
短いチェックリスト
変換の前に
三つの数字の順序を確認します。色相、彩度、明度。どちらの形がマスターかを決めます。
変換中に
値を入力し、hex を読み、ハッシュ記号付きでコピーします。
変換の後に
文脈の中で画面上の色を見て、あとのためにコードの隣に HSL の値を控えます。
よくある間違い
彩度と明度の入れ替え
順序は色相、彩度、明度です。
古い hex を取り戻せると期待する
一段階ずれることがあります。重要なら原本を保ってください。
コントラストの代わりに明度を比べる
文字と背景には、コントラストのツールを使ってください。
色は端末にとどまる
計算はローカルで行われます。値は自分のブラウザで使われ、何もどこにも送られません。後で削除するものはなく、作成するアカウントもありません。それが HSL を HEX に変換する素直な方法です。
まとめ
ここで HSL を HEX に変換するには、色相を度で、彩度と明度をパーセントで入力して、hex コードをすぐに読みます。変換は、目が仕分けるとおりの色を保ちます。色相環上の色相、どれだけ飽和しているか、どれだけ明るいか。二つの表記は同じ色を記述しますが、HSL は異なる幾何学を通してそれに到達し、その三つの数字は整数の度と整数のパーセントに丸められるので、HSL に取って戻した色は、出発点から一、二段階ずれることがあります。正確なバイトが必要なら、hex を保ってください。何もアップロードされません。