カラー変換ツール – HEX・RGB・HSL

HEX・RGB・HSLをかんたん相互変換

デザインツールやコードエディタをまたいで作業していると、カラーコードの形式変換が頻繁に必要になります。この変換ツールは、Web開発やデザインで最もよく使われる3つの形式 — HEX、RGB、HSL — に対応しています。

入力欄にカラーコードを入力またはペーストするだけで、形式が自動判別され、3つの形式すべてが一度に表示されます。

対応カラー形式

• HEX — 例: #3B82F6 または #f00（省略形）
• RGB — 例: rgb(59, 130, 246)
• HSL — 例: hsl(217, 91%, 60%)

出力はすべてCSS値としてそのまま使える形式で表示されます。コピーしてそのままコードに貼り付けられます。

カラー変換ツールの使い方

1. 入力欄にHEX、RGB、HSLのいずれかの形式でカラーコードを入力します
2. 形式は自動で判別されます
3. 入力欄の下に、3つの形式すべての変換結果が表示されます
4. コピーボタンをクリックすると、その形式の値がクリップボードにコピーされます

よくある変換シーン

• デザインファイルのHEXコードをCSS用のRGB値に変換する
• HSL形式に変換して明度や彩度を調整する
• 画像編集ソフトのRGB値をHTML用のHEXコードに変換する
• 異なる形式の2つのカラー値が同じ色かどうかをすばやく確認する

HEX・RGB・HSL — どれを使うべき？

HEXは最もコンパクトな形式で、CSSやHTMLで広く使われています。RGBはデザインツールや画像編集ソフトでよく使われる形式です。HSLは色相・彩度・明度を分けて表現するため、人間にとって最も直感的に色を調整しやすい形式です。

唯一の正解はありません。作業内容やツールに合わせて使い分けてください。形式を切り替えたいときは、この変換ツールが瞬時に対応します。

よくある質問

HEXからRGBに変換するには？

HEXコード（例: #3B82F6）を入力欄にペーストしてください。RGB値が即座に下に表示されます。

RGBからHEXに変換するには？

rgb(59, 130, 246) のようにRGB値を入力してください。HEXコードとHSL値が自動的に表示されます。

HSLとは何ですか？

HSLは色相（Hue）、彩度（Saturation）、明度（Lightness）の頭文字です。色のベースとなる色合いを変えずに、明るさや鮮やかさだけを調整しやすい表現方法です。

省略形のHEXコードにも対応していますか？

はい。#f00 や #abc のような省略形のコードも、自動的に展開して正しく変換されます。

このツールは無料ですか？

はい。ColourPicker.app は完全無料で、アカウント登録も不要です。

スマートフォンでも使えますか？

はい。モダンブラウザを搭載した端末であれば、パソコン・タブレット・スマートフォンを問わず利用できます。