カラーコードに対応する色を表示します
CSSで定義されている色の値を入力してください。
例：#ff0000、red、rgb(255 0 0)、hsl(0 100% 50%)、他
入力値の色がここに表示されます
上記の色のURL
遷移時間：
使い方
- このツールは、入力したカラーコードから色を検索します。カラーコードに対応する色を確認したい時などにご利用ください。
- カラーコードは、CSSで定義されている各種の形式（16進数、関数、キーワード）で入力することができます。
- カラーコードが無効な場合はエラーメッセージが表示されますが、厳密なチェックは行っていないため通過してしまう場合もあります（その場合は何も反応しません）。
- 色ボックス（色が表示されるエリア）の下に表示されるURLを使用すると、その色に直接アクセスすることができます。
- 刺激の強い色を繰り返し検索する場合は、目を保護するために遷移時間を2秒または5秒に設定することをお勧めします。逆に、微妙な色の変化を確認したい場合は0秒に設定してみてください。
- このツールはJavaScriptで作成されています。JavaScriptを利用できない環境では動作しません。
色の値
このツールでは、以下のカラーコードの形式に対応しています。
| 形式 | 構文 | 色値の例 |
|---|---|---|
| 16進数カラー | ||
| 16進数 | #RRGGBB #RGB |
#ff0000 #f00 |
| 16進数 + 不透明度 |
#RRGGBBAA #RGBA |
#ff000077 #f007 |
|
R：赤色、G：緑色、B：青色、A：不透明度 RGB：00 - ff（0 - f）、A：00 - ff（0 - f） |
||
| RGB / RGBAカラー | ||
| RGB モダン |
rgb(R G B) rgb(R G B / A) |
rgb(255 0 0) rgb(100% 0% 0%) rgb(255 0 0 / 0.5) rgb(100% 0% 0% / 50%) |
| RGB レガシー |
rgb(R, G, B) | rgb(255, 0, 0) rgb(100%, 0%, 0%) |
| RGBA レガシー |
rgba(R, G, B, A) | rgba(255, 0, 0, 0.5) rgba(255, 0, 0, 50%) rgba(100%, 0%, 0%, 0.5) rgba(100%, 0%, 0%, 50%) |
|
R：赤色、G：緑色、B：青色、A：不透明度 RGB：0 - 255（0% - 100%）、A：0.0 - 1.0（0% - 100%） |
||
| HSL / HSLAカラー | ||
| HSL モダン |
hsl(H S L) hsl(H S L / A) |
hsl(240 100% 50%) hsl(240 100% 50% / 0.5) hsl(240 100% 50% / 50%) |
| HSL レガシー |
hsl(H, S, L) | hsl(240, 100%, 50%) |
| HSLA レガシー |
hsla(H, S, L, A) | hsla(240, 100%, 50%, 0.5) hsla(240, 100%, 50%, 50%) |
|
H：色相、S：彩度、L：明度、A：不透明度 H：0 - 360、SL：0% - 100%、A：0.0 - 1.0（0% - 100%） |
||
| HWBカラー | ||
| HWB | hwb(H W B) hwb(H W B / A) |
hwb(240 0% 40%) hwb(240 0% 40% / 0.5) hwb(240 0% 40% / 50%) |
|
H：色相、W：白味、B：黒味、A：不透明度 H：0 - 360、WB：0% - 100%、A：0.0 - 1.0（0% - 100%） |
||
| デバイスに依存しないカラー | ||
| Lab | lab(L a b) lab(L a b / A) |
lab(50 -62.5 62.5) lab(50% -50% 50%) lab(50 -62.5 62.5 / 0.5) lab(50% -50% 50% / 50%) |
|
L：明度、a：色相（緑色 - 赤紫色）、b：色相（青色 - 黄色）、A：不透明度 L：0 - 100（0% - 100%）、ab：-125 - 125（-100% - 100%）、A：0.0 - 1.0（0% - 100%） |
||
| LCH | lch(L C H) lch(L C H / A) |
lch(50 75 180) lch(50% 50% 180) lch(50 75 180 / 0.5) lch(50% 50% 180 / 50%) |
|
L：明度、C：彩度（クロマ）、H：色相、A：不透明度 L：0 - 100（0% - 100%）、C：0 - 150（0% - 100%）、H：0 - 360、A：0.0 - 1.0（0% - 100%） |
||
| OKLab | oklab(L a b) oklab(L a b / A) |
oklab(0.5 -0.2 0.2) oklab(50% -50% 50%) oklab(0.5 -0.2 0.2 / 0.5) oklab(50% -50% 50% / 50%) |
|
L：明度、a：色相（緑色 - 赤紫色）、b：色相（青色 - 黄色）、A：不透明度 L：0.0 - 1.0（0% - 100%）、ab：-0.4 - 0.4（-100% - 100%）、A：0.0 - 1.0（0% - 100%） |
||
| OKLCH | oklch(L C H) oklch(L C H / A) |
oklch(0.5 0.2 180) oklch(50% 50% 180) oklch(0.5 0.2 180 / 0.5) oklch(50% 50% 180 / 50%) |
|
L：明度、C：彩度（クロマ）、H：色相、A：不透明度 L：0.0 - 1.0（0% - 100%）、C：0.0 - 0.4（0% - 100%）、H：0 - 360、A：0.0 - 1.0（0% - 100%） |
||
| カラーキーワード | ||
| 名前 | - | red、gray、olive、他 |
| システム | - | ActiveText、Mark、Field、他 |
| 特別 | - | transparent、currentcolor |
※上記の定義は2024年7月現在のものです。
参考リンク（外部サイト）
CSSの色について参考になるサイトです。（別ウィンドウで開きます）