カラーコード変換
HEX・RGB・HSLを相互に変換し、色を確認しながらコピーできます。
#8C9EF8rgb(140, 158, 248)hsl(230, 88.525%, 76.078%)ユーザーの評価
まだレビューはありません。このツールを使ったことがあれば、最初のレビューを書いてください。
カラーコード変換の詳しい使い方ガイド
使い方と例を確認し、知りたいことはトピックから探せます。
はじめに確認すること
- 対応する形式
- 不透明な色の HEX・RGB・HSL を相互に変換します。
- HEX
- # 記号の有無にかかわらず、3桁・6桁の16進数のコードを入力します。
- RGB
- R・G・B の各値を0~255の整数で入力します。
- HSL
- 色相0~360、彩度・明度0~100%に対応します。結果は小数点以下3桁まで表示します。
- 結果
- 色のプレビューと3種類のコード、形式ごとのコピーを提供します。画像から色を抽出することはしません。
カラーコード変換の使い方
お持ちのコードの形式を選びます
HEX・RGB・HSL のうち、入力したい表記を選択してください。カラーピッカーで色を選ぶこともできます。透明度を含む RGBA・HSLA・8桁の HEX は、対応範囲外です。
値を入力して、プレビューを確認します
HEX には16進数のコード、RGB には3つのチャンネル、HSL には色相・彩度・明度を入れます。プレビューが意図した色か確認すると、コピーしたコードの形式を間違って選んでいないかを見つけやすくなります。
必要な形式の結果を読みます
HEX は大文字6桁で、RGB と HSL は各形式の文字列で表示されます。RGB のチャンネルは整数で扱うため、HSL の値を行き来して変換すると、丸めによる小さな差が生じることがあります。
コードをコピーして、実際の作業に適用します
必要な形式のコピーボタンを使います。画面に適用したら、周囲の背景とあわせて確認してください。このツールはカラーコードの変換を提供するもので、文字と背景のアクセシビリティのコントラストチェックは行いません。
こんな作業に使えます
HEX と RGB のカラーコードを変換
HEX は3桁または6桁で入力できます。#FFF は #FFFFFF に展開され、RGB では各チャンネルを0~255の整数で入力します。たとえば #FF0000 は rgb(255, 0, 0) に相当します。色のプレビューと変換したコードをあわせて確認してください。
HSL で色相・彩度・明度を確認
HSL は、色相を0~360、彩度と明度を0~100%で入力します。結果の HSL は小数点以下3桁まで表示します。HEX や RGB の整数チャンネルに変換する過程で丸められるため、複数の形式を行き来すると、小数が少し変わることがあります。
例で結果を確かめる
赤を3つの形式で表す
#FF0000#FF0000
rgb(255, 0, 0)
hsl(0, 100%, 50%)短い HEX コードの展開
#0F8#00FF88
rgb(0, 255, 136)
hsl(152, 100%, 50%)HEX・RGB・HSL の選ぶ基準
表を左右にスクロールすると続きが見られます。
| 形式 | 表現の方式 | 活用 |
|---|---|---|
| HEX | 赤・緑・青のチャンネルを16進数で表示 | 短いカラーコードをデザインやウェブの作業に移すとき |
| RGB | 3つのチャンネルを0~255の数で表示 | 各チャンネルの値を直接確認したり、ほかのツールと合わせたりするとき |
| HSL | 色相・彩度・明度で表示 | 色の系統と鮮やかさ・明るさを区別して調整するとき |
結果が思ったとおりにならないとき
HEX を入れたらエラーになります
3桁または6桁か、0~9・A~F 以外の文字がないかを確認してください。透明度を含む4桁・8桁の HEX には対応していません。デザインツールから、不透明な RGB のカラーコードを取り込んで使ってください。
HSL に戻すと小数が変わります
HSL を RGB の整数チャンネルに変える過程で、丸めが生じることがあります。もう一度 HSL に計算すると、元の小数と少し変わることがあるので、基準にする元のコードもあわせて保管してください。
印刷した色が画面と違います
このツールは、画面で使う RGB 系の値を変換します。CMYK への変換や印刷プロファイルの適用は行いません。印刷結果を合わせる必要がある場合は、印刷の作業環境で別途調整してください。
知っておきたい用語
- 色相
- HSL で、色の系統を円上の角度で表した値です。
- 彩度
- HSL で、灰色に近いか鮮やかな色かを表す値です。
- アルファ
- 色の透明度を表す値です。このツールは、アルファを変換しません。
カラーコード変換のよくある質問
RGBA や透明度のある HEX にも対応していますか?
現在は、不透明な色の HEX・RGB・HSL のみ対応しています。RGBA、HSLA、4桁・8桁の HEX のアルファ値には対応していません。
画像から色を抽出できますか?
このツールでは、自分で選んだ色や入力したコードだけを変換します。画像をアップロードして色を抽出したり、パレットを自動生成したりする機能は提供していません。
CMYK の印刷色に変換できますか?
現在、CMYK への変換は提供していません。画面の RGB 系の値と実際の印刷色は、機器やカラープロファイルによって異なることがあります。
複数のカラーコードを一度に変換できますか?
現在は、一度に1色ずつ変換します。複数行の色のリストやファイルを一度に処理する機能は提供していません。
明度を上げると、文字が読みやすいかもわかりますか?
色のプレビューで確認できますが、コントラスト比やアクセシビリティの等級は計算しません。実際の背景と文字色の組み合わせは、別のコントラストチェックで確認してください。