4桁HEXの末尾は透明度
入力と設定
入力色：#0f08
期待する結果
HEX：#00ff0088 RGBA：rgba(0, 255, 0, 0.533) HSLA：hsla(120, 100%, 50%, 0.533)
カラーコード変換
HEX・RGB・HSLのカラーコードを相互変換し、色をプレビューします。
使い方
以下は操作の例です。入力値は目的に合わせて変更できます。
- カラーコードを1つ入力します。
- HEX・RGB・HSLの結果とプレビューを確認します。
- 利用先が受け付ける表記を選びます。
入力
変換結果
このツールについて
#ff0000、rgb(255, 0, 0)、hsl(0, 100%, 50%)のような表記を読み取り、3形式を同時に表示します。短縮HEXとalphaにも対応します。
色名や新しいCSS Color 4構文すべてには対応していません。確実に比較したい場合は表示された数値を確認してください。
この作業の次に使えるツール
- なめらかグラデーション — 変換したカラーコードで、2色のCSS背景を作るときに使えます。
- 基準色から配色づくり — 手元の色を基準に、補色や類似色の候補を作れます。
- 影色・明色の色見本 — 基準色から白・黒を混ぜた明暗の段階を作れます。
入力例と結果の確認
半透明の短縮HEXとHSLの青を使い、色成分と透明度の表記を確かめます。
「この例を試す」を押すと、上の入力と設定が例の内容に切り替わり、処理を実行します。「元の入力へ戻す」は1回ごとに直前の入力と設定を復元します。複数の例を試した場合は、戻す操作を繰り返すと最初の入力へ戻れます。ページを閉じるとこの履歴は失われます。
HSLの色相240度は青
入力と設定
入力色：hsl(240, 100%, 50%)
期待する結果
HEX：#0000ff / RGB：rgb(0, 0, 255) HSL：hsl(240, 100%, 50%)
結果の見方
短縮HEXは各桁を2回繰り返すため#0f08は#00ff0088です。末尾88は136/255の不透明度で、画面では0.533に丸めます。HSLの明度50%はRGBの各成分が半分という意味ではありません。透明色の見え方は下にある背景色にも依存します。
対応範囲と注意点
HEXは3・4・6・8桁、RGB(A)とHSL(A)はカンマ区切りの形式に対応。色名、空白区切りの新しいCSS構文、OKLCH、CMYKや印刷色の管理は扱いません。一部の数値を範囲内へ補正するため厳密なCSS構文検証ではありません。RGBは整数、HSLは小数2桁、透明度は小数3桁へ丸めるので完全な往復変換ではありません。
検証根拠：HEX桁の展開と136/255、HSLの原色を独立計算。実画面の3表記、プレビューの色、複数例後の元入力復元を照合します。
次の作業に使えるツール
同じ赤を3つの表記で確認する
入力例
#ff000080
結果
変換結果： #ff000080 rgba(255, 0, 0, 0.502) hsla(0, 100%, 50%, 0.502)
透明度を含む値は丸めて表示されます。8桁HEXを別形式へ変えた場合は、見た目だけでなくalphaの数値も確認してください。
透明度80は80％ではない
末尾の80は16進数で128です。128÷255なので透明度は約0.502になります。CSSのalphaは0が透明、1が不透明です。背景色との組み合わせで見た目が変わるため、コントラストの確認には背景色も必要です。
よくある質問
透明度も変換できますか？
はい。4桁・8桁HEX、rgba、hslaに対応します。
色は保存されますか？
いいえ。入力は保存しません。
印刷色CMYKへ変換できますか？
いいえ。このツールは画面用のRGB系カラーです。
関連ツール
ツールを紹介
ツール名と公開URLだけを共有します。入力した内容や処理結果は含まれません。
入力と保存について
残したい内容は、先に保管してください。このツールの入力内容・結果は自動保存されません。ページの更新・終了や、入力を消す操作・リセットで失われる場合があります。
お気に入り・表示言語は作業データとは別に保存され、サイトデータの削除で失われる場合があります。端末に保存済みのファイルは、ツールのリセットやサイトデータの削除では消えません。