紹介
カラー変換ツールは、HEX、HEXA、RGB、RGBA、HSL、HSLA、HSV、HSVA の間で色を変換します。デザインツール、CSS、UI トークン、Canvas コード、画像作業、色の実験に便利です。
使い方
HEX、RGB、HSL、HSV 形式の色を入力するか、色コントロールを調整します。すべての形式がすぐに更新されます。プレビューで見た目を確認し、Alpha で透明度を調整して、CSS やコードに合う形式をコピーします。
機能
- •HEX、HEXA、RGB、RGBA、HSL、HSLA、HSV、HSVA を変換
- •透明度対応のライブプレビュー
- •CSS に貼り付けやすい値をコピー
- •UI デザイン、フロントエンド、トークン整理に便利
- •例とクイックスウォッチ
- •インストールやログイン不要
色形式が重要な理由
色形式にはそれぞれ役割があります。HEX は短くデザイン引き渡しでよく使われます。RGB は画面の色チャンネルに対応します。HSL は色相、彩度、明度で考えられるため、調整しやすい形式です。
形式の選び方
固定値なら HEX、透明なオーバーレイやチャンネル操作なら RGB/RGBA、テーマの明暗や彩度を調整するなら HSL/HSLA が便利です。
アクセシビリティとコントラスト
色を変換しても文字が読みやすいとは限りません。重要なテキスト、ボタン、状態表示ではコントラストを確認してください。
Alpha と 8 桁 HEX
8 桁 HEX は通常の 6 桁カラーに Alpha を追加します。#3366CC80 の最後の 2 文字が透明度を表します。
色形式ガイド
よく使う形式の比較です。
| 形式 | 例 | 向いている用途 |
|---|---|---|
| HEX | #3366CC | 静的 CSS 色、デザイン引き渡し |
| HEXA | #3366CC80 | 透明度付きの固定色 |
| RGB | rgb(51, 102, 204) | プログラム上の色チャンネル |
| RGBA | rgba(51, 102, 204, 0.5) | オーバーレイや影 |
| HSL | hsl(220, 60%, 50%) | テーマ調整 |
| HSV | hsv(220, 75%, 80%) | カラーピッカー作業 |
よく使う Alpha 値
不透明度と 8 桁 HEX の対応目安です。
| 不透明度 | 概算 HEX Alpha | 用途 |
|---|---|---|
| 100% | FF | 完全不透明 |
| 75% | BF | 強いオーバーレイ |
| 50% | 80 | 半透明 |
| 25% | 40 | 控えめなオーバーレイ |
| 10% | 1A | ごく薄い色 |
よくある質問
HEX、RGB、HSL の違いは？
HEX は短い 16 進表記、RGB は赤緑青のチャンネル、HSL は色相・彩度・明度で表します。
透明度に対応していますか？
はい。RGBA、HSLA、HSVA、8 桁 HEXA に対応しています。
結果は CSS で使えますか？
はい。color、background-color、border-color、shadow、gradient などで使えます。
デザインシステムにはどの形式がよいですか？
固定トークンは HEX、明暗や状態の派生色は HSL が扱いやすいことがあります。
変換で見た目は変わりますか？
等価な値なら同じに見えるはずですが、透明度、色設定、ディスプレイによって知覚は変わります。