カラーコードのHEXとRGBとHSLの違いは？

どれも同じ色の別表記です。HEXは短く貼りやすく、RGBは光の三原色そのまま、HSLは色みを保ったまま明るさを調整しやすい形式です。

カラーコード変換はCMYKに対応している？

していません。CMYKは色の作り方が根本的に異なり、正確な変換には印刷プロファイルが必要なためです。

CSSでは必須です。このツールは有無どちらでも読み取り、出力には付けて表示します。

#FF5D47

色を選ぶ HEX（16進数）

R（赤）0〜255 G（緑）0〜255 B（青）0〜255

明るさのバリエーション（クリックで選択）

補色・関連色（クリックで選択）

Webで色を指定する方法は主に3つあります。どれも同じ色を別の書き方で表しているだけなので、用途に応じて使い分けます。

#FF5D47なら、FF＝赤255、5D＝緑93、47＝青71。16進数なので00（0）からFF（255）までの値をとります。#FFFは#FFFFFFの省略形で、白を表します。

赤・緑・青の光を重ねるほど明るくなり、3つとも最大にすると白になります。絵の具（減法混色）とは逆なので、混ぜた結果の予想を裏切ることがあります。

H（色相）は0〜360度の色の輪、S（彩度）は鮮やかさ、L（明度）は明るさ。「同じ色のまま少し暗くしたい」ときはLだけ下げればよいので、配色を組むときに便利です。

HSLの色相（H）に180を足すと補色になります。もっとも目立つ組み合わせですが、強すぎるので面積を小さくして差し色に使うのがコツです。上の「補色・関連色」で自動生成しています。

ベースの色から明るい版・暗い版を作って濃淡で組み立てると、まとまりのある配色になります。上の「明るさのバリエーション」がそのまま使えます。

読みやすさは色の派手さではなく明暗の差で決まります。目安として、輝度が高い（明るい）背景には濃い文字色、暗い背景には白系の文字色を合わせてください。上の「明るさ（輝度）」が判断の材料になります。

ベース70%・メイン25%・アクセント5%が基本の比率とされています。色数を絞るほど、まとまって見えます。

していません。CMYK（印刷用のインク量）はRGBと色の作り方が根本的に違い、正確な変換には印刷条件ごとのプロファイルが必要になるためです。印刷物ではデザインソフト側で変換してください。

CSSでは必須です。このツールは「#」の有無どちらでも読み取り、出力には付けて表示します。3桁の省略形（#F00）にも対応しています。

このツールは不透明な色のみを扱います。透明度が必要な場合は、出力されたRGB値に透明度を足して rgba(255, 93, 71, 0.5) のように書いてください。

「色を選ぶ」のカラーピッカーを開くと、対応ブラウザではスポイト機能が使えます（Chrome・Edgeなど）。取得した色のコードがそのまま3形式で表示されます。

カラーコードをHEX（#FF5D47）・RGB・HSLで相互に変換できる無料ツールです。色を選ぶかコードを入れるだけで3形式を同時表示し、明るい/暗いバリエーションや補色も自動生成。Webデザインや資料作成の色指定に。

画像・動画・ITのツール

そのほかのツール