HEX、RGB、HSL の色コードを変換し、共有しやすいコピースニペットとしてまとめます。
ブランドトークン引き継ぎ を、コピーしやすい HEX、RGB、HSL、トークンスニペットへ正規化しました。
小さい文字で最も強いコントラストを得るには、このスウォッチでは 濃いテキスト を使ってください。
:root {
--brand-accent: #0EA5E9;
--brand-accent-rgb: 14 165 233;
}
{
"color": {
"accent": {
"value": "#0EA5E9",
"rgb": "14 165 233",
"hsl": "hsl(199, 89%, 48%)"
}
}
}
background-color: #0EA5E9; color: #111827;
ウェブ上の色は複数の形式で表現できます。HEXは16進表記（#RRGGBB）を使用し、RGBは赤、緑、青の成分（0-255）を指定し、HSLは色相（0-360）、彩度、明度（0-100%）を使用します。各形式は、デザイン作業やプログラムによる色操作など、異なるユースケースに利点があります。
HEX色はRGB値を16進数でエンコードします（チャンネルあたり16-255）。RGBは色の強度（0-255）を直接指定します。HSLは色（色相）と強度（彩度/明度）を分離し、色のバリエーションを作成するのに直感的です。すべての形式で同じ1670万色を表現できます。
HSLは、単一のコンポーネントを調整するだけで色のバリエーション（明るく、暗く、彩度を上げる/下げる）を作成する必要がある場合に適しています。RGBは色の混合や画像処理に適しています。
HEXの短縮形は6桁の代わりに3桁を使用します（#RRGGBBの代わりに#RGB）。各桁は2倍になります：#F00は#FF0000（赤）になります。各ペアが同一の桁を持つ場合にのみ機能します。