カラー変換

どんな色でも HEX・RGB・HSL・HSV・CMYK の間で自在に変換できます。色を選ぶか、好きな形式で値を入力すれば、ほかのすべての表記がブラウザ上で即座に更新されます。

#f5530c

クリックするとカラーピッカーが開きます

カラー形式

HEX

RGB

HSL

HSV

hsv(18, 95%, 96%)

CMYK

cmyk(0%, 66%, 95%, 4%)

カラー変換の使い方

1
色を選ぶか貼り付ける
スウォッチをクリックしてカラーピッカーを開くか、HEX・RGB・HSL のいずれかの入力欄に値を貼り付けます。どの色を選んでも、ツール全体がその色に追従します。
2
好きな形式で編集する
HEX・RGB・HSL の入力欄に直接入力します。値を変更した瞬間に、HSV と CMYK を含むほかのすべての表記が再計算されます。
3
すべての表記を確認する
同じ色を5通りの表記で一度に確認できるので、別のツールを使わなくても CSS・印刷・画像編集ソフトをまたいでデザインの色を合わせられます。

4
必要な値をコピーする
各値の横にあるコピーボタンを押すとクリップボードに入り、スタイルシートやデザインファイルにそのまま貼り付けられます。

カラー形式の実践ガイド

同じ色でも、表記はさまざま

HEX・RGB・HSL・HSV・CMYK は、別々の色ではありません。画面上の作業においては、これらはすべて色空間内の同じ一点を書き表す、異なる方法にすぎません。純粋な赤は #ff0000 とも rgb(255, 0, 0) とも hsl(0, 100%, 50%) とも書けますが、3つとも見た目はまったく同じに表示されます。どの表記を選ぶかは、目の前のタスクにとってどれが一番考えやすいかという問題であり、だからこそ複数の表記を並べて表示する変換ツールは実際に時間を節約してくれます。手作業で計算するのではなく、お使いのツールに合った形式を選んでコピーするだけで済みます。

唯一の例外が CMYK です。これは光ではなくインクを対象とするため、ほかの形式に完全には対応づけられません。この点は心に留めておく価値があり、後ほどあらためて取り上げます。

HEX と RGB は同じ数値

RGB は色を、赤・緑・青の3つのチャンネルとして表し、それぞれ 0 から 255 までの範囲を光として混ぜ合わせます。HEX は単に、その同じ3つの数値を16進数で書いたもので、チャンネルごとに16進2桁を使います。つまり #f5530c では、f5 が赤チャンネルで 245、53 が緑で 83、0c が青で 12 となり、ちょうど rgb(245, 83, 12) になります。1バイトは 0 から 255 までの値を保持するため、各チャンネルにはちょうど16進2桁が必要で、両者の変換は損失がなく直接的です。

短縮形 HEX は便宜的なものです。3桁のコードは各桁を2倍にするので、#f50 は #ff5500 に展開されます。このツールはブラウザと同じように短縮形を読み取り、先頭のハッシュ記号を付けても付けなくても、大文字でも小文字でもコードを受け付けます。

アルファ：RGBA と HSLA

アルファチャンネルを加えると、色は部分的に透明になります。RGBA と HSLA は4つ目の値、つまり完全な透明を表す 0 から完全な不透明を表す 1 までの不透明度を末尾に付け足します。したがって rgba(245, 83, 12, 0.5) は、同じオレンジを半分の不透明度にしたものです。最近の CSS は8桁の HEX にも対応しており、末尾の2桁がアルファを1バイトとして符号化します。そのため半分のアルファは、おおよそ色の末尾に付けた16進ペアの 80 に相当します。

アルファは、色をその背後にあるものと混ぜ合わせることを可能にします。これはオーバーレイ、スクリム、やわらかな影、すりガラス風の効果に欠かせません。透明とは、最終的な見た目があなたの色とその下の層との混色になることを意味するため、同じアルファでも背景が違えば違って見える点を覚えておいてください。

HSL のほうが調整しやすい理由

HSL は、人が色について考えるのと同じように色を表します。色相（Hue）はカラーホイール上の 0 から 360 度までの位置、彩度（Saturation）は色の鮮やかさをパーセントで、輝度（Lightness）は色の明るさをパーセントで表します。この構造のおかげで、手作業での調整が直感的になります。同じ色の暗い色合いを得るには、色相と彩度はそのままにして輝度を下げればよく、色をくすませるには彩度を下げます。同じことを生の RGB で行うには3つのチャンネルをそろえて変える必要があり、目分量での調整ははるかに困難です。

これこそが、カラーシステムを構築するうえで HSL が威力を発揮する理由です。基準色よりほんの少し暗いホバー状態がほしい、あるいは色相は同じで輝度だけ段階的に変わるスウォッチの並びがほしい、といった場合は HSL の数値を1つ動かすだけで済みます。HSB とも書かれる HSV は密接に関連していますが、色相と彩度に輝度ではなく明度（Value）、つまり明るさを組み合わせます。これは多くの画像編集ソフトやカラーピッカーが採用しているモデルなので、両方を読めることはデザインツールをまたいで使いこなす助けになります。

実例：白、黒、そして中間色

両端の値はすっきりしています。白は #ffffff で、これは rgb(255, 255, 255)、hsl(0, 0%, 100%) にあたります。全チャンネルが最大、HSL の言葉で言えば彩度がなく輝度が最大なので色相は無関係です。黒は #000000、rgb(0, 0, 0)、hsl(0, 0%, 0%) で、すべてがゼロです。中間のグレーはちょうど真ん中、#808080 や rgb(128, 128, 128) のあたりに位置し、HSL では hsl(0, 0%, 50%) となります。これは、どんな中間色も彩度がゼロで、輝度がその明るさに連動することをうまく示しています。

では実際の色を見てみましょう。同じあのオレンジ #f5530c は、rgb(245, 83, 12) として、またおおよそ hsl(18, 92%, 50%) として読み取れます。HSL の形は、それが赤橙に近い暖色で、彩度が高く、輝度が中程度であることを一目で伝えてくれます。これは HEX の文字列が隠してしまう情報です。これらのいずれかをツールに貼り付けて、ほかの値が即座に埋まる様子を確かめてみてください。

CMYK と、画面から印刷への限界

CMYK はシアン（Cyan）、マゼンタ（Magenta）、イエロー（Yellow）、そしてキー（Key、黒のこと）を表し、画面上の光ではなく紙の上のインクのために作られた減法混色モデルです。紙が反射する光を差し引くことで成り立つため、光るディスプレイが再現できるすべての鮮やかな色を再現できるわけではなく、画面上では鮮烈な青や緑が、印刷ではしばしばくすんで出てきます。このツールが示す CMYK 値は RGB から数学的にそのまま変換したもので、出発点としては本当に役立ちますが、カラーマネジメントを行った印刷ワークフローの代わりにはなりません。

色が重要な印刷では、デバイス・用紙・インクのすべてが結果を左右するため、必ずお使いのプリンターの実際の ICC プロファイルと校正刷りで確認してください。ここでの CMYK 出力は、保証ではなく手早い見積もりだと考えてください。

名前付きの色と、広色域への飛躍

CSS には約150の名前付きの色も用意されています。tomato、rebeccapurple、slategray といった語で、それぞれが特定の16進値の別名にすぎません。手早いプロトタイピングや覚えやすい色合いには便利ですが、本格的なデザインシステムでは明示的な16進値や HSL 値のほうが、より細かな制御と一貫性を与えてくれます。名前付きの色は、別の色空間ではなく便利なラベルなのです。

先を見据えると、より新しい CSS のカラー関数は、これらの形式が前提とする従来の sRGB 色域を超えていきます。知覚的に均一な oklch や、より広い display-p3 といった色空間のための関数は、HEX や RGB が到達できるよりも鮮やかな色を表現でき、最近のディスプレイが高性能になるにつれてこの点が重要になります。このツールが扱う HEX・RGB・HSL・HSV の各値は、これからもウェブの日常的な通貨であり続け、それらを理解することが、こうした新しい色空間を自信を持って取り入れるための土台になります。

よくある質問

HEX カラーを RGB に変換するには?

#f5530c のような HEX コードを HEX の入力欄に貼り付けます。すると、そのすぐ下に RGB 値（この例では rgb(245, 83, 12)）が HSL・HSV・CMYK とともに即座に表示されます。HEX と RGB は同じ8ビットの色チャンネルを表すため、変換は正確です。

HSL と HSV の違いは何ですか?

どちらも色を色相で表しますが、HSL はそこに彩度（Saturation）と輝度（Lightness）を組み合わせるのに対し、HSV（HSB とも呼ばれます）は彩度と明度（Value）、つまり明るさを使います。HSL は CSS でよく使われ、HSV は多くの画像編集ソフトやカラーピッカーで見られます。このツールは両方を同時に表示するので、手作業で計算しなくてもデザインツール間を行き来できます。

3桁の短縮形 HEX にも対応していますか?

はい。#f50 のような短縮コードは、ブラウザが展開するのと同じように #ff5500 として読み取られます。HEX は先頭のハッシュ記号（#）を付けても付けなくてもよく、大文字でも小文字でも入力できます。

CMYK は何に使いますか?

CMYK は、シアン（Cyan）、マゼンタ（Magenta）、イエロー（Yellow）、そして黒を表すキー（Key）のことで、印刷で使われるインクモデルです。ここに表示される値は RGB から数学的にそのまま変換したものです。画面とインクでは色の再現方法が異なるため、色が重要な印刷作業では、必ずお使いのプリンターの固有プロファイルと照らし合わせて確認してください。

入力したデータはサーバーにアップロードされますか?

いいえ。すべての変換はブラウザ内だけで実行されます。入力した内容がアップロード・記録・保存されることはないため、作業内容は完全にプライベートに保たれ、このツールはオフラインでも動作し続けます。