カラーコード変換 — HEX、RGB、HSL
3 つの表記のいずれかで色を貼り付けると、残りが返ります。アルファ値にも対応し、何を変換しているのか目で確かめられる色見本つきです。
色
各種表記
このツールについて
Hex はデザインツールが渡してくる形式、rgb() は canvas や画像ライブラリが求める形式、hsl() は色を少し明るくしたり色相を回したりしたいときに手が伸びる形式です。これらを手で換算するのは、誰も楽しくない計算です。3 つのいずれかを — アルファの有無を問わず — 貼り付ければ残りが現れます。色見本も一緒に出るのは、値だけでは打ち間違えやすく、妥当かどうかを確かめにくいからです。
使い方
- 1色を貼り付けます: #3fb984、rgb(63 185 132)、hsl(157, 49%, 49%) など。
- 2右側で他の表記を読み、その上の色見本で確認します。
- 3必要な行をコピーします。すぐ使える CSS カスタムプロパティも用意されています。
よくある質問
›どの表記を貼り付けられますか？
3、4、6、8 桁の Hex（#3fb、#3fb9、#3fb984、#3fb984cc）、rgb() と rgba()、hsl() と hsla() です。カンマ区切りの記法も、アルファの前にスラッシュを置く現代的な空白区切りの記法も受け付けます。
›HSL に小数が付いて返るのはなぜですか？
色相・彩度・明度が連続値であるのに対し、Hex はチャンネルあたり 8 ビットだからです。Hex から HSL への変換が整数にぴたりと収まることはまれで、丸めると戻すときに色がわずかにずれてしまいます。
›4 組目の Hex は何ですか？
アルファです。#3fb984cc は同じ色の不透明度 80% です。いまや必要な場所ではどこでもサポートされており、rgba() に切り替えるより短く書けます。
›「tomato」のような色名に対応していますか？
いいえ。148 個の CSS キーワードを解決するには全表が必要で、得られる利点はごくわずかです。代わりに Hex 値を貼り付けてください。ブラウザの開発者ツールならどれでも教えてくれます。
›デザイナーが OKLCH の話ばかりするのはなぜですか？
HSL の明度が知覚上の明るさと一致しないからです。同じ L でも 2 つの色がまったく違って見えることがあります。OKLCH はそれを解決するため、パレットを組むには格段に向いています。このページは日常的に貼り付ける 3 つの表記に絞っています。