رنگ های HEX (HEX Colors)
در «رنگ های HEX»، هر رنگ با الگوی #RRGGBB نوشته می شود. هر دو حرف یک مقدار شانزده هشتی (Hex) هستند. 00 یعنی 0، ff یعنی 255. مثل درصد باتری، عدد بیشتر یعنی روشن تر.
ساختار مقدار HEX
فرم کلی این است: #rrggbb. rr برای «قرمز (Red)»، gg برای «سبز (Green)»، bb برای «آبی (Blue)» است.
<div style="background-color:#ff0000;">#ff0000</div>
<div style="background-color:#0000ff;">#0000ff</div>
<div style="background-color:#3cb371;">#3cb371</div>
<div style="background-color:#ee82ee;">#ee82ee</div>
<div style="background-color:#ffa500;">#ffa500</div>
<div style="background-color:#6a5acd;">#6a5acd</div>
طیف خاکستری با مقادیر برابر
اگر rr و gg و bb برابر باشند، خاکستری می گیری. هرچه عدد بزرگ تر، روشن تر.
<p style="background-color:#3c3c3c;">#3c3c3c</p>
<p style="background-color:#616161;">#616161</p>
<p style="background-color:#787878;">#787878</p>
<p style="background-color:#b4b4b4;">#b4b4b4</p>
<p style="background-color:#f0f0f0; color:#555555;">#f0f0f0</p>
<p style="background-color:#f9f9f9; color:#555555;">#f9f9f9</p>
HEX سه رقمی (کوتاه نویسی)
کد سه رقمی #rgb وقتی مجاز است که هر جفت برابر باشد. مثلاً #ff00cc می شود #f0c. این فقط میان بُر نوشتن است.
<style>
body {
background-color: #fc9;
/* same as #ffcc99 */
}
h1 {
color: #f0f;
/* same as #ff00ff */
}
p {
color: #b58;
/* same as #bb5588 */
}
<\/style>
گام های عملی سریع
- #rrggbb را در style بنویس.
- مقادیر را کم وزیاد کن و نتیجه ببین.
- اگر جفت ها برابرند، به #rgb کوتاه کن.
نکته: برای مرور کلی رنگ ها به بخش رنگ ها برو. همچنین بخش های رنگ های RGB و رنگ های HSL را ببین تا مدل های دیگر را یاد بگیری.
جمع بندی سریع
- HEX یعنی #RRGGBB با بازه 00 تا ff.
- 00 سیاه تر است؛ ff روشن تر است.
- سه مقدار برابر یعنی خاکستری.
- #rgb نسخه کوتاهِ جفت های برابر است.
- با ادیتور آنلاین تمرین کن.