カラーコード変換
カラーコードを HEX・RGB・HSL で相互変換できる無料ツールです。 カラーピッカーと大きなプレビュー、読みやすい推奨文字色つき。Web制作やデザインの色指定に。データは送信されません。
#3D5AFE
- HEX
- RGB
- HSL
使い方
カラーピッカーで色を選ぶか、HEX・RGBの各欄に直接入力すると、他の表記が自動で更新されます。 各コードはクリックでコピーできます。
色の表し方
| HEX | #RRGGBB の16進数表記（Web/CSSで一般的） |
|---|---|
| RGB | 赤・緑・青を各0〜255で表す |
| HSL | 色相(0〜360°)・彩度・明度(各0〜100%)で表す。色の調整がしやすい |
よくある質問
HEX・RGB・HSLとは何ですか？
いずれも色の表し方です。HEXは #3d5afe のような16進数、RGBは赤・緑・青の各0〜255、HSLは色相(0〜360°)・彩度・明度(各0〜100%)で表します。同じ色を用途に応じて変換できます。
HEXからRGBへの変換方法は？
HEXの6桁を2桁ずつに分け、それぞれを16進数から10進数に変換します。例：#3d5afe は 3d=61, 5a=90, fe=254 なので rgb(61, 90, 254) です。当ツールは自動で相互変換します。
3桁の短縮HEX（#abc）にも対応していますか？
はい。#abc のような3桁表記は #aabbcc として解釈します。HEX欄に入力すると自動で認識します。
プレビューの文字色はどう決まっていますか？
背景色の明るさ（WCAGの相対輝度）から、黒文字と白文字のうち読みやすい方を自動で選んでいます。配色時のコントラストの目安になります。
関連ツール
単位の換算は 単位変換 もどうぞ。