HEXからRGBへのコンバーター
カラーピッカー・コンバーターのプリセット
16進数のカラーコードをRGB値に変換します。#abcのような短縮形は#aabbccに正しく展開され、他のすべての形式も並べて表示されるため、コードに必要なものを取り出せます。
- ファイルは端末の外に出ません
- 無料、登録不要
- 透かしなし
- 一度読み込めばオフラインでも動作します
カラーピッカー・コンバーターの使い方
- 1
色を選ぶ
カラースウォッチを使うか、HEXまたはRGB値を直接入力します。
- 2
どの形式もコピー
HEX、RGB、HSL、HSV、CMYKがすべて同時に表示されます。
- 3
コントラストをチェック
背景色を設定してテキストがWCAG AAとAAAに合格するか確認します。
短縮16進数コードが存在する理由と展開のされ方
CSSとデザインツールはどちらも、各チャンネルがたまたま繰り返す数字を使う色を書くコンパクトな方法として、3文字の短縮16進表記 — `#abc` — をサポートしており、これは各文字を複製することで展開されます。ゼロを埋めるのではありません: `#abc`は`#0a0b0c`ではなく`#aabbcc`になります。この区別が重要なのは、2つの可能な展開が本当に異なる色を生成するためであり、手動で逆方向に変換する際にはよくある簡単な間違いです — ゼロを埋めるのではなく各桁を正しく複製することこそが、適切な変換が正しく行わなければならないことです。
異なるツールでRGB値を正しく読む
RGB値は慣習的に赤、緑、青それぞれ0から255の3つの数値として書かれますが、正確な表記は貼り付ける場所によって異なります — CSSはカンマ付きの`rgb(171, 187, 204)`を受け付け、一部のデザイン・イラストツールはカンマなしでスペース区切りの同じ3つの数値を期待し、いくつかの文脈では各チャンネルを0から255の整数ではなく0から1の分数として表現します。ここで値を分解して見ることで、目的のツールやコードベースがたまたま期待する特定の表記に手動で変換する必要がなくなります。
スクリーンショットやデザインファイルから抽出した値を素早く確認する方法
デザインツールのスポイト、ブランドスタイルガイド、あるいはスクリーンショットのカラーピッカーからコピーされた16進コードは、しばしば添付されたRGBの内訳なしで利用可能な唯一の値です — ここに貼り付けてRGB、HSL、CMYKの等価物を一緒に見ることは、各変換を個別に調べたり手で計算したりするより速いです。
よくある質問
HEX、RGB、HSLの違いは何ですか？
HEXとRGBは同じもの — 赤、緑、青をどれだけ混ぜるか — を異なる表記で表します。HSLは色相、彩度、輝度として再定式化し、これはずっと考えやすいです: 色を明るくするには3つを推測する代わりに1つの数値を変えるだけです。
コントラスト比は何を意味しますか？
2つの色の相対輝度を1（同一）から21（黒と白）のスケールで比較します。WCAGはAAレベルで通常のテキストに少なくとも4.5:1、大きなテキストに3:1を要求し、AAAでは7:1と4.5:1に上がります。
自分には問題なく見えるのに、なぜ私の色はコントラストに失敗するのですか？
比率は2つの色がどれだけ違って見えるかではなく、相対輝度から計算されるためです。輝度の似た2つの鮮やかな色 — たとえばオレンジと赤 — は違って見えますが輝度コントラストはほとんどありません。そしてこれは視力の弱い人や太陽の下の画面では読めなくなります。
CMYKへの変換は印刷用に正確ですか？
これは標準的な算術変換であり、カラーマネジメントされた結果というより出発点です。実際の印刷作業には特定の印刷機と用紙のためのICCプロファイルが必要です。CMYKは多くの鮮やかなRGB色をそもそも再現できないためです。