カラーコード変換

このツールでできること

カラーコード変換ツールは、Web制作やデザインでよく使われる3つのカラーモデル（HEX・RGB・HSL）を相互に変換できる無料オンラインツールです。どれか1つの形式で色を入力すると、リアルタイムで他の2形式に自動変換され、大きなプレビューで実際の色を確認できます。ネイティブカラーピッカーにも対応しており、直感的に色を選択することも可能です。ブラウザ内で完結し、サーバーへデータが送信されることはありません。

特徴

• 3形式を同時に表示 --- HEX・RGB・HSLの値をひと目で確認。CSSの記述方法に合わせて好きな形式をコピーできます。
• リアルタイム変換 --- どの入力欄を変更しても、残りの2形式とプレビューが即座に更新されます。ボタン操作は不要です。
• 大きなカラープレビュー --- 200pxの大型プレビューで、選んだ色を実寸大で確認。微妙な色の違いも見逃しません。
• ネイティブカラーピッカー対応 --- ブラウザの標準カラーピッカーを使って直感的に色を選べます。選んだ色は全形式に自動反映されます。
• ブラウザ完結・サーバー送信なし --- すべての変換処理はJavaScriptで実行され、入力データが外部に送信されることはありません。

使い方

1. HEX欄にカラーコード（例: #2563eb）を入力するか、RGB・HSL欄に数値を入力します。
2. 入力と同時にプレビューと他の形式が自動更新されます。カラーピッカーからの選択も可能です。
3. 必要な形式の「コピー」ボタンを押してクリップボードにコピーします。
4. CSSやデザインツールに貼り付けて利用できます。

カラーモデルの違い

Web制作では主に3つのカラーモデルが使われます。それぞれ色の表現方法が異なりますが、同じ色を別の形式で表すことができます。

• HEX（16進数表記） --- #RRGGBB の形式で色を表現します。CSSで最も広く使われる形式で、赤・緑・青の各成分を00〜FFの16進数で指定します。3桁の短縮形（#RGB）にも対応しています。例: #2563eb は青系の色を表します。
• RGB（赤・緑・青） --- 光の三原色である赤（Red）・緑（Green）・青（Blue）の混合比で色を表現します。各成分は0〜255の整数値で指定します。CSSでは rgb(37, 99, 235) のように記述します。ディスプレイが光の三原色で発色する仕組みと直結したモデルです。
• HSL（色相・彩度・明度） --- 色相（Hue: 0〜360度）・彩度（Saturation: 0〜100%）・明度（Lightness: 0〜100%）で色を表現します。CSSでは hsl(221, 83%, 53%) のように記述します。人間の色の知覚に近いモデルで、「もう少し明るく」「彩度を下げたい」といった調整が直感的に行えます。

よく使うWebカラー一覧

こんなときに使えます

• CSSコーディング --- デザインカンプのカラーコードをCSS用の形式に変換。HEXで渡された色をRGBやHSLに変えたいときに。
• デザインツール間の色共有 --- FigmaやPhotoshopなど、ツールごとに異なるカラーモデルを使う場面での変換に。
• 配色の微調整 --- HSLで色相・彩度・明度を個別に調整しながら、最終的なHEXコードを取得。
• アクセシビリティチェック --- コントラスト比の確認時に、RGBやHSLの数値を把握してカラーパレットを検討。
• ブランドカラーの管理 --- ブランドガイドラインに記載するHEX・RGB・HSLの3形式を一度に生成。
• プレゼン資料の作成 --- スライドやドキュメントで色を指定する際に、各形式の値をすばやくコピー。

CSSでの色指定

CSSではいくつかの方法で色を指定できます。状況に応じて使い分けるのがベストプラクティスです。

• HEXが一般的 --- color: #2563eb; のように記述します。最も広く使われ、短くて読みやすいのが特徴です。3桁の短縮形（#26e）も利用可能です。
• 透明度が必要ならRGBA --- background: rgba(37, 99, 235, 0.5); のように4番目の引数で不透明度（0〜1）を指定できます。オーバーレイや半透明要素に便利です。
• 調整しやすいHSL --- color: hsl(221, 83%, 53%); のように記述します。明度だけ変えてホバー色を作るなど、バリエーション展開がしやすいモデルです。
• CSS変数と組み合わせる --- --brand-color: #2563eb; のようにCSS変数に格納し、var(--brand-color) で参照すると保守性が向上します。

よくある質問

無料で使えますか？

はい、完全無料です。回数制限・登録・ログインも一切ありません。

入力したデータはサーバーに送信されますか？

いいえ。すべての変換処理はお使いのブラウザ内（JavaScript）で実行されます。当サイトのサーバーにデータが送信されることはありません。

HEXの3桁短縮形（#abcなど）にも対応していますか？

はい。#abc と入力すると自動的に #aabbcc に展開して変換します。#なしの入力にも対応しています。

RGBの値が0〜255の範囲外だとどうなりますか？

自動的に範囲内にクランプされます。たとえばRに300を入力した場合、255として処理されます。HSLのS・Lも同様に0〜100の範囲にクランプされます。

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

はい。レスポンシブ対応なので、iPhone・Androidのブラウザからも利用できます。カラーピッカーも端末の標準UIが表示されます。

CSSのrgba()やhsla()に対応していますか？

現在はアルファ値（透明度）なしのHEX・RGB・HSLの3形式に対応しています。コピーした値にアルファ値を追加する場合は、手動で rgba(37, 99, 235, 0.5) のように記述してください。