HEX · RGB · HSL · HSV · CMYK
カラー変換
色#0060fdは、rgb(0, 96, 253)、hsl(217, 100%, 50%)、cmyk(100%, 62%, 0%, 1%)です。CSSの色を入力するかカラーピッカーを使うと、好きな色を変換できます。
- #0060fd = rgb(0, 96, 253)
- #0060fd = hsl(217, 100%, 50%)
- #0060fd = cmyk(100%, 62%, 0%, 1%)
- red = #ff0000
タイルは入力に合わせて更新されます。入力した文字列が色でない場合はエラーが表示され、最後に有効だった色が画面に残ります。
Scanned by 
NortonTM Safe Web
概要
- 価格
- 料金なし
- アカウント
- 不要
- アップロード
- 対象外 — 色を入力するだけで、何も送信されません
- 入力
- HEX（3、4、6、8桁）、rgb()、hsl()、hwb()、148種類のCSS色名、transparent
- 出力
- HEX、RGB、HSL、HSV、CMYK、最も近いCSS色名
- CMYK
- 数学的変換であり、印刷用プロファイルではありません
よく使う色を各モデルで表示
これらの行はコンバーターと同じコードで生成されています。HSL、HSV、CMYKは整数に丸めています。
| 入力 | HEX | RGB | HSL | HSV | CMYK |
|---|---|---|---|---|---|
| #0060fd | #0060fd | rgb(0, 96, 253) | hsl(217, 100%, 50%) | hsv(217, 100%, 99%) | cmyk(100%, 62%, 0%, 1%) |
| red | #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) | hsv(0, 100%, 100%) | cmyk(0%, 100%, 100%, 0%) |
| white | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) | hsv(0, 0%, 100%) | cmyk(0%, 0%, 0%, 0%) |
| black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) | hsv(0, 0%, 0%) | cmyk(0%, 0%, 0%, 100%) |
| grey | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) | hsv(0, 0%, 50%) | cmyk(0%, 0%, 0%, 50%) |
| transparent | #00000000 | rgba(0, 0, 0, 0) | hsla(0, 0%, 0%, 0) | hsv(0, 0%, 0%) | cmyk(0%, 0%, 0%, 100%) |
色を変換する手順
色を入力
3、4、6、8桁のHEXコード、rgb()、hsl()、hwb()の値、または148種類のCSS色名のいずれかを入力します。色のボックスをクリックして、ブラウザーのピッカーで色を選ぶこともできます。
他の表現を確認
見本は市松模様の上に表示されるので、透明度も確認できます。タイルには同じ色がHEX、RGB、HSL、HSV、CMYKで表示され、最も近いCSS色名も確認できます。
必要な値をコピー
タイルのコピーを押すとその値がクリップボードに入り、スタイルシート、デザインツール、文書にそのまま貼り付けられます。
カラーモデルの関係
RGBは、画面が加算する赤、緑、青の光の量としてそれぞれ0から255の値で色を表します。#0060fdは赤0、緑96、青253です。HEXは同じ3つの数を16進数で書いたもので、96は60、253はfdになります。HSLとHSVは、同じ色を色相環上の0から360度の色相角と、2つのパーセンテージ（彩度と、明度（HSL）または値（HSV））で表します。#0060fdの色相はどちらも217です。CMYKはインクを表し、白い紙からシアン、マゼンタ、イエロー、ブラックを引いていきます。
ここに表示されるCMYKは単純な数学的変換です。ブラックはR、G、Bの最大値を1から引いた値で、シアン、マゼンタ、イエローは残りの分です。印刷用プロファイルではないため、プリンターやICCプロファイルを使うデザインソフトでは、同じ色でも異なるCMYKの数値になります。HSLの値は整数で表示されるので、丸めた値を変換し直すとチャンネルが数単位ずれることがあります。hsl(217, 100%, 50%)は#0062ffで、#0060fdではありません。最も近いCSS色名は、L*a*b*空間でのCIE76色差が最も小さいキーワードです。すべての処理はブラウザー内で行われ、何も送信されません。
カラー変換の質問
HEXをRGBに変換するには？
6桁を2桁ずつ3組に分け、それぞれを16進数として読みます。#0060fdは00、60、fdで、これは0、96、253なので、色はrgb(0, 96, 253)です。HEXコードをフィールドに貼り付けると、RGBタイルに結果が表示されます。
8桁のHEXコードの最後の2桁は何を意味しますか？
アルファチャンネル、つまり不透明度で、00（完全な透明）からff（完全な不透明）までの値です。#0060fd80は同じ青の255分の128で、不透明度は約50.2%なので、rgba(0, 96, 253, 0.502)と表示されます。#06f8のような4桁のコードも同様で、各桁を2回ずつ重ねて読みます。
HSLとHSVの違いは何ですか？
どちらも色相と彩度を使いますが、3番目の値が異なります。HSLでは明度50%が純色、0%が黒、100%が白です。HSVでは値100%がその色の最も明るい状態で、白にするには彩度を0%にする必要があります。同じ青は、hsl(217, 100%, 50%)、hsv(217, 100%, 99%)です。
CMYKの結果を印刷に使えますか？
出発点としてのみ使ってください。このページはRGBとCMYKの間の単純な式を使っており、インク、用紙、プリンターのプロファイルは考慮されません。印刷所やカラープロファイルのあるデザインソフトでは、同じRGBの色でも異なるCMYKの数値に変換されます。
どの色の形式を入力できますか？
#の有無を問わない3、4、6、8桁のHEX、カンマまたはスペース区切りで数値またはパーセントを使い、スラッシュの後にアルファを付けられるrgb()とrgba()、角度をdeg、rad、grad、turnで指定するhsl()、hsla()、hwb()、rebeccapurpleのような148種類のCSS色名、そしてtransparentです。
最も近い色名が完全一致にならないのはなぜですか？
CSSの色名は148個しかないため、ほとんどの色には固有の名前がありません。ページはL*a*b*空間でのCIE76色差が最も小さい、最も近く見える色名を選びます。#0060fdの場合はmediumslateblueです。#ff0000のように色が名前付きの色と完全に一致する場合は、完全一致と表示されます。