カラー変換ツール
プレビュー
#164e63
RGB
0-255
0-255
0-255
HSL
0-360
0-100%
0-100%
シェアする
使い方
- 1 HEX(#FF5733形式)・RGB(各0-255)・HSL(色相0-360°、彩度/明度0-100%)のいずれかを入力します。
- 2 入力するとリアルタイムで他の3形式に自動変換され、カラープレビューも表示されます。
- 3 色相環の概念で考えると: 0°=赤、120°=緑、240°=青、180°=シアンのように回転的に色が変わります。
- 4 WebデザインではHEX(#RRGGBB)が一般的、CSSアニメーション・アクセシビリティ対応にはHSLが扱いやすい。HSVはデザインソフト(Photoshop等)で多用。
カラー変換ツールについて
よくある質問
Q #FF5733は何色ですか?
明るい赤橙色(コーラル色、Vivid Orange-Red)です。<strong>RGB(255, 87, 51)・HSL(11°, 100%, 60%)</strong>。色相環で11°、ほぼ最大彩度、明度60%という配色。Webデザイン・パッケージ・スポーツチームのアクセントカラーで人気。同系色: トマト(#FF6347)、サーモン(#FA8072)、ダークオレンジ(#FF8C00)。
Q HEXとRGBの違いは?
<strong>同じ色を別表記しているだけ</strong>で、色情報は完全に同じ。HEX(#FF5733)はWebでコンパクトに書ける16進表記、RGB(255,87,51)は10進数で各成分を表記。CSS:<code>background: #FF5733</code>と<code>background: rgb(255,87,51)</code>は同じ結果。半透明にする場合のみRGBA(<code>rgba(255,87,51,0.5)</code>)を使います。
Q HSLでhover効果を作るには?
HSLの<strong>L(明度)を10〜15%下げる</strong>だけで自然なhover色になります。例: 元色<code>hsl(220, 70%, 60%)</code> → hover<code>hsl(220, 70%, 50%)</code>。HEXで<code>#3B82F6</code>から手動でhover色を計算するより楽。CSSではこれが「ボタンが少し暗くなる」表現の標準パターンです。
Q 文字と背景のコントラストはどう確認?
WCAG 2.1基準で<strong>4.5:1以上(通常文字)・3:1以上(大文字)</strong>が必須(AA基準)。WebAIM Contrast Checker(webaim.org/resources/contrastchecker/)で実測できます。例: 黒文字#000+白背景#FFFは21:1で最高、グレー#999+白は2.85:1で不適合。デザイン段階で必ず確認を。
Q OKLCHとは何ですか?
CSS Color 4(2023年標準化)の新カラーモデルで、<strong>知覚均一</strong>(同じL値変化が人間の目には同じ明度差として感じられる)が特徴。HSLでは色相によって体感明度が違う(青のhsl(240,100%,50%)と黄hsl(60,100%,50%))問題を解決。デザインシステム・ブランドカラー定義に最適です。Tailwind CSS v4等の現代ツールが採用始めています。
Q 同じ16進数でも色がブラウザで違う理由は?
色管理(<strong>カラープロファイル</strong>)とディスプレイの違いです。Mac(P3広色域)とWindows(sRGB)、iPhone(P3)とAndroid(sRGB)で同じ#FF5733も微妙に異なる発色になります。プロのデザイン現場では、Webコンテンツ向けは<strong>sRGB ICC</strong>プロファイルで作業し、Display P3向けには別途調整します。
Q 印刷物にもRGB/HEXは使えますか?
使えますが推奨されません。印刷は<strong>CMYK(シアン・マゼンタ・イエロー・ブラック)</strong>4色インクで再現するため、画面用のRGB/HEXは印刷時に色がずれます。特に蛍光ピンク・蛍光グリーン等はCMYK表現不可能(色域外)。印刷物は最初からCMYK・PantoneでデザインするかRGB→CMYK変換時に色ずれ確認を。
Q 色覚異常の人にも見やすい配色は?
日本人男性の約5%、女性の約0.2%が何らかの色覚異常を持ちます。最頻出は<strong>赤緑色弱(P型・D型)</strong>で、赤と緑の区別が困難。対策: ①赤緑だけで情報を伝えない(信号機の3色は位置でも区別)、②パターン・形・テキストラベル併用、③カラーユニバーサルデザイン推奨色(青-オレンジ等)。Adobe Color等で色覚異常シミュレーション可能。
Q 透明度(透過度)の指定方法は?
HEXは<strong>#RRGGBBAA</strong>(8桁)、RGBは<strong>rgba(r, g, b, a)</strong>形式。aは0(完全透明)〜1(不透明)。例: <code>#FF5733CC</code>は約80%不透明、<code>rgba(255, 87, 51, 0.5)</code>は50%。HSLAも同様。本ツールは透明度未対応ですが、HEXに2桁追加するだけで透明度指定可能です。