HEXカラー選択ツール 色の選択とコード変換
色を調整
カラーコード
コードを入力するか、必要な形式をコピーしてください。CMYK値は目安です。
コードの形式と値の範囲を確認してください。
文字のコントラスト
WCAG AAの最低コントラスト比
WCAG 2.2 · 1.4.3- 通常の文字
- 4.5:1
- 大きな文字
- 3:1
大きな文字は18pt以上、太字なら14pt以上です。日本語・中国語・韓国語のフォントでは相当する大きさを使用します。
最近使った色
色選択パネルやスライダーで選んだ色がここに表示されます。
HEXカラー選択・変換ツール
色を選ぶかコードを入力すると、HEX、RGB、RGBA、HSLA、HSVA、CMYKの値を確認できます。不透明度を調整し、白と黒の背景で文字の見え方を確認してから、必要な形式をコピーできます。
写真やロゴから色を拾うには画像カラー抽出ツールをご利用ください。Base64エンコードやURLエンコードも無料で使えます。
色の選択とコードのコピー
色選択パネルやスライダーで色を決めるか、入力欄に手元のコードを入力します。プレビューで確認し、必要な形式の横にあるボタンでコピーしてください。写真の色を使う場合は画像カラー抽出ツールが便利です。
CSSで使うカラーコードの選び方
HEXは、画面用の色を短いコードで管理したいときに便利です。不透明度も指定するなら、アルファ値を含むHEX、RGBA、HSLAを使えます。色相・彩度・明度を軸にテーマを調整する場合はHSL系が適しています。
画面と印刷でのブランドカラー管理
Webサイトやアプリのブランドカラーは、HEXやRGBで管理できます。このツールのCMYK値は入稿準備の目安です。最終的な色は印刷プロファイルと色校正で確認してください。
写真やロゴから色を取り込む
画像カラー抽出ツールで写真やロゴを開き、目的のピクセルを選びます。取得したHEXやRGBをこのページに貼り付ければ、不透明度を調整したり別の形式に変換したりできます。
文字と背景のコントラストを確認
WCAG AAの最低コントラスト比は、通常の文字で4.5:1、大きな文字で3:1です。このツールは白と黒の背景で文字の見え方を表示します。実際の画面では、使用する背景色との組み合わせも確認してください。
よくあるご質問
HEXはRGBの色を16進数で表す形式です。#RRGGBBでは、赤・緑・青を2桁ずつで表します。たとえば #FF0000 は赤です。8桁の #RRGGBBAA では末尾の2桁が不透明度を表します。 このツールでは、不透明度を含む8桁のHEXで表示します。
HEXとRGBは画面上の色を表します。RGBAには不透明度が加わります。HSLAとHSVAはいずれも色相と彩度を使い、HSLAでは明度、HSVAでは明るさ（Value）で色を調整します。CMYKは印刷に使う4色のインクの割合を表します。
インストールや会員登録は不要です。パソコン、タブレット、スマートフォンのブラウザーから無料で使えます。
必要な形式の横にあるコピーボタンを押します。コードがクリップボードに保存されるので、その形式に対応したツールに貼り付けられます。
画像カラー抽出ツールでファイルを開き、目的のピクセルを選びます。取得したHEXやRGBをここに貼り付けると、色を調整したり形式を変換したりできます。
CMYKの入力と変換に対応しています。印刷プロファイルを適用しない参考値なので、最終的な色は入稿先のプロファイルと色校正でご確認ください。