カラープレビュー
クリックしてカラーピッカーを開く
#6b21a8
rgb(107, 33, 168)hsl(273, 67%, 39%)補色
↔
#94de57
クリックで補色に切替
カラーパレット（5段階のシェード）
コントラスト比チェック
白テキスト
8.72:1
AAA
黒テキスト
2.41:1
Fail
プリセット（Material Design）
カラーコード変換ツールとは
カラーコード変換ツールは、Web制作やデザインで頻繁に使われるHEX、RGB、HSLの3つの色表現形式を相互に変換するオンラインツールです。入力した値はリアルタイムで他の形式に変換され、カラープレビューで即座に色を確認できます。CSSのコーディングやデザインシステムの構築など、正確なカラーコードが必要な場面で役立ちます。
HEX・RGB・HSLの違い
HEX（16進数カラーコード）
#RRGGBBの形式で、各色をR（赤）、G（緑）、B（青）の16進数2桁で表現します。CSSで最も一般的に使われる形式です。例：#6b21a8
RGB（Red Green Blue）
赤・緑・青の光の三原色をそれぞれ0〜255の数値で指定します。ディスプレイの発色原理に基づいた表現方法です。例：rgb(107, 33, 168)
HSL（Hue Saturation Lightness）
色相（0〜360°）・彩度（0〜100%）・輝度（0〜100%）で色を指定します。人間の直感に近い表現方法で、色の調整が容易です。例：hsl(273, 67%, 39%)
Web制作での活用シーン
- CSSコーディング時のカラーコード指定やフォーマット変換
- デザインシステム構築時のカラーパレット定義
- WCAG基準に基づくアクセシビリティ（コントラスト比）の確認
- ブランドカラーの各フォーマットでの管理
- デザインツールとコードエディター間での色の受け渡し
CONTACT
業務で扱うデータ、 もっとうまく活かしませんか。
データの変換・管理・活用まで、仕組みごと整えます。 まずはお気軽にご相談ください。
無料で相談する※ 営業電話は一切しません。合わなければその場でお断りOKです