Hex・RGB・HSLの相互変換や、色の明暗パレットをワンクリックで生成できる無料ツールです。 デザイン・開発の配色作業を効率化します。
カラー設定
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
CSS Variable
--color: #3b82f6;
明暗パレット
Luminance scale (10-90)カラーコード変換・作成ツールとは？
本ツールは、Webデザインやアプリ開発に欠かせないHex（ヘックス）・RGB・HSLといったカラー形式を相互に変換し、最適な配色を支援するための高機能ツールです。 単なる変換機能だけでなく、入力した色に基づいた「明暗パレット」の自動生成や背景色に対する文字の「視認性チェック」機能を搭載。 ブラウザ上で直感的にカラーコードを管理できるため、フロントエンド開発やUI設計のスピードを劇的に向上させます。
こんなシーンで便利です
CSS変数やSassの変数定義
開発中のコードに貼り付けるためのCSSカスタムプロパティをワンクリックで生成し、実装の手間を省きます。
アクセシビリティを考慮したUI設計
選択した色が白背景や黒背景で十分なコントラストがあるかを即座に判定。誰にとっても見やすいサイト制作をサポートします。
デザインシステム・パレットの作成
ベースとなる色から9段階の明暗バリエーションを生成。ボタンのホバー状態や背景の塗り分けに使う色を簡単に抽出できます。
異なるツール間でのカラー共有
PhotoshopやFigma、Excelなど、使用ソフトによって異なるカラー形式を素早く変換してコピー＆ペーストできます。
使い方は簡単 3ステップ
- 「HEX Code」欄にカラーコードを入力するか、カラーピッカーで色を選択します。
- 「RGB」「HSL」「CSS変数」が自動生成されるので、必要な形式のコピーボタンをクリックします。
- 下部のパレットから別の明度を選択して、色の微調整を行うことも可能です。
※リフレッシュアイコンを押すと、インスピレーションを得るためのランダムな色を生成します。
ご利用時の注意点
- 入力形式について：HEXコードは3桁（#fff）および6桁（#ffffff）の両方に対応しています。
- 視認性チェックの基準：簡易的な輝度計算（YIQ）を用いています。厳密なWCAG規格の数値が必要な場合は、専門のコントラストチェッカーを併用してください。
- パレットの性質：生成されるパレットはHSLの輝度（Lightness）を調整したものです。彩度を維持したまま自然な明暗を提供します。
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)で指定。直感的な色の微調整（明るくする、鮮やかにするなど）に適しており、昨今のCSS設計で推奨されています。
モダンなCSS設計とデザインシステムを支える色彩工学の実践アプローチ
カラーコードの単なる相互変換にとどまらず、プロダクトのスケールに耐えうるメンテナブルなカラーシステムの構築や、高度なグラフィック処理をコードで制御するための技術的ノウハウを提示します。
トークン設計を効率化する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）、逆に#が抜けたり、不要なスペースが混入してブラウザ上でスタイルシートが正しく読み込まれない問題です。
💡 対策・解決策を見る▼
HSL形式やRGB形式への手動変換間違いによる色味のズレとバグ
カラーコードのカラーモード変換をオンラインツールを使わずに行おうとして、輝度（Lightness）や彩度（Saturation）の数値を誤って計算し、UIパーツ（ボタンのホバー状態、アクティブ状態など）の配色が元デザインと異なる不具合を誘発する失敗です。
💡 対策・解決策を見る▼
アクセシビリティ（WCAG基準）の認識不足による視認性の低いテキスト・UI設計
背景色とテキストカラーのコントラスト比（輝度比）が不十分な配色を採用してしまい、スマートフォンの屋外利用時や視覚特性を持つユーザーにとって文字が読めず、Webサイトの離脱率上昇やSEO評価の低下を招くケースです。
💡 対策・解決策を見る▼
カラーピッカーの感覚だけで中間色を選び、一貫性のないカラーシステムになる
ボタン、枠線、背景、無効状態（Disabled）などに使うグレー（無彩色）やブランドカラーのトーンを、感覚的な微調整のみで決定してしまい、CSSコード内に類似したカラーコードが乱立して保守性が著しく悪化する失敗です。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.入力したカラーコードやデザインデータが外部に漏洩する心配はありませんか？
A. 一切ありません。本ツールは完全ローカル処理型の安全設計を採用しており、入力されたデータや選択した色はすべてお使いのブラウザ内（メモリ上）のみで処理されます。サーバーへの送信やデータベースへの保存は行われず、ページを閉じれば即座にデータは完全消去されます。
Q.カラーピッカーから色を選択した際に入力欄へ反映される形式は何ですか？
A. カラーピッカーで色を直感的に選択すると、即座にHEXコード、RGB形式、HSL形式のすべてが連動して自動生成されます。必要なカラー形式の横にあるコピーボタンを押すだけで、そのままクリップボードへ取得してデザインやコーディングに利用できます。
Q.HEXコードを入力する際に先頭のシャープ記号は必須ですか？
A. いいえ、必須ではありません。先頭のシャープ記号が付いた状態での入力はもちろん、シャープ記号を省いた英数字のみの入力であってもツールが自動で判別して解析します。また、3桁の省略表記と6桁のフル表記の両方に対応しています。
Q.ランダムで配色を出力してデザインのアイデアを得る機能はありますか？
A. はい、あります。画面内にあるリフレッシュアイコンをクリックすることで、ランダムなカラーコードを瞬時に自動生成できます。色の組み合わせや新しい配色パレットのインスピレーションを得たい場合のアイデア出しとして活用してください。
Q.カラーコードの形式変換だけでなく同時にCSS変数を取得することは可能ですか？
A. はい、可能です。HEXコードを入力するかカラーピッカーで色を決定すると、RGBやHSLへの形式変換と同時に、Web開発のコードにそのまま貼り付けて宣言できるCSSカスタムプロパティ（CSS変数）用のテキストもダッシュボード内に自動作成されます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。