مدل RGB (RGB)
«مدل RGB (RGB)» یعنی ساختن رنگ با نور قرمز، سبز و آبی. «کانال آلفا (Alpha)» هم شفافیت را نشان می دهد. مثل ترکیب نور چراغ ها در صحنه تئاتر.
مقدارهای RGB
الگو این است: rgb(قرمز, سبز, آبی). هر کدام بین 0 تا 255 است. 0 یعنی خاموش، 255 یعنی روشنِ کامل.
<div style="background-color:rgb(255, 0, 0);\n">rgb(255, 0, 0)</div>
<div style="background-color:rgb(0, 0, 255);\n">rgb(0, 0, 255)</div>
<div style="background-color:rgb(60, 179, 113);\n">rgb(60, 179, 113)</div>
<div style="background-color:rgb(238, 130, 238);\n">rgb(238, 130, 238)</div>
<div style="background-color:rgb(255, 165, 0);\n">rgb(255, 165, 0)</div>
<div style="background-color:rgb(106, 90, 205);\n">rgb(106, 90, 205)</div>
طیف خاکستری (Shades of Gray)
اگر سه مقدار یکسان باشند، خاکستری می شود. هرچه بزرگ تر، روشن تر.
<div style="background-color:rgb(60, 60, 60);\n">rgb(60, 60, 60)</div>
<div style="background-color:rgb(100, 100, 100);\n">rgb(100, 100, 100)</div>
<div style="background-color:rgb(140, 140, 140);\n">rgb(140, 140, 140)</div>
<div style="background-color:rgb(180, 180, 180);\n">rgb(180, 180, 180)</div>
<div style="background-color:rgb(200, 200, 200);\n color:#555555;\n">rgb(200, 200, 200)</div>
<div style="background-color:rgb(240, 240, 240);\n color:#555555;\n">rgb(240, 240, 240)</div>
مقدارهای RGBA و شفافیت
RGBA مثل RGB است، اما «آلفا (Alpha)» دارد. آلفا بین 0 و 1 است. 0 کاملاً شفاف، 1 بدون شفافیت.
<div style="background-color:rgba(255, 99, 71, 0);\n color:#555555;\n">rgba(255, 99, 71, 0)</div>
<div style="background-color:rgba(255, 99, 71, 0.2);\n color:#555555;\n">rgba(255, 99, 71, 0.2)</div>
<div style="background-color:rgba(255, 99, 71, 0.4);\n">rgba(255, 99, 71, 0.4)</div>
<div style="background-color:rgba(255, 99, 71, 0.6);\n">rgba(255, 99, 71, 0.6)</div>
<div style="background-color:rgba(255, 99, 71, 0.8);\n">rgba(255, 99, 71, 0.8)</div>
<div style="background-color:rgba(255, 99, 71, 1);\n">rgba(255, 99, 71, 1)</div>
گام های عملی
- یک <div> بساز و style بده.
- یک رنگ با rgb(...) تنظیم کن.
- حالاشفافیت را با rgba(...) امتحان کن.
نکته: اگر رنگ شلوغ شد، کنتراست متن را بررسی کن. برای مرور کلی رنگ ها به مدل رنگ ها برو. همچنین ادامه مسیر را در مدل HEX و مدل HSL ببین.
جمع بندی سریع
- RGB سه نور پایه را ترکیب می کند.
- مقدار 0 تا 255 شدت نور است.
- RGBA شفافیت را اضافه می کند.
- خاکستری یعنی سه مقدار برابر.