CSS

CSS — رنگ ها - هگز (HEX Colors)

آخرین بروزرسانی: 1404/07/12
قبلی: رنگ ها - RGB و RGBA بعدی: رنگ ها - HSL و HSLA

رنگ های HEX در CSS

در این مطلب «رنگ های HEX در CSS» را می شناسیم. مقدار هگزادسیمال به صورت #rrggbb نوشته می شود و هر جزء نماینده قرمز، سبز و آبی است. بنابراین #ff0000 قرمز خالص است و #000000 سیاه خواهد بود.

ساختار و بازه رنگ های HEX

هر جفت کاراکتر هگز برای یک کانال از 00 تا ff است. پس برای سفید همه اجزا ff می شوند: #ffffff. همچنین ترکیب برابرِ سه جزء، طیف های خاکستری می سازد.

.brand-red { color: #ff0000; }
.link-blue { color: #0000ff; }
.gray-soft { background-color: #f0f0f0; }

کوتاه نویسی 3 رقمی

برخی رنگ ها را می توان کوتاه نوشت؛ وقتی هر جفت رقم تکراری باشد. برای نمونه، #ffcc99 را می توان #fc9 نوشت و #ff00ff همان #f0f است.

body { background-color: #fc9; /* همان #ffcc99 */ }
h1 { color: #f0f; /* همان #ff00ff */ }
p { color: #b58; /* همان #bb5588 */ }

نکته: اگر هر جفت رقم تکراری نباشد، کوتاه نویسی 3 رقمی معتبر نیست و باید از شکل 6 رقمی استفاده کنید.

ادامه مسیر یادگیری رنگ ها

ابتدا مروری بر رنگ های CSS داشته باشید. سپس برای مدل های دیگر به RGB و RGBA و HSL و HSLA سر بزنید. همچنین این صفحه را با لنگر رنگ های HEX در CSS ذخیره کنید.

MDN: نگارش رنگ های هگز را ببینید و برای جزئیات استاندارد، به W3C: CSS Color Module Level 4 مراجعه کنید.

هشدار: کاراکترهای خارج از بازه هگز (0–9 و a–f) معتبر نیستند؛ مقدار نامعتبر توسط مرورگر نادیده گرفته می شود.

قبلی: رنگ ها - RGB و RGBA بعدی: رنگ ها - HSL و HSLA