HEX を HSL に換算 Hexadecimal ↔ Hue Saturation Lightness 無料 オンライン 安全
HEX で値を入れれば、その場で HSL として読めます。計算はあなたのブラウザーの中で行われ、どこへも何も送られません。そして答えが何に左右されるかは、前提にせず下に書いてあります。
アップロードなし
この書き方はどこから来たか
十六進とRGBは、同じものを二通りに書いたものです。画面の色は三つの数——赤と緑と青の光をどれだけ出すか——で、どれも〇から二五五まで、つまり一バイトです。十六進はそのバイトを十六を底として書くだけですから、#FF8800 と rgb(255, 136, 0) は同じ画素への同じ命令です。HSLが考え出されたのは、どちらも人には読めないからでした。色相を色相環の角度で、彩度と明度を百分率で与えますから、作り手は三つの数を計算し直さずに何かを明るくできます。CMYKはまったく別の世界、光ではなく「インキ」のものです。減法で、四枚の版から組み立てられ、画面が出せるすべての色には届きません。画面は光を出し、紙は光を返すだけだからです。
どこで出会うか
十六進は、様式表に打ち込むものであり、意匠の道具が手渡してくるものです。RGBは色に計算が要るところならどこにでも現れます。階調、透明度、濃淡を算出する符号。HSLは手で配色を整えるときに手が伸びる書き方です。したいと思う変更は、たいてい三つの数のどれか一つの変更だからです。CMYKは印刷所が求めるもので、そこへ換算する瞬間こそ、意匠が光であることをやめてインキになる瞬間です。
よくある質問
私のCMYKの結果が印刷所のものと違うのはなぜですか。
唯一正しい換算というものが存在しないからです。このページの計算は、機器に依らない素朴なもので、出発点や大まかな相当値が要るときにはこれが正しい答えです。印刷所は、特定のインキと紙と印刷機を織り込んだ色の形を通して換算します。同じRGBの色でも、光沢紙と非塗工紙とでは別のCMYK値になります。きっちり合わせねばならないものについては、式を信じるより印刷所にその形を尋ねてください。
画面の色のいくつかが印刷できないのはなぜですか。
両者が届く色がそろっていないからです。画面は光を足して色を作り、インキがどうしても並べない鮮やかで濃い青緑や緑を出せます。紙は光を吸って色を作り、いちばん明るくなれるのは紙そのものの白までです。それぞれが届く色の範囲を色域と呼び、重ならないところでは、換算は手持ちのうちいちばん近い色を選ぶほかありません。画面で鮮やかな色が刷ると少しくすんで見えがちなのは、そのためです。
答えは正確ですか。
二つの単位が整数どうしで互いに定義されている場合は正確です — ページは数字の上でそう述べており、丸めは何桁表示するかにしかありません。比が有限小数にならない場合は十二桁の有効数字を示し、関係は近似であると述べます。そうでないふりはしません。
入力したものは端末から出ていきますか。
いいえ。計算はお使いのブラウザーの中で行われます。何も送られませんし、送る先のサーバーもありません。一度読み込めば、通信を切っても動きます。
なぜ HEX を HSL に変換するのか
#5A4632 のような hex コードは、色を保存するにはよい方法ですが、色について考えるには貧弱な方法です。数字のどこにも、その色が茶色であること、どれだけ明るいか、少し淡いバージョンがどう見えるかは書かれていません。HSL はそれを直すために発明されました。それは、人が色について話す仕方で色を記述します。どの色相か、どれだけ鮮やかか、どれだけ明るいか。HEX を HSL に変換するとは、デザインツールが渡す形の色を、筋道立てて考えられる形に翻訳することです。hsl(30, 29%, 28%) は暗くくすんだオレンジがかった茶色で、最後の数字を上げれば淡くなることが一目でわかります。
それが、デザイナーやフロントエンド開発者がこの変換を使う本当の理由です。彼らは hex でブランドカラーを持っていて、関連する色の一族が必要です。ホバー状態用のより明るいもの、押された状態のボタン用のより暗いもの、背景の淡い色合い用のごく淡いもの、無効なコントロール用の彩度を落としたもの。hex では、そのそれぞれが三組の数字を探す新たな狩りです。HSL では、それぞれが一つの数字の変更です。色は同じ色で、より役に立つレンズを通して見ているのです。
このページはブラウザ内で変換し、何もアップロードされません。以下には、hex の数字から HSL の三つの数字がどう計算されるか、変換が保つものとどこで丸めるか、色相、彩度、明度が実際に何を意味するか、デザイナーが HSL をパレットや状態の構築にどう使うか、初めて HEX を HSL に変換する人が引っかかる落とし穴が載っています。
HSL が記述するもの
色相：色相環上の位置
色相は、色相環の周りの 0 から 360 度の角度です。赤は 0、黄は 60、緑は 120、シアンは 180、青は 240、マゼンタは 300 にあり、360 で赤に戻ります。色相 30 は赤と黄の間で、オレンジです。その数字は、どの色の仲間にいるかを示し、どれだけ明るいか淡いかについては何も示しません。
彩度：どれだけ鮮やか
彩度は百分率です。100% では、色は色相が許す限り純粋で、0% では、すべての色を失って灰色になります。例の茶色のような 29% の彩度は、くすんだ土の色です。彩度を下げるのは、騒々しい色の性格を変えずに、より穏やかにする最も素早い方法です。
明度：どれだけ淡いか暗いか
明度も百分率です。0% では、色相や彩度にかかわらず黒で、100% では白、50% では完全な通常の色です。28% の私たちの茶色は暗い側にあります。数字を上げると同じ色のより淡いバージョンが、下げるとより暗いものが得られ、それはデザイナーが最もよく望む変更そのものです。
なぜ hex より簡単なのか
hex では、色を淡くするとは、色相がずれないように三組すべてを異なる量だけ増やすことを意味し、目分量ではほぼ不可能です。HSL では、一つの数字を変えて他の二つはそのままにするという意味です。
変換のしくみ
三バイトから一つの角度と二つの百分率へ
変換ツールはまず hex の数字を、それぞれ 0 から 255 の赤、緑、青の値として読み、0 から 1 の間に拡縮します。三つのうちの最大と最小を見つけます。明度は二つの平均です。彩度は、明度に対して、両者がどれだけ離れているかに依存します。色相は、どのチャンネルが最大か、残りの二つがどう比べられるかに依存します。三つがすべて等しければ、色は灰色で、彩度はゼロ、色相に意味はありません。変換ツールはその場合、色相に 0 を表示します。
例
#5A4632 では、バイトは 90、70、50 です。赤が最大で 0.353、青が最小で 0.196 です。明度はその和の半分、0.275 で、約 28% です。広がりは 0.157 なので、彩度は 0.157 を和の 0.549 で割った、約 29% です。赤が最大のチャンネルで、緑がその間にあるので、色相は 30 度になります。結果は hsl(30, 29%, 28%) です。
整数
三つの数字は、書き出すときに整数の度と整数のパーセントに丸められます。それは人が使う形で、日常の作業で CSS が期待する形ですが、次の節が説明するように、最後の桁で情報の一部が落ちることを意味します。
変換が保つものと保てないもの
目が仕分けるとおりに色を保つ
結果は、目が仕分けるとおりの色です。色相環上の色相、どれだけ飽和しているか、どれだけ明るいか。だから HSL は持つ価値があります。一つの数字を変えるだけで色を淡くしたり一段暗くしたりでき、hex ではほぼ不可能です。
同じバイトが戻るとは約束できない
二つは同じ色を記述しますが、HSL は異なる幾何学を通してそれに到達し、その三つの数字は書き出すときに整数の度と整数のパーセントに丸められます。したがって、HSL に取って戻した色は、出発点から一、二段階ずれることがあります。見た目は同じでも、バイト単位では同じではありません。正確なバイトが戻ることが必要なら、hex を保ってください。色を扱うために HEX を HSL に変換し、hex をマスターとして保ちます。
灰色には色相がない
三つのバイトが等しいとき、色相について言うことは何もありません。変換ツールは色相 0、彩度 0% を与え、明度だけが灰色を記述します。0 に何かを読み取らないでください。
実際の HSL の使い方
濃淡の一族を作る
基本の色 hsl(30, 29%, 28%) を取ります。ホバー用のより明るい濃淡は hsl(30, 29%, 34%)。背景用のごく淡い色合いは hsl(30, 29%, 94%)。押された状態用のより暗い濃淡は hsl(30, 29%, 22%)。色相と彩度は動かないので、色は明らかに同じ仲間に属します。hex で同じことをするには数回の試行が要り、それでもわずかにずれて見えるでしょう。
テーマ設定とダークモード
テーマは、同じパレットの明るいバージョンと暗いバージョンを必要とすることがよくあります。HSL なら、色相を保ち、明度と彩度を調整します。明るいテーマでは背景を明るく、文字を暗くし、暗いテーマではその逆です。色相をカスタムプロパティとして定義し、明度だけを変えるのは、一般的でこざっぱりした方法です。
パレットを生成する
基本の色に合う色を見つけるには、色相を回転させます。両側に三十度で類似色が、180 で補色が、120 か 240 でトライアドが得られます。彩度と明度を固定して色相を変えれば、色は一様な感じを持ちます。ランダムに見えないパレットを始める素早い方法です。
アクセシブルなコントラスト
明度はコントラストの主な制御です。色付きの背景の上で文字が読みにくいなら、たいてい直す方法は両者の明度の差を大きくすることで、HSL はそれを、両側の一つの数字を調整する問題にします。
ここで HEX を HSL に変換する方法
hex コードを入力するか貼り付ける
最初の欄に色を、ハッシュ記号付きでも無しでも入力します。三桁と六桁の形式が受け付けられ、透明度付きの八桁の形式も読み取られます。
hsl の値を読む
答えはすぐに、#5A4632 = hsl(30, 29%, 28%) のように現れます。三つの数字は、度での色相と、パーセントでの彩度と明度です。
スタイルシートにコピーする
結果をそのまま、color: hsl(30, 29%, 28%) のような規則で使います。色を調整するには、最後の数字を変えます。逆方向のツールはHSL を HEX に変換です。
これらの表記の由来
hex と RGB は同じものを二通りに書いたもの
画面の色は三つの数字、つまり赤、緑、青の光をどれだけ出すかで、それぞれ 0 から 255、一バイトです。hex は単にそのバイトを十六進で書いたものです。数字を見るには、HEX を RGB に変換してください。
HSL と CMYK
HSL は、どちらも人間には読みにくいために発明されました。色相を色相環の周りの角度として、彩度と明度を百分率として示すので、デザイナーは三つの数字を計算し直さずに、何かをより明るくできます。CMYK はまったく別の世界、光ではなくインクのものです。減法混色で、四つの印刷版から作られ、画面が光を発するのに対して紙は反射するだけなので、画面が出せるすべての色には届きません。
HEX を HSL に変換するときの落とし穴
完全な往復を期待する
丸めのため、戻すと、元から一、二段階離れたコードになることがあります。一つの色なら見えません。多くの色が行ったり来たり変換されるデザインシステムでは、積み重なりえます。hex を出どころとして保ってください。
明度が等しければ明るさも等しいと思い込む
HSL の明度が同じ二つの色は、明るさがかなり違って見えることがあります。50% の黄色は、50% の青よりずっと明るく見えます。HSL の明度は便利な数字であって、知覚される明るさの尺度ではありません。コントラストの確認には、きちんとしたコントラストのツールを使ってください。
パーセント記号を忘れる
CSS では、hsl() の彩度と明度にパーセント記号が付き、色相は単なる数字か deg 付きの数字です。記号を省くのは典型的な間違いです。
灰色に意味を読み込みすぎる
灰色には色相がありません。変換ツールがそれに 0 を表示しても、赤みがかっているという意味ではありません。
変換する前に人が尋ねる質問
#FF0000 は HSL で何ですか。
hsl(0, 100%, 50%)、純粋な赤です。
#FFFFFF は HSL で何ですか。
hsl(0, 0%, 100%)、白です。白には色相が無意味で、変換ツールは 0 を表示します。
HSL はどこでも対応していますか。
現在のすべてのブラウザが hsl() と hsla() を理解します。CSS には何年も前からあります。
変換は正確ですか。
同じ色を記述するという意味では正確ですが、数字は整数の度とパーセントに丸められるので、戻すと一段階ずれることがあります。
色はアップロードされますか。
いいえ。算数はブラウザ内で行われ、何もどこにも送られません。
どうやって戻しますか。
HSL を HEX に変換を使います。
HEX を HSL に変換するときの賢い選び方
作業には HSL、保存には hex を使う
マスターのパレットは、あいまいさのない hex で保ち、変化形を作りたいときに HSL を使ってください。往復は少し失い、マスターは失いません。
新しい色空間を考える
CSS はいまでは oklch() や似た表記を提供しており、そこでは等しい明度が本当に等しく見えます。新しいデザインシステムのために学ぶ価値があります。HSL は、ほぼ誰もが理解し、すべてのツールが対応する表記であり続けます。
カスタムプロパティを使う
--hue、--sat、--light を定義し、そこから色を作ります。hsl(var(--hue) var(--sat) var(--light))。そうするとテーマは、いくつかの数字を編集するだけで変わります。
自信をもって HSL を読み書きする
覚えておく目印
いくつかの数字が HSL を読みやすくします。60 の倍数の色相は純色です。0 は赤、60 は黄、120 は緑、180 はシアン、240 は青、300 はマゼンタ。明度 50 で彩度 100 は、あらゆる色相の最も純粋なバージョンを与え、明度 95 以上は、背景として機能するほど淡い色合いです。HEX を HSL に変換して、これらの目印の一つに近い色相が見えたら、色の仲間を一目で言い当てられます。
仲間の間を移る
色相に 180 を足すと、色相環の反対側の色、補色が得られ、通常は最も強いコントラストです。30 を足したり引いたりすると、元の色の隣に心地よく並ぶ近隣の色が得られます。デザイナーは、これらの段階を使って、推測せずにブランドカラーに合うアクセントを選びます。
変換した値を記録しておく
パレットのために HEX を HSL に変換するときは、結果を、元の hex を隣に添えた表に書いてください。表は色がどう関係するかを示し、色相や明度が他と揃っていなければ、その変わった点がすぐに見えます。チームに共有の参照も与えます。
実際の画面でテストする
較正されたモニターでバランスよく見える色は、日光の下の携帯電話や安価なノートパソコンでは違って見えることがあります。完成したパレットを少なくとも二つの端末で確認し、淡い色合いが一方で消えるなら、明度を少し調整してください。
関連する換算ツール
同じ系統のツールが、隣接する換算をカバーします。戻るには、HSL を HEX に変換を使ってください。コードの背後の数字には、HEX を RGB に変換とRGB を HEX に変換があり、印刷にはHEX を CMYK に変換とCMYK を HEX に変換があります。同じスタイルシートのサイズには、px を rem に変換とpx を em に変換が、このページが色にすることを長さに対して行います。
計算例
ブランドカラーが #1E7A5C だとします。HEX を HSL に変換して、hsl(160, 61%, 30%) を読みます。ホバー状態には、少し明るい hsl(160, 61%, 36%) を書きます。押された状態には hsl(160, 61%, 24%)。通知の背後のごく淡い背景には hsl(160, 40%, 95%)。無効なボタンには hsl(160, 12%, 60%)、同じ色相で色の大部分を抜いたものです。五つの色、一つの色相、一分で書かれ、すべてが同じ仲間に見えます。ブランドカラーが変わったら、色相の数字を一度変えるだけです。
短いチェックリスト
変換の前に
色で何をしたいかを決めます。変化形を作るのか、テーマにするのか、ただ読むのか。
変換中に
hex を貼り付け、hsl を読み、三つの数字を控えます。
変換の後に
一度に一つの数字を変えて変化形を作り、実際の背景の上でそれを見ます。
よくある間違い
丸められた数字を正確だと扱う
それらは整数です。hex をマスターとして保ってください。
明度を明るさと同一視する
同じ明度の二つの色は、どれだけ明るく見えるかが大きく違うことがあります。
パーセント記号を省く
CSS では、彩度と明度に必要です。
色は端末にとどまる
計算はローカルで行われます。値は自分のブラウザで使われ、何もどこにも送られません。後で削除するものはなく、作成するアカウントもありません。それが HEX を HSL に変換する素直な方法です。
まとめ
ここで HEX を HSL に変換するには、hex コードを入力するか貼り付けて、hsl の値をすぐに読みます。変換は、目が仕分けるとおりの色を保ちます。色相環上の色相、どれだけ飽和しているか、どれだけ明るいか。だから HSL は持つ価値があり、一つの数字を変えるだけで色を淡くしたり一段暗くしたりでき、hex ではほぼ不可能です。二つは同じ色を記述しますが、HSL は異なる幾何学を通してそれに到達し、その三つの数字は整数の度と整数のパーセントに丸められるので、HSL に取って戻した色は、出発点から一、二段階ずれることがあります。正確なバイトが戻ることが必要なら、hex を保ってください。何もアップロードされません。