カラーコードコンバーター

複数のカラーコードを HEX、RGB、HSL 形式へ一括変換。開発者向けのバッチ変換。無料のオンラインカラーコンバータ。

主な機能

一括カラー変換
HEX、RGB、HSL、RGBA、HSLA に対応
個別または一括で結果をコピー
各項目のカラープレビュー

Guide

デジタルシステムでの色は数値コードで表現されます。異なるコンテキストは異なるカラーコードフォーマットを必要とします。ウェブ開発者は16進コードと CSS の color 関数を使います。グラフィックデザイナーは印刷用に CMYK、画面用に RGB を扱います。UI デザイナーは直感的な色調整のために HSL を参照します。これらのフォーマット、互いにどう関係するか、それぞれをいつ使うかを理解することは、デジタルカラーを扱う誰にとっても不可欠です。本ガイドでは、主要なカラーコードフォーマット、変換の数学、デザインと開発にわたる実用的な応用を取り上げます。 RGB（Red、Green、Blue）は画面のための基盤のカラーモデルです。モニター、スマートフォン、タブレットの各ピクセルは、異なる強度の赤、緑、青の光を混ぜて色を生成します。各チャンネルは0（光なし）から255（最大強度）の範囲です。RGB(255, 0, 0) は純赤です。RGB(0, 255, 0) は純緑です。RGB(0, 0, 255) は純青です。RGB(255, 255, 255) は白（全チャンネル最大）です。RGB(0, 0, 0) は黒（光なし）です。RGB(128, 128, 128) は中間グレー（各チャンネルの半分の強度の等量）です。RGB モデルは加法と呼ばれます、すべての色を最大強度で組み合わせると白を生成し、光が物理的にどう機能するかと一致するからです。 16進カラーコードはウェブで最も一般的なカラーフォーマットです。16進コードは base-16 で書かれた RGB 値に過ぎません。16進コード #FF0000 は RGB(255, 0, 0) で、赤です。最初の2文字（FF）が赤チャンネルを表し、次の2文字（00）が緑を、最後の2文字（00）が青を表します。16進の FF は10進の255に等しいです。00 は0に等しいです。80 は128に等しいです。16進と RGB の間の変換は基数変換です：16進コードを3つのペアに分け、各ペアを base-16 から base-10 に変換します。短縮16進コードは6文字の代わりに3文字を使います。#F00 は #FF0000 と等価です。各文字が2倍になります：#F00 は #FF0000、#39F は #3399FF、#000 は #000000 になります。この短縮は各ペアが2つの同一文字で構成されるときにのみ機能します。#3A7F2B はどのペアも同一の桁を持たないため短縮できません。利用可能なときは簡潔さのためにコードで短縮形を使いましょう、ただし一部のツールやデザインシステムは常に完全な6文字形式を出力することに注意しましょう。 8桁の16進コードはアルファ（透過度）チャンネルを追加します。#FF000080 は50% 不透明度の赤です。最後の2桁（80、10進で128、255の約50%）がアルファ値を定義します。#FF0000FF は完全不透明な赤（#FF0000 と同一）です。#FF000000 は完全に透明な赤（見えない）です。8桁16進はモダンな CSS とすべての主要ブラウザでサポートされています。一部のフォーマット（Android 開発など）はアルファチャンネルを先に置く（#80FF0000）ため、プラットフォームの慣習を確認しましょう。 HSL（Hue、Saturation、Lightness）は、人間が色について考える方法に一致する形で色を表現します。Hue はカラーホイール上の色の角度です：0度が赤、120度が緑、240度が青、360度は赤に戻ります。Saturation は0%（グレー）から100%（完全に鮮やか）までの色の強度です。Lightness は0%（黒）から100%（白）までの明るさで、50% が通常の色です。HSL(0, 100%, 50%) は純赤です。HSL(120, 100%, 50%) は純緑です。HSL(60, 100%, 50%) は純黄で、Hue ホイール上で赤と緑の中間です。 RGB に対する HSL の実用的な利点は直感的な色の操作です。色を明るくするには Lightness 値を増やします。より落ち着かせるには Saturation を下げます。色をシフトするには（例えば赤からオレンジへ）Hue 角度を調整します。RGB では、これらと同じ調整を達成するには複数のチャンネル値を同時に変更する必要があり、結果を予測するのがより難しくなります。カラーパレットを構築するデザイナーは、1つのパラメータを系統的に調整することで調和のとれたバリエーションを作れるため、しばしば HSL で作業します。 HSV（Hue、Saturation、Value）は HSL と密接に関連しますが、明るさを異なる方法で定義します。HSV では、Value は色の最大の明るさを表します。V=100% で、色は可能な限り明るくなります。V=0% で、Hue と Saturation に関わらず色は黒です。HSV は Adobe Photoshop のカラーピッカーを含む多くのデザインツールのネイティブなカラーモデルです。HSL と HSV の違いは微妙ですが重要です：HSL(0, 100%, 100%) は白ですが、HSV(0, 100%, 100%) は純赤です。HSV は白で色を着けるか黒で陰影を付けるかを考える画家やデザイナーにとってより直感的です。HSL はより対称的で、CSS でしばしば好まれます。 HWB（Hue、Whiteness、Blackness）は、もう一つの直感的なモデルを提供する新しい CSS の color 関数です。Hue は HSL と HSV と同じです。Whiteness はどれだけ白が混ざるかを定義します（0% から100%）。Blackness はどれだけ黒が混ざるかを定義します（0% から100%）。HWB(0, 0%, 0%) は純赤です。HWB(0, 100%, 0%) は白です。HWB(0, 0%, 100%) は黒です。HWB(0, 50%, 0%) は薄いピンク（赤に50% の白を混ぜたもの）です。多くのデザイナーは HWB を、絵の具を白または黒と混ぜる物理的な概念を反映するため、最も直感的なモデルと感じます。CSS はすべてのモダンなブラウザで hwb() をサポートします。 CMYK（Cyan、Magenta、Yellow、Key/Black）は印刷で使われるカラーモデルです。画面が光を加える（加法混色）のに対し、プリンターは光を吸収するインクを置きます（減法混色）。シアンインクは赤光を吸収します。マゼンタは緑を吸収します。イエローは青を吸収します。キー（黒）チャンネルが存在するのは、CMY インクを混ぜると理論的には黒が生成されますが、実際には泥っぽい暗い茶色が生成されるからです。専用の黒インクを追加することでよりきれいな暗色が生成され、着色インクも節約できます。CMYK 値は各チャンネル0% から100% の範囲です。 RGB と CMYK の間の変換は単純な数学的公式ではありません。理論的な変換（C = 1 - R/255、M = 1 - G/255、Y = 1 - B/255、その後 K を C、M、Y の最小値として抽出）は出発点を与えますが、実際の印刷色はインク、紙、印刷機、ICC カラープロファイルに依存します。プロの印刷ワークフローは正確な再現を保証するために較正されたプロファイルを持つカラーマネージメントシステムを使います。WebRecast の変換ツールは数学的変換を実行し、近似、迅速な参照、非クリティカルな色の作業に適しています。本番の印刷ジョブには、常に較正されたプロファイルを持つカラーマネージ済みのワークフローを使いましょう。 CSS の color 関数は近年大幅に拡張されました。伝統的なフォーマットは hex（#FF0000）、rgb(255, 0, 0)、hsl(0, 100%, 50%) です。モダンな CSS はまた、hwb() 関数（Hue、Whiteness、Blackness）、lab() 関数（知覚的に均一な色のための CIE LAB 色空間）、lch() 関数（CIE LCH、LAB の円筒形式）、oklch() 関数（より予測可能な結果を生む LCH の修正版）をサポートします。これらの新しい色空間は RGB と HSL の制限、特に知覚的均一性に対処します、同じ HSL Lightness を持つ2つの色が人の目には明るさがかなり異なって見える場合があるという制限です。 OKLCH はウェブデザインの推奨される色空間に急速になりつつあるため特別な注意に値します。OKLCH は OK Lightness Chroma Hue を意味し、知覚的に均一な結果を生みます。これは、HSL では50% Lightness の黄色が50% Lightness の青よりはるかに明るく見えるのとは異なり、70% の Lightness がすべての Hue にわたって等しく明るく見えることを意味します。アクセシブルなカラーパレットの作成、一貫したボタンホバー状態の生成、デザイントークンシステムの構築に、OKLCH は HSL より良い結果を生みます。構文は oklch(70% 0.15 250) で、70% が Lightness、0.15 が Chroma（色の強度）、250 が Hue 角度です。名前付き CSS カラーには、red、blue、coral、darkslategray、papayawhip のような148の定義済み名前が含まれます。これらの名前は特定の16進値にマップされます（coral は #FF7F50、papayawhip は #FFEFD5）。名前付きカラーはプロトタイピングに便利でコードで読みやすいですが、固定されたパレットに制限されます。ほとんどの本番 CSS は正確な制御のために16進コードや HSL 関数を使います。カラー名には歴史的な起源があります：一部は1980年代の X11 ウィンドウシステムのカラーに由来し、これが darkgray が gray より明るいといった特異性がある理由です。アルファ透過（不透明度）はすべてのモダンな CSS カラーフォーマットで利用可能です。rgba(255, 0, 0, 0.5) は50% 不透明度の赤です。hsla(0, 100%, 50%, 0.5) は同じ色です。モダンな CSS（Level 4）では、スペース区切り構文とアルファ値の前のスラッシュを使って rgb(255 0 0 / 50%) とも書けます。アルファチャンネルは CSS 関数では0（完全に透明）から1（完全不透明）、または8桁16進では0から255の範囲です。色のアルファ透過と CSS の opacity プロパティの違いは重要です：opacity は要素全体とその子に影響しますが、color alpha はその特定の色値にのみ影響します。色のコントラストはアクセシビリティのための重要な考慮事項です。Web Content Accessibility Guidelines（WCAG）はテキストと背景色の間の最小コントラスト比を要求します。レベル AA は通常テキストに4.5:1、大きいテキストに3:1を要求します。レベル AAA は通常テキストに7:1、大きいテキストに4.5:1を要求します。コントラスト比は2つの色の相対輝度から公式 (L1 + 0.05) / (L2 + 0.05)（L1 はより明るい色）を使って計算されます。相対輝度は人間の知覚を考慮した重み付き公式を使います：L = 0.2126R + 0.7152G + 0.0722B（ガンマ補正の後）。緑が知覚される明るさに最も寄与し、これが白の上の緑のテキストが同じコントラストに達するために赤のテキストより高い RGB 値を必要とする理由です。色覚異常は男性の約8%、女性の0.5% に影響します。最も一般的なタイプは赤緑色覚異常（第二色覚異常と第一色覚異常）で、赤と緑が似て見えます。第三色覚異常（青黄色覚異常）は稀です。全色盲（完全な色覚異常）は極めて稀です。インターフェース、チャート、データビジュアライゼーションに色を選ぶとき、情報を伝えるために色だけに頼るのを避けましょう。色を形状、パターン、ラベル、または位置と組み合わせて使いましょう。色覚異常シミュレータでカラーパレットをテストすれば問題のある組み合わせの特定に役立ちます。青とオレンジの色はほぼすべてのタイプの色覚異常で区別できます。ウェブサイトやアプリケーションのカラーパレットの構築は、通常、主要なブランドカラーから始まります。そのベースから、色相、明度、補色の完全なパレットを派生させます。HSL では、シェードを作ることは Hue と Saturation を一定に保ちながら Lightness を下げることを意味します。ティントを作ることは Lightness を上げることを意味します。補色を作ることは Hue に180度を加えることを意味します。類似色はベース Hue の30度以内です。三色配色は120度離れています。分割補色はベースから150度と210度です。これらの色彩理論の関係は HSL では計算が容易で、RGB や16進では煩雑です。デザイントークンと CSS カスタムプロパティ（変数）は、コードベースで色を管理するモダンな方法です。色を一度 CSS カスタムプロパティとして定義します：--color-primary: hsl(220, 90%, 56%); --color-primary-light: hsl(220, 90%, 72%); --color-primary-dark: hsl(220, 90%, 40%)。スタイルシート全体でこれらの変数を参照します。主要な色を変更する必要があるとき、1つの値を更新します。Material Design や Tailwind CSS のようなデザインシステムは色をスケール（50、100、200 から900）に編成し、各 Hue の Lightness のバリエーションを表します。ダークモードは、単にすべてを反転するのとは異なる色へのアプローチを必要とします。ダークモードでは、背景は暗く（純黒ではなく、これはコントラストが強すぎ目の疲れを引き起こします）、テキストは明るく（同じ理由で純白ではありません）。異なる浮上レベルの表面はわずかに明るい背景色を使います。ブランドカラーは多くの場合、暗い背景上で厳しく見えずに読みやすさを維持するために、ダークモードでは彩度を下げ Lightness を上げる必要があります。CSS カスタムプロパティを使ったよく設計されたカラーシステムは、ルートレベルで変数値を変更することで明色と暗色のパレットを切り替えられます。 sRGB を超える色空間はモダンなディスプレイにとって重要になりつつあります。標準の16進と RGB 値で使われる sRGB 色空間は可視色の約35% しかカバーしません。Apple デバイスと多くのモダンなモニターで使われる Display P3 は約45% をカバーします。HDR テレビで使われる Rec. 2020 は約75% をカバーします。新しい CSS の color-mix()、color()、oklch() 関数はこれらのより広い色域にアクセスできます。color(display-p3 1 0 0) として指定された色は、P3 をサポートするディスプレイで #FF0000 より鮮やかな赤を生成します。広色域ディスプレイが標準になるにつれ、sRGB を超える色空間の理解は鮮やかな視覚体験を届けるためにますます重要になります。 JavaScript でのプログラム的な色の変換は単純な数学を使います。16進から RGB への変換：parseInt(hex.substring(1,3), 16) が赤チャンネルを与え、緑と青も同様です。RGB から HSL への変換：R、G、B を0〜1の範囲に正規化し、最大値と最小値を計算し、Lightness を (max+min)/2、Saturation を最大値と最小値の差から、Hue をどのチャンネルが最大かから導出します。これらの公式はよく文書化され、すべての色操作ライブラリ（JavaScript の chroma.js、color、tinycolor2、Python の colour、Rust の palette）で実装されています。グラデーションは複数のカラーコードを使います。CSS の線形グラデーションは色の間を遷移します：background: linear-gradient(to right, #FF0000, #0000FF) は赤から青へのグラデーションを作ります。RGB のグラデーションは、RGB 空間での2つの色の間の直線が不飽和の領域を通過する可能性があるため、泥っぽい中間色を生成できます。HSL や oklch のグラデーションはカラーホイールに従うため、より鮮やかな遷移をしばしば生成します。in oklch を使ったモダンな CSS のグラデーション補間は知覚的に滑らかな遷移を生成します：background: linear-gradient(in oklch, #FF0000, #0000FF)。これは補色間のグラデーションで顕著な改善です。 WebRecast のカラー変換ツールは、任意のサポートされたフォーマットで入力を受け付け、他のすべてのフォーマットでの等価な値を即座に示します。16進コードを入力して RGB、HSL、HSV、CMYK 値を見ます。HSL 値を入力して16進と RGB の等価な値を得ます。これにより手動の変換計算がなくなり、デザインツール（HSV を示す場合がある）と CSS（16進、RGB、または HSL を使う）の間で変換するときのエラーが減ります。変換ツールはまた色の視覚プレビューも表示し、意図に一致することを確認できます。データビジュアライゼーションの色は特別な注意を必要とします。チャート、グラフ、マップは互いに区別でき、閲覧者にとって意味があり、色覚異常の人にアクセシブルな色を使わなければなりません。順次カラースケール（1つの Hue の明から暗まで）は温度や人口密度のような連続データに適しています。分岐カラースケール（中立の中間点で出会う2つの Hue）は利益/損失や平均からの偏差のように意味のある中心点を持つデータに適しています。カテゴリカルカラースケール（異なる Hue）は製品カテゴリのような名義データに適しています。ColorBrewer のようなツールは異なるデータタイプとアクセシビリティ要件に最適化された研究に基づくパレットを提供します。デバイスをまたぐカラーマネージメントは継続的な課題です。同じ16進コードが、ディスプレイ技術、較正、明るさ、環境光の変動のため、異なる画面で異なって見えることがあります。sRGB はウェブの標準色空間で、ほとんどのディスプレイはそれに近づくよう較正されています。プロのデザイナーは色度計（ディスプレイ出力を測定するハードウェアデバイス）と ICC プロファイルを使ってモニターを較正します。ユーザーのディスプレイを制御できないウェブ開発では、わずかな色のレンダリングの違いが使いやすさや読みやすさに影響しないよう、十分なコントラストの余裕を持って設計しましょう。画像からの色抽出は、写真、ブランドアセット、インスピレーション画像に一致するパレットを作成するのに有用です。プロセスには k-means クラスタリング、メディアンカット、またはオクトリー量子化のようなアルゴリズムを使って支配的な色をサンプリングすることが含まれます。これらのアルゴリズムは類似のピクセルをグループ化し、最も代表的な色を特定します。Adobe Color、Coolors、各種 npm パッケージ（color-thief、vibrant.js）がこのプロセスを自動化します。ヒーロー画像から5〜8の支配的な色を抽出し、アクセントカラーとして使うことで、画像と UI 要素の間の視覚的一貫性が保証されます。色彩心理学は厳密な科学ではありませんが、知覚に文書化された効果がいくつかあります。赤は知覚される緊急性を高め、セール告知やエラー状態に一般的に使われます。青は信頼と専門性を伝え、金融機関やソーシャルメディアプラットフォームが好む理由です。緑は成功、安全、環境テーマを示します。オレンジは行動と関連し、コールトゥアクションボタンに一般的に使われます。黄は注意を引き、警告に適しています。これらの連想は文化的に影響されます：一部の東アジア文化では白が喪を表し、中国文化では赤が幸運と繁栄を意味します。配色を選ぶとき、対象とするオーディエンスの文化的コンテキストを考慮しましょう。カラーコードを扱うための実用的なヒント：CSS で16進コードを書くときは常にハッシュ記号（#）を含めましょう、必須の構文だからです。一貫性のために小文字の16進桁を使いましょう（#FF0000 より #ff0000）、これはほとんどの CSS ミニファイアやフォーマッターが使う慣習でもあります。プログラム的に色のバリエーションを作る必要があるときは、CSS で HSL を好みましょう。要素全体や子を含む opacity CSS プロパティの代わりに、透過には8桁16進または rgba/hsla を使いましょう。ブランドカラーをデザイントークンとして保存し、個々のコンポーネントで色値をハードコードするのではなく、プロジェクト全体で一貫して参照しましょう。デザインチームと色を伝えるとき、画面の較正の違いからの曖昧さを避けるため、16進コードと視覚的な見本の両方を含めましょう。

よくある質問

通常のカラーコンバータとどう違いますか？

複数の色を一度に変換したい開発者向けに設計され、コードに使いやすい出力形式を採用しています。

対応しているカラーフォーマットは？

HEX（#RRGGBB）、RGB(r,g,b)、HSL(h,s%,l%)、RGBA、HSLA のすべてに対応しています。