無料HEX RGB変換ツール - カラーコード変換とカラーピッカー

HEXをRGBに変換する仕組み

このツールはHEXカラーコードを読み取り、同じ色をRGB、HSL、CMYK、8桁のHEX/RGBA値として同時に表示します。ライブのカラープレビュー、コントラストプレビュー、知覚輝度も一緒に確認できます。コードを入力または貼り付けるか、カラーピッカーで選ぶと、すべての形式が同時に更新されます。

変換のしくみ

6桁のHEXコードは、赤・緑・青それぞれについて00からFF(10進数で0から255)までの16進数からなる2桁のペア3つに分かれます。3桁の省略形では各桁がまず2回繰り返されるため、#48Eはまず#4488EEになってから同じ分割が行われます。このRGBの組から、HSLは最も明るいチャンネルと最も暗いチャンネルの平均で明度を、その差で彩度を、チャンネルの順序で色相を求めます。CMYKは参考値として、3チャンネルのうち最大のものからKを求め、それを基準にシアン・マゼンタ・イエローを調整して計算します。知覚輝度はITU-R BT.601の重み付けを使い、R×299 + G×587 + B×114を1000で割った値で、128を超えると明るい、それ以下だと暗いと表示され、この値がコントラストプレビューの文字色も決めます。同じ入力欄はHEXの代わりにrgb(r, g, b)形式の文字列を直接入力しても認識し、カラーピッカーで選ぶたびにHEX欄も自動的に更新されます。 コードを解析できない場合、ツールは色を推測する代わりに入力欄のすぐ下にエラーメッセージを表示します。 変換された各値には専用のコピーボタンがあり、クリックすると一瞬チェックマークに変わるため、RGB、CMYK、CSSの行のうち必要なものだけを他に触れずにコピーできます。

計算例

#4C6EF5を例にします。ペアを分けるとR=76、G=110、B=245となり、RGB(76, 110, 245)です。最も明るいチャンネルと最も暗いチャンネルの平均は明度63%、その差は彩度89%、色相は228度で、まとめるとHSL(228, 89%, 63%)になります。同じRGB値をCMYKの式に入れるとcmyk(69%, 55%, 0%, 4%)になります。8桁形式は#4C6EF5FF、CSSの行はcolor: #4C6EF5;です。輝度は255段階中115で、128の基準を下回るため、ツールはこの色を暗いと表示し、コントラストプレビューでは白い文字に切り替わります。

出力例

Input:  #4C6EF5

Output: {
  "rgb":  "rgb(76, 110, 245)",
  "hsl":  "hsl(228, 89%, 63%)",
  "cmyk": "cmyk(69%, 55%, 0%, 4%)",
  "hex8": "#4C6EF5FF",
  "css":  "color: #4C6EF5;"
}