クラシックツール

HEX RGB HSL カラージェネレーター

色を作成し、HEX RGB HSL を相互変換しながら、コントラストや補色、派生パレットをすぐ確認できます。

  • HEX
  • RGB

この HEX RGB HSL カラージェネレーターは、配色をすばやく試し、形式を即変換し、今の色が UI、ブランディング、サムネイル、ボタン、スライド、コンテンツ画像に合うかを判断したいときに便利です。単独のコードだけを見るのではなく、基準色、補色、暗めのトーン、明るめのトーンを同じ画面で比べられます。

16進コードから始めても、RGB チャンネルを微調整しても、HSL の色相、彩度、明度から感覚的に詰めても使えます。すでに狙う色がある場合にも、より読みやすい色ややわらかい色、強い印象の色を探したい場合にも相性が良いツールです。

さらに、その背景の上では明るい文字と暗い文字のどちらが読みやすいかも目安として表示します。デザイナー、制作者、開発者、SNS担当、ショップ運営者など、色決めを素早く進めたい場面で使いやすい構成です。

RGB 調整
HSL 調整

カラーピッカー、HEX 入力、RGB/HSL 調整を使って、補色とコントラスト付きの簡単な配色を作れます。

#2F7DE1
カラー要約#2F7DE1 は rgb(47, 125, 225) と hsl(214, 74%, 53%) に対応します。
HEX#2F7DE1
RGBrgb(47, 125, 225)
HSLhsl(214, 74%, 53%)
補色#E1932F
読みやすい文字色この背景には明るい文字色のほうが合わせやすいです。
深いトーン#0F3869
暗いトーン#1B5BB0
基準色#2F7DE1
明るいトーン#70A7EC
補色#E1932F

入力を明確にすると、より役立つ結果になります。