カラーコード変換の使い方
HEXやRGBなどの色コードを入力するか、カラーピッカーで色を選びます。 自動変換されたHEX・RGB・RGBA・HSL・HSLAを確認します。
HEXやRGBなどの色コードを入力するか、カラーピッカーで色を選びます。 自動変換されたHEX・RGB・RGBA・HSL・HSLAを確認します。
COLOR PREVIEW
Color Preview
明るさ
—
推奨文字色
—
補色
—
VARIATION
このツールでできること
HEX・RGB・RGBA・HSL・HSLAのカラーコードをまとめて確認できる無料ツール。カラーピッカーやコード入力から各形式へ変換し、補色や明暗の配色も確認できます。
使い方
- HEXやRGBなどの色コードを入力するか、カラーピッカーで色を選びます。
- 自動変換されたHEX・RGB・RGBA・HSL・HSLAを確認します。
- 必要に応じて補色や明暗の配色も確認します。
- 使いたい色コードをコピーして利用します。
対応形式と注意点
入力形式が不正な場合は正しく変換できません。Web制作では使用先が要求する形式に合わせてコードを選んでください。
こんなときに便利
デザイン作業中の色指定、CSS記述、既存カラーの形式変換、配色検討に便利です。
同じ色でも表し方が違います
HEX・RGB・HSLなどは、色そのものを変えるのではなく、同じ色を別の形式で表したものです。使う場所に合わせて必要な形式へ読み替えられるため、CSSやデザインツール間で色を受け渡すときに役立ちます。
HEX・RGB
Web制作でよく使われる表記です。同じ色を16進数やRGBの数値で確認できます。
HSL
色相・鮮やかさ・明るさの組み合わせで色を表します。明るさ違いの色を考えるときにも見比べやすい形式です。
透明度を含む色の扱い
透明度はRGBAとHSLAに反映されます。透明度を下げても元の色そのものが薄くなるわけではなく、背景が透けて見える割合が変わります。HEX・RGB・HSLの表示には透明度を含めません。
明るさと補色の違い
「少し明るく」「少し暗く」は、元の色合いを保ちながら明るさを調整した色です。一方、補色は色相を反対側へ動かした色なので、同じ色の明暗バリエーションではありません。
文字色の表示は目安です
プレビューでは背景色に合わせて白または濃い文字色を表示しますが、これは明るさをもとにした簡易的な判断です。
アクセシビリティ判定とは別です：文字と背景の読みやすさを基準値で確認したい場合は、文字色コントラストチェックでコントラスト比を確認してください。
カラーコード変換のFAQ
HEXとRGBで色が変わることはありますか？
同じ色を正しく変換している場合、基本的には見た目の色は同じです。
透明度もHEXへ反映されますか？
このツールのHEX表示には透明度を含めません。透明度はRGBAまたはHSLAで確認できます。
補色なら文字も読みやすくなりますか？
いいえ。補色は色相の関係を示すもので、文字と背景の読みやすさを保証するものではありません。