Hex・RGB・HSLの相互変換に加え、2色を混ぜた中間色の生成、明暗パレットや配色パターンの自動作成までをブラウザ上で完結。 デザイン・開発の配色作業を効率化します。
カラー設定
カンマ区切り・スペース区切り・区切りなしの9桁のいずれにも対応します。
HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
CSS Variable
--color: #3b82f6;
通常サイズの文字は4.5:1以上でAA基準に適合します。
2色の色合成・中間色ジェネレーター
中間色
#D140F2
明暗パレット
Lightness 95 → 20配色パターンの自動生成
補色
色相環の正反対（+180°）
類似色
隣接する色相（±30°）
トライアド
3等分（+120° / +240°）
分裂補色
補色の両隣（+150° / +210°）
カラーコードジェネレーター・変換ツールとは？
本ツールは、Webデザインやアプリ開発に欠かせないHex（ヘックス）・RGB・HSLといったカラー形式を相互に変換し、最適な配色を支援するための高機能ツールです。 単なる変換機能だけでなく、2色を混ぜ合わせて中間色を作る「色合成」、 入力した色に基づいた「9段階の明暗パレット」、 補色やトライアドなどの「配色パターン」の自動生成を搭載。さらにWCAG 2.1のコントラスト比による視認性チェックも行えるため、フロントエンド開発やUI設計のスピードを劇的に向上させます。
こんなシーンで便利です
2色の中間色・グラデーションの作成
ブランドカラーとアクセントカラーの間を埋める中間色を生成。HSL合成なら彩度を保ったまま鮮やかなグラデーションが作れます。
CSS変数やSassの変数定義
開発中のコードに貼り付けるためのCSSカスタムプロパティをワンクリックで生成し、実装の手間を省きます。
デザインシステム・パレットの作成
ベースとなる色から9段階の明暗バリエーションを生成。ボタンのホバー状態や背景の塗り分けに使う色を簡単に抽出できます。
異なるツール間でのカラー共有
PhotoshopやFigma、Excelなど、使用ソフトによって異なるカラー形式を素早く変換してコピー＆ペーストできます。RGB値の直接入力にも対応しています。
使い方は簡単 4ステップ
- 「HEX Code」欄にカラーコードを入力するか、カラーピッカーで色を選択します（RGB値からの変換も可能です）。
- 「RGB」「HSL」「CSS変数」が自動生成されるので、必要な形式のコピーボタンをクリックします。
- 色合成セクションで2色を指定すると、中間色を含むグラデーションが段階数に応じて生成されます。
- 明暗パレットや配色パターンから色をクリックすると、その色を編集対象として読み込めます。
※リフレッシュアイコンを押すと、インスピレーションを得るためのランダムな色を生成します。
ご利用時の注意点
- 入力形式について：HEXコードは3桁（#fff）および6桁（#ffffff）の両方に対応し、16進数として無効な文字は自動除去されます。RGB値はカンマ区切り・スペース区切り・区切りなしの9桁に対応しています。
- 色合成の方式：HSL合成は色相環上を最短経路で補間するため彩度を保った鮮やかな中間色に、RGB合成は数値を直線的に混ぜるため落ち着いた中間色になります。
- 視認性チェックの基準：WCAG 2.1の相対輝度に基づくコントラスト比を表示しています。通常サイズの文字は4.5:1以上でAA基準に適合します。
- パレットの性質：生成されるパレットはHSLの輝度（Lightness）を95%から20%まで調整したものです。色相と彩度を維持したまま自然な明暗を提供します。
Webデザインで頻出するカラーコード早見表
主要な基本色の各形式（Hex / RGB / HSL）と、CSSでの記述例をまとめています。
| 色名（通称） | Hexコード | RGB形式 | HSL形式 |
|---|---|---|---|
| ホワイト (White) | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| ブラック (Black) | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| レッド (Red) | #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| ブルー (Blue) | #0000ff | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| ライム (Lime) | #00ff00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| イエロー (Yellow) | #ffff00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| シアン (Cyan) | #00ffff | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| マゼンタ (Magenta) | #ff00ff | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| シルバー (Silver) | #c0c0c0 | rgb(192, 192, 192) | hsl(0, 0%, 75%) |
【エンジニア向け：透過度（Alpha）のHex変換表】
CSSのHex（#RRGGBBAA）形式で透明度を指定する際の、代表的な末尾2桁のコードです。
Hex（16進数）: Web制作で最も一般的な形式。#RRGGBBの6桁で表現します。
RGB: 光の三原色（赤・緑・青）を0〜255の数値で指定。エンジニアに馴染みの深い形式です。
HSL: 色相(Hue)・彩度(Saturation)・輝度(Lightness)で指定。直感的な色の微調整（明るくする、鮮やかにするなど）に適しており、色合成や中間色の生成でも自然な結果が得られます。
色合成の理論とデザインシステムを支える色彩工学の実践アプローチ
2色から中間色を導く補間アルゴリズムの違いや、プロダクトのスケールに耐えうるメンテナブルなカラーシステムの構築に必要な技術的ノウハウを提示します。
HSL色空間における色相環の最短経路補間と中間色生成アルゴリズムの実装原理
2色を合成して中間色を求める際、RGB値をそのまま線形補間すると、色相環上で離れた色同士では彩度が大きく低下して灰色に近づくという問題が生じます。
これはRGBが立方体状の色空間であり、対角線上を通過する経路が無彩色の中心点を横切るためです。
一方でHSL色空間では色相を角度として扱えるため、0度から360度の円環上で差分が180度を超える場合に逆回りを選択する最短経路補間を行うことで、彩度と明度を保ったまま自然なグラデーションを生成できます。CSSのcolor-mix関数においてもin hslやin oklchといった補間色空間の指定が可能であり、同様の考え方が標準仕様へ取り込まれています。
トークン設計を効率化するHSL形式を活用したセマンティックカラーの動的制御
デザインシステムにおいてテーマカラーを管理する際は、HexではなくHSL形式でCSS変数を定義するのがモダンなフロントエンド設計の最適解です。
色相、彩度、輝度が独立しているため、ベースとなる色相を固定したまま、輝度の数値だけを増減させることで、ボタンのホバー状態やダークモード用のカラーパレットを1つのCSS変数に対する計算式（calc関数）だけで動的に量産できるようになります。
知覚輝度（Oklab・APCA）を意識した高度なUIカラーのコントラスト調整
従来のYIQやWCAG 2.1で採用されている相対輝度計算は、人間の目が「緑」を明るく、「青」を暗く感じるという知覚特性を完全に反映しきれていません。
実務でより自然で視認性の高いUIを設計する場合は、最新のWCAG 3.0で導入が進むAPCA（Advanced Perceptual Contrast Algorithm）や、色空間モデルであるOklabの概念を取り入れ、テキストと背景のコントラストを単純な数値差ではなく、知覚的な読みやすさを基準にチューニングすることが求められます。
レンダリングパフォーマンスを高めるCSSカスタムプロパティのスコープ最適化
生成された大量のカラーコードをCSS変数として宣言する場合、すべてをルート要素（:root）にグローバル登録すると、テーマ切り替え時にDOM全体の再レンダリングが発生し、大規模アプリでは描画の遅延に繋がります。
コンポーネント固有の中間色や限定的なバリエーションは、特定のコンポーネントや局所的な要素（ローカルスコープ）に閉じて変数を定義することで、ブラウザのスタイル再計算コストを最小限に抑え、体感速度（INP）の向上へと繋がります。
カラーコードの変換・作成でよくある失敗と対策
16進数（Hexコード）のコピペミスによる表示崩れや無効なCSS定義
Webデザインツール（FigmaやAdobe XDなど）からカラーコードをコピーした際、先頭のシャープ（#）が二重になったり（##ffffff）、逆に#が抜けたり、不要なスペースが混入してブラウザ上でスタイルシートが正しく読み込まれない問題です。
💡 対策・解決策を見る▼
2色の中間色をRGBの単純平均で求めてしまい、彩度が落ちて濁った色になる
青と黄色のように色相環上で離れた2色の中間色を、RGB値の平均で計算してしまうと、色空間の中心にある無彩色を通過するため灰色に近い濁った色が生成されます。デザイン上は鮮やかな緑を期待していたのに、意図と大きく異なる結果になる失敗です。
💡 対策・解決策を見る▼
アクセシビリティ（WCAG基準）の認識不足による視認性の低いテキスト・UI設計
背景色とテキストカラーのコントラスト比（輝度比）が不十分な配色を採用してしまい、スマートフォンの屋外利用時や視覚特性を持つユーザーにとって文字が読めず、Webサイトの離脱率上昇やSEO評価の低下を招くケースです。
💡 対策・解決策を見る▼
カラーピッカーの感覚だけで中間色を選び、一貫性のないカラーシステムになる
ボタン、枠線、背景、無効状態（Disabled）などに使うグレー（無彩色）やブランドカラーのトーンを、感覚的な微調整のみで決定してしまい、CSSコード内に類似したカラーコードが乱立して保守性が著しく悪化する失敗です。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.入力したカラーコードやデザインデータが外部に漏洩する心配はありませんか？
A. 一切ありません。本ツールは完全ローカル処理型の安全設計を採用しており、入力されたデータや選択した色はすべてお使いのブラウザ内（メモリ上）のみで処理されます。サーバーへの送信やデータベースへの保存は行われず、ページを閉じれば即座にデータは完全消去されます。
Q.2つの色を合成して中間色を作ることはできますか？
A. はい、色合成セクションで作成できます。色Aと色Bを指定すると、その間を補間した3段階から9段階のグラデーションが生成され、中央の色が中間色として表示されます。生成された各色はクリックするだけでHEXコードをコピーでき、そのまま上部の編集エリアへ送ってRGBやHSLへ変換することも可能です。
Q.HSL合成とRGB合成では結果がどのように変わりますか？
A. 色の混ざり方が大きく異なります。RGB合成は赤・緑・青の数値を直線的に混ぜるため、彩度が落ちて濁った中間色になりやすい特徴があります。一方のHSL合成は色相環上を最短経路で回りながら補間するため、彩度を保ったまま鮮やかな中間色が得られます。たとえば黄色と青を合成した場合、RGB合成では灰色に近づきますが、HSL合成では緑を経由した明るい色が生成されます。用途に応じて切り替えてご利用ください。
Q.RGBの数値からカラーコードへ変換することはできますか？
A. はい、RGB値の入力欄に数値を入れるだけでHEXコードへ変換されます。カンマ区切りの「255, 255, 255」、スペース区切りの「255 255 255」、rgb関数の記法、さらには区切り記号のない9桁の「255255255」といった形式にも自動対応しています。変換結果はHEX・HSL・CSS変数の形式で同時に取得できます。
Q.HEXコードを入力する際に先頭のシャープ記号は必須ですか？
A. いいえ、必須ではありません。先頭のシャープ記号が付いた状態での入力はもちろん、シャープ記号を省いた英数字のみの入力であってもツールが自動で判別して解析します。また、3桁の省略表記と6桁のフル表記の両方に対応しており、16進数として無効な文字は自動的に除去されます。
Q.ベースカラーから補色や類似色などの配色パターンを自動生成できますか？
A. はい、配色パターンの自動生成セクションで確認できます。色相環の理論に基づき、正反対に位置する補色、隣接する類似色、色相環を3等分するトライアド、補色の両隣を使う分裂補色の4種類を同時に生成します。生成された色はクリックすることで編集対象の色として読み込めるため、そこからさらに明暗パレットを展開することも可能です。
Q.ランダムで配色を出力してデザインのアイデアを得る機能はありますか？
A. はい、あります。画面内にあるリフレッシュアイコンをクリックすることで、ランダムなカラーコードを瞬時に自動生成できます。生成された色から配色パターンや明暗パレットが即座に展開されるため、色の組み合わせや新しい配色のインスピレーションを得たい場合のアイデア出しとして活用してください。
Q.カラーコードの形式変換だけでなく同時にCSS変数を取得することは可能ですか？
A. はい、可能です。HEXコードを入力するかカラーピッカーで色を決定すると、RGBやHSLへの形式変換と同時に、Web開発のコードにそのまま貼り付けて宣言できるCSSカスタムプロパティ（CSS変数）用のテキストも自動作成されます。各値の横にあるコピーボタンからワンクリックで取得できます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。