カラーコンバーター
同じ色をHEX、HEXA、RGB、RGBA、HSL、HWB、Lab、LCH、OKLab、OKLCHに変換し、Display P3、Rec. 2020、CMYKなどの広色域・印刷向け形式もまとめて確認できます。ひとつの値を貼り付けるだけで、ライブプレビューと各形式の変換結果を同時に表示します。解析はすべてブラウザ内で行われるため、フロントエンド実装、デザインの受け渡し、テーマ設計、ブランドカラー管理、デバイス間の色確認、印刷チームとの連携に安心して使えます。
- 一般的なCSSカラー値とモダンな色空間を並べて確認でき、比較しやすくします
- 入力に合わせてプレビューとテキスト出力が即時更新されるため、構文ミスに気づきやすくなります
- よく使う形式と高度な形式を分けて表示するので、必要な値をすぐに見つけられます
- アルファ透明度はHEXA、RGBA、HSLA、モダンなスラッシュ記法でも保持されます
- カラー解析はブラウザ内で完結するため、未公開のブランドカラーや社内アセットにも使いやすい設計です
HEX、HEXA、RGB、RGBA、HSL、HWB、Lab、LCH、OKLab、OKLCHに加え、複数の高度な色空間に対応しています。
概要
一度貼り付けるだけで、一般的なCSS値からOKLCHなどのモダンな色空間までまとめて取得できます。パレットツール、デザインファイル、CSS変数、ドキュメントの間で同じ色が微妙にずれていく問題を減らせます。
- 01
複数のCSS形式を一度に変換
HEX、RGB、HSLに加えて、HWB、Lab、LCH、OKLab、OKLCHも並べて表示します。周囲のコードに合う書き方をすぐに選べます。
- 02
柔軟な入力解析
6桁HEX、8桁HEXA、カンマ区切りのRGB、スペース区切りのHSL、スラッシュ付きアルファのOKLCHなどを、手作業で整えなくても認識します。
- 03
アルファ値をそのまま保持
透明度を含む入力では、アルファチャンネルがHEXA、RGBA、HSLA、OKLCHの出力にも引き継がれ、勝手に落とされることはありません。
- 04
高度な色空間をまとめて確認
Display P3、Rec. 2020、Adobe RGB、ProPhoto、XYZ、Jzazbzをまとめて表示し、広色域レビュー、デバイス間の確認、印刷向け受け渡しに使えます。
- 05
テキスト出力の横でライブプレビュー
入力中にスウォッチが更新されるため、コピーする前に読みにくい色や受け渡し時の違和感に気づけます。
- 06
行ごとのコピー操作
各行にコピー操作があるため、HEXが必要な場所にはHEXを、OKLCHが必要な場所にはOKLCHを、余計な括弧や文字を選択せずにそのまま使えます。
使い方
値を貼り付けて目的の形式をコピーするまで、すべてひとつのパネルで完結します。ちょっとした確認にも、デザインとコードを行き来する作業にも使いやすい流れです。
- 01
入力欄に色を貼り付けるか入力します。たとえば、デザインファイルから取得したHEXや、仕様書にあるOKLCHなどを使えます。
- 02
プレビューのスウォッチを確認し、元のデザインや意図した色と一致しているか見ます。
- 03
よく使う形式と高度な形式のグループを確認し、今の作業に合う構文を選びます。
- 04
その行のコピーボタンを押し、正規化された値をCSS、トークン、ドキュメントに貼り付けます。
- 05
別の色を試したい場合は、サンプルカラーをクリックするか入力欄をクリアして繰り返します。
詳細
日常的なカラー変換、アルファ値の扱い、デザイントークンの整合、デバイスをまたぐ色の共有まで、追加のパレットツールやカラーマネジメントツールを開かずにひとつの画面で確認できます。
- HEX、RGB、HSL、HWB、Lab、LCH、OKLab、OKLCHを一度に扱えるオンラインカラー変換ツール
- カンマ区切り、スペース区切り、スラッシュ付きアルファなど、柔軟な入力構文に対応
- よく使う形式と高度な色空間を分けて表示し、必要な項目だけを確認しやすくします
- 解析エラーや見た目のずれに早く気づけるライブカラープレビュー
- 必要な値だけを正確にコピーできる行ごとのコピー操作
- HEXA、RGBA、HSLA、OKLCHの出力でもアルファ値を保持
- 構文確認やデモに使いやすいサンプルカラーを内蔵
- デザインファイルとフロントエンドのトークンをつなぎ、手作業の変換を減らします
- プライマリ、アクセント、状態色などのテーマ保守に対応
- 共通の正規化された参照値により、ブランドカラー管理を支援
- Display P3とRec. 2020の出力により、広色域レビューにも利用できます
- 印刷、パッケージ、オフライン制作との連携に使えるCMYK出力を含みます
活用シーン
デザインファイルの色をCSS、トークン、ドキュメント、UI状態、マーケティング素材へ展開するとき、ひとつの正規化された参照値があると、チーム全体でどの値が正しい色なのかを揃えやすくなります。
-
デザインからフロントエンドへの受け渡し
デザインツールで選んだ色を、コードベースで使っている形式へ変換できます。HSLやOKLCHを手で計算し直す必要はありません。
-
デザイントークンとCSS変数
同じセマンティック名に対して複数の等価値を生成し、チームのトークン規約に合う形式を選べます。
-
テーマシステムの保守
ライト、ダーク、季節テーマにまたがるプライマリ、アクセント、状態色を、等価値で比較しながら確認できます。
-
ブランドカラー管理
同じブランドカラーが、デザインファイル、ドキュメント、プロダクトコードの中で別々の値として増えていないか確認できます。
-
コンポーネントライブラリの拡張
ホバー、アクティブ、無効、情報、警告などのバリエーションを、HSLやOKLCHの明度・彩度を調整しながら素早く検討できます。
-
広色域とデバイス間レビュー
画面や制作パイプラインをまたいでも色を正しく扱いたい場合に、Display P3、Rec. 2020、Adobe RGBの値を照合できます。
-
キャンペーン・マーケティングページ
一時的なキャンペーンカラーを、既存パレットを崩さずにデザインシステムで許可された形式へ変換できます。
-
アクセシビリティ調整
まず前景色と背景色を正規化し、そのうえで実際の組み合わせをコントラストチェッカーで確認できます。
-
印刷・パッケージ制作への受け渡し
画面上の色をCMYKに変換し、印刷物、パッケージ、オフライン素材でもデジタルプロダクトと見た目を揃えやすくします。
-
データ可視化のパレット
チャート系列、ステータス色、アクセント色は、別々のライブラリや設定に散らばりがちです。先に同じ構文へ正規化しておくと、ダッシュボード内の隣り合うグラフがぶつかりにくくなります。
関連情報
ブランドカラーやデザイントークンを変換したら、次に パレットジェネレーター でサーフェス、ボタン、状態レイヤーに使えるスケールへ広げられます。その色を実際のテキスト、ボタン、バッジに使う前には、組み合わせを コントラストチェッカー で確認し、紙の上で正しいだけでなく画面上でも読める状態にしてください。
カラー形式リファレンス
このツールが出力する主な形式を、短い説明と代表例でまとめています。W3C仕様の代わりではありませんが、日々のフロントエンド実装、デザイン、ブランド管理でよく出てくる形式を把握できます。
| 形式 | 説明 | 例 |
|---|---|---|
| HEX | 赤・緑・青のチャンネルを16進数で表す形式です。デザイントークンやCSS変数で広く使われる、短く扱いやすい書き方です。 | #6366f1 |
| HEXA | HEXにアルファチャンネルを追加した形式です。透明度を含む値を短くひとつにまとめたいときに便利です。 | #6366f180 |
| RGB | 赤・緑・青を10進数で表します。チャンネルごとの調整や、スクリプトからの組み立てがしやすい形式です。 | rgb(99, 102, 241) |
| RGBA | RGBに透明度を加えた形式です。オーバーレイ、フォーカス状態、影、レイヤー状のUIなどでよく使われます。 | rgba(99, 102, 241, 0.6) |
| HSL | 色相、彩度、明度で表す形式です。デザイナーが色やパレットの派生を考える感覚に近い表現です。 | hsl(239 84% 67%) |
| HSLA | HSLに透明度を加えた形式です。意味のあるテーマカラーに半透明表現を持たせたいときに便利です。 | hsl(239 84% 67% / 0.6) |
| HSV | 色相、彩度、明度値で表します。多くのカラーピッカーで使われるモデルに近い一方、HSLとは明るさの扱いが異なります。 | hsv(239 59.3% 94.5%) |
| HWB | 色相、白み、黒みで表します。色相を保ったまま、素早く淡くしたり暗くしたりするときに使いやすい形式です。 | hwb(239 39% 5%) |
| Lab | 知覚的な均一性を意識した色空間です。色差の測定、ブランド許容差の調整、細かなキャリブレーションに役立ちます。 | lab(53.59% 22.06 -66.53) |
| LCH | Labを明度、彩度、色相で円筒状に表した形式です。色相の回転や彩度の調整を方向性を持って行いやすくなります。 | lch(53.59% 70.10 288deg) |
| OKLab | デジタルUIで従来のLabより滑らかな補間をしやすい、現代的な知覚ベースのモデルです。 | oklab(58.56% 0.0255 -0.1639) |
| OKLCH | OKLabを円筒状に表した形式です。テーマの階調、ブランドカラー群、制御しやすいグラデーションづくりで使われることが増えています。 | oklch(58.56% 0.1659 278deg) |
| CMYK | シアン、マゼンタ、イエロー、ブラックのインク量で表す形式です。印刷、パッケージ、オフライン制作物との連携で使われます。 | cmyk(58.9% 56.8% 0% 5.5%) |
使い方のヒント
カラー変換は最初の一歩です。命名規則、コントラスト確認、ビジュアルリグレッションと組み合わせることで、変換後の値を安全にプロダクトへ反映できます。
- チームごとに主な形式をひとつ決めます。たとえばトークンはHEX、テーマ表現はOKLCHにすると、値のぶれを減らせます。
- 各デザイントークンの横に出どころと意図を記録し、ブランドカラーを再利用しても追跡できるようにします。
- コントラストと読みやすさは、ライトテーマとダークテーマを別々に確認してください。
- 色を更新した後は、重要ページでビジュアルリグレッションやスクリーンショット差分を確認し、ひとつの変更が別の箇所を壊していないか見ます。
- カラー変換とアクセシビリティのコントラスト確認は別工程として扱い、正規化後にコントラストをチェックします。
- 大きなパレット移行は、最初にいくつかの重要ページで確認してから、段階的に全体へ適用します。
- デザイナー向けのセマンティック名と、エンジニア向けのトークン名を同じドキュメントで管理し、職種間の認識ずれを減らします。
制限事項
カラー変換は決まった計算で行えますが、最終的な見え方はディスプレイ、レンダリング環境、デザイン意図に左右されます。出力値は実際の利用環境で確認してください。
- 同じ値でもモニターによって見え方は変わり、キャリブレーション差があるほど差は大きくなります。
- 高度な色空間は、古いブラウザやレンダリングエンジンでは対応が限られる場合があります。対象環境の確認は必要です。
- 色の正規化は、視覚的なコントラスト、色覚多様性、アクセシビリティ全体の確認の代わりにはなりません。
- 実際のブランドカラーは、インタラクション状態、文字サイズ、周囲の余白、文脈にも左右されます。値だけで決まるわけではありません。
- 既存パレットを一括置換する前にバックアップを取り、サイト全体へ反映する前に重要ページをいくつか確認してください。
- 値として正しくても、視覚的な階層が正しいとは限りません。重要なページはデザインレビューが必要です。
- 印刷では、CMYKの見え方がインク、紙、印刷工程に左右されます。このツールの出力は、制作チームと話し合うための出発点として扱ってください。
よくある質問
フロントエンド実装、デザインの受け渡し、ブランド連携でカラー変換を使うときによく出る質問です。
どの形式に対応していますか？
HEX、HEXA、RGB、RGBA、HSL、HSLA、HWB、Lab、LCH、OKLab、OKLCH、HSV、CMYKを出力できます。さらにDisplay P3、Rec. 2020、Adobe RGB、ProPhoto、XYZ、Jzazbzなどの高度な色空間にも対応しています。
色の値を解析できないのはなぜですか？
多くの場合は構文の問題です。たとえば#の抜け、閉じ括弧の抜け、スマートクォート、区切り文字の違い、単位の誤り、範囲外のチャンネル値などが原因になります。入力欄の下に対応形式のヒントが表示されます。
入力した色はサーバーへ送信されますか？
いいえ。解析とフォーマットはすべてブラウザ内で行われます。未公開のブランドカラー、社内アセット、機密性の高いデザインファイルにも使いやすい設計です。
出力値をそのままCSSに貼り付けられますか？
はい。各行は現在の構文に沿った有効なCSSカラー値です。スタイルシート、デザイントークンファイル、CSS変数にそのまま貼り付けられます。
透明度はどのように扱われますか？
入力にアルファ値が含まれる場合、HEXA、RGBA、HSLA、または oklch(70% 0.16 250 / 0.8) のようなモダンなスラッシュ記法であっても、アルファ対応の出力に反映されます。
高度な色空間はどんなときに必要ですか？
広色域モニターの確認、デバイス間のカラーマネジメント、細かなブランドカラー制御、HDRコンテンツのレビュー、専門的なビジュアル評価などでは、sRGB以外の色空間が役立ちます。
同じ色がデバイスごとに違って見えるのはなぜですか？
モニターごとに色域、明るさ、色温度、キャリブレーションが異なり、ブラウザのカラーマネジメントも完全には統一されていません。重要なケースでは実際の対象デバイスで確認してください。
デザイナーにも役立ちますか？
はい。デザインファイルからエンジニアリングへ受け渡すときに、正規化された参照値をひとつ持てるため、認識違いや手戻りを減らせます。
HEXとRGBはどちらを使うべきですか？
どちらも一般的です。HEXは短く、トークンでよく使われます。透明度の調整やチャンネル単位のスクリプト処理が必要な場合はRGBAが便利です。
HSLとRGBの主な違いは何ですか？
RGBはデバイス寄りで計算しやすい形式です。一方HSLはデザイン寄りで、色相、彩度、明度の調整を考えやすい形式です。
OKLCHはどんなときに向いていますか？
テーマの階調、ブランドカラー群、制御しやすいグラデーション、色相をまたぐパレットを作るときに、OKLCHは見た目の一貫性を保ちやすい傾向があります。
LabやLCHは本番のWebプロジェクトでも意味がありますか？
あります。色差の制御、滑らかな状態色の遷移、ブランド許容差の管理、デザインシステム内で近い色を説明するときに役立ちます。
複数の色をまとめて変換できますか？
現在の画面は、単色を正確に確認して変換する用途に最適化されています。大量変換にはCSVツール、スクリプト、またはデザインソフト側の一括機能と組み合わせてください。
カラー変換はコントラストチェックの代わりになりますか？
いいえ。変換はこの色をどう書くかを確認するものです。コントラストチェックは実際に読めるかを確認するものなので、両方を組み合わせて使ってください。
CMYKにすると画面上の色と違って見えるのはなぜですか？
CMYKは減法混色で、画面で使われる加法混色のRGBとは仕組みが異なります。さらに印刷結果はインク、紙、印刷工程にも左右されます。
OKLCHのchromaはどのくらいにすればよいですか？
絶対的なルールはありませんが、多くのブランドカラーは0.05〜0.25あたりに収まります。低すぎると薄く見え、高すぎると一部のブラウザやディスプレイで扱える色域を超える場合があります。
関連ツール
変換後は、パレット生成、コントラストチェック、グラデーション生成へ進むことで、正規化された色を完整なビジュアルシステムへ展開できます。