カラー変換(HEX・RGB・HSL)

HEX・RGB・HSL・HSVの間で色を変換します。1行に1色、3桁HEXやrgb()・hsl()にも対応し、色見本をクリックするとHEX値をコピーできます。

🌍 世界中で利用可能 🔒 プライバシー重視 ⚡ 即時変換 💯 無制限
Advertisement

HEX、RGB、HSL、HSVの間で双方向に色を変換します。3桁の短縮HEXやrgb()、hsl()の値も含め、1行に1色を貼り付けると、すべての表現を一度に取得できます。色見本をクリックするとHEXコードをコピーできます。

デザインツールがHSLで出力するのに引き継いだCSSがHEXを使っているとき、canvasやAndroidのリソースファイル用にRGBの3つの値が必要なとき、ブランドのパレットを確認して色合いの関係を見たいときなどに役立ちます。変換は標準のCSSの計算式に従い、alpha値を指定した場合はそれが保持されます。

HEX、RGB、HSL、HSVの間で色を変換する方法

1

対応している形式で1行に1色ずつ入力します

2

変換されたHEX、RGB、HSL、HSVの値を確認します

3

色見本をクリックしてHEXコードをコピーします

よくある質問

入力として受け付ける形式は?

HEX(#1a2b3cまたは#abc)、rgb(26, 43, 60)、rgba(...)、hsl(210, 40%, 17%)、hsla(...)を1行に1つずつです。関数名の大文字と小文字はどちらでも構いません。

複数の色を一度に変換できますか?

はい。パレット全体を1行に1色ずつ貼り付ければ、各行が独立して変換されます。

結果はどうやってコピーしますか?

任意の色見本をクリックすると、そのHEX値がクリップボードにコピーされます。テキスト出力も通常のテキストと同様に選択してコピーできます。

結果はCSSの色関数と完全に一致しますか?

はい、標準のsRGBの計算式を使用しており、HSL/HSVの値は読みやすさのために丸めています。丸めによってチャンネルが1単位ずれることがありますが、実際の見た目では分かりません。

透明度も扱えますか?

rgba()やhsla()で入力したalpha値は、alpha付きの8桁の値としてHEX出力に保持されます。

サーバーに何か送信されますか?

いいえ、変換はお使いのブラウザ内で行われる純粋な計算だけです。

どの色形式の間で変換できますか?

HEX、RGB、HSL、HSVです。CSSやデザインツール、コードで使われる形式です。CMYKは印刷の色空間であり、画面の値から正確に導き出すことはできないため、CMYKの数値は契約ではなくおおよその目安として扱ってください。

コントラストのチェックでは何が分かりますか?

文字と背景の組み合わせがWCAGの最低コントラスト比を満たしているかどうかです。通常の文字は4.5:1、大きな文字は3:1です。アクセシビリティ審査に通るか落ちるかの分かれ目は、しばしばここにあります。

同じ色がほかでは違って見えるのはなぜですか?

画面は色域、明るさ、キャリブレーションがそれぞれ異なります。WebではsRGBを前提にするのが安全で、その範囲外で定義された色は、一般的なディスプレイでは近い色にクリップされて表示されることがあります。

色のデータはどこかへ送信されますか?

いいえ、変換はブラウザ内で行われます。

Advertisement

概要

入力テキスト
複数ファイルいいえ
実行場所ブラウザ内で実行 - ファイルはアップロードされません
オフラインでも動作はい — ページを読み込んだ後
料金無料・登録不要・透かしなし

変換が静かに壊れるところ

変換のバグの多くは構文ではなく意味の問題です。郵便番号のCSV列は、表計算ソフトが数値だと推測した瞬間に先頭のゼロを失います。長いIDは浮動小数点の精度を超えてしまいます。日付は、日が先か月が先かによって意味が変わります。JSONのキーには順序がありませんが、配列にはあります。キーを並べ替えるツールは何も変えませんが、配列を並べ替えるツールはデータを変えてしまいます。Unicodeも落とし穴です。テキストはUTF-8やUTF-16、あるいはBOM付きで届くことがあり、推測を誤ったデコーダーはアクセント付きの文字を文字化けに変えてしまいます。変換を信用する前に、最初と最後の行、先頭にゼロがあるフィールド、引用符・カンマ・改行を含むフィールドを抜き取り検査してください。

データ形式の選び方

JSONは、APIが返すものやプログラムが読み取るものの既定の選択です。入れ子構造、数値、真偽値、nullを自然に扱え、どの言語でもパースできます。CSVはより小さく、表計算ソフトでそのまま開けますが、入れ子を表現する方法がなく、区切り文字、引用符、文字コードに関する共通規格もありません。変換がうまくいかないのはまさにこの点です。XMLは冗長ですが、属性、混在コンテンツ、スキーマを扱えるため、文書形式や既存の連携では今も主流です。YAMLは設定ファイルにとって最も読みやすい形式ですが、空白に敏感で、型の自動変換が意外な結果を生みます(「no」がfalseになったり、1.10のようなバージョンが1.1になったりします)。見た目が最もよいものではなく、利用する側のツールが好む形式を選んでください。