RGB・RGBA・HEX・HEXA・HSL・HSLAカラーコード相互変換ツール【無料・登録不要】

Web制作やデザインでよく使われるカラーコード（HEX、HEXA、RGB、RGBA、HSL、HSLA）をリアルタイムで相互変換できる無料ツールです。

入力欄にいずれかの形式でコードを入力するだけで、瞬時にすべてのカラーコード形式へ変換され、コピーしてすぐに利用できます。

インストール不要でブラウザからすぐに利用できます。
Webデザインやホームページ制作、CSSのコーディング、アプリ開発、画像編集などでカラーコードを変換したいとき、色コードを調べたい時に使ってください。

RGB・RGBA・HEX・HEXA・HSL・HSLAカラーコード相互変換ツール
1. カラーコード相互変換ツール
各カラーコードの特徴と詳細解説

RGB・RGBA・HEX・HEXA・HSL・HSLAカラーコード相互変換ツール

■このツールでできることのポイント
このツールは単なる変換ツールではなく、入力した色の“見え方の違い”まで確認できることが特徴です。

同じ色でも、RGB・HEX・HSLなどの形式によって扱い方が異なるため、Web制作では「どの形式でも同じ色を正しく再現できること」が重要になります。

■市松模様は“透明の確認用”
初めて見る方にとっては「なぜわざわざチェック柄の背景があるの？」と不思議に思うかもしれません。
実は、デジタルでデザインを扱う上で、この2つを並べることにはとても重要な意味があります。

そもそも「市松模様」の画面とは何か？
Photoshopなどの画像編集ソフトやWeb制作の世界において、グレーと白の市松模様は「ここには何も色がない（＝完全に透明である）」ということを表す世界共通のサインです。画面上で「透明」をそのまま透明に表現すると、スマホやパソコンの背景（白や黒）が透けてしまい、正しい色が分からなくなるため、あえてこの格子柄を下地に敷いています。
なぜ「単色背景」のプレビューだけではダメなのか？
もしプレビュー画面が「白い背景」の1つだけだったとします。そこに「不透明な白」を入力したときと、「完全に透明な状態」を入力したとき、どちらも画面上はただの「真っ白」に見えてしまい、人間には区別がつきません。これでは、透明度が正しく設定されているのか肉眼で確認できなくなってしまいます。
2つを並べることで「色の正確さ」と「透明度」が同時にわかる
そこで、当ツールでは2つのプレビューを並べることで、以下のように色の状態を一発で判別できるようにしました。
- 単色背景（上の色）：RGBAやHSLAで透明度を変えても、背景の影響を受けずに「その色自体の本当の濃さ」が分かります。
- 市松模様（下の色）：基本色に透明度（Alpha）が加わったときに、「下の格子柄がどれくらい透けて見えるか」によって、実際の透明度を直感的にチェックできます。