رنگ های RGB (RGB Colors)
«رنگ های RGB» یعنی ترکیب سه نور «قرمز (Red)»، «سبز (Green)» و «آبی (Blue)». فرمول rgb(r, g, b) است. هر مؤلفه بین 0 تا 255 می آید. عدد بزرگ تر یعنی نور بیشتر؛ مثل زیاد کردن روشنایی صفحه موبایل.
فرمول رنگ های RGB
در CSS می نویسی: rgb(قرمز، سبز، آبی). صفر یعنی خاموش، 255 یعنی روشن کامل.
<h2 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h2>
<h2 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h2>
<h2 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h2>
<h2 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h2>
<h2 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h2>
<h2 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h2>
خاکستری با RGB برابر
اگر سه مقدار برابر باشند، خاکستری می گیری. هرچه عدد بزرگ تر، روشن تر.
<p style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</p>
<p style="background-color:rgb(90, 90, 90);">rgb(90, 90, 90)</p>
<p style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</p>
<p style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</p>
<p style="background-color:rgb(210, 210, 210); color:#555555;">rgb(210, 210, 210)</p>
<p style="background-color:rgb(240, 240, 240); color:#555555;">rgb(240, 240, 240)</p>
شفافیت با RGBA
در «RGBA»، حرف A یعنی «آلفا (Alpha)». آلفا شفافیت است و بین 0 تا 1 می آید.
<div style="background-color:rgba(255, 99, 71, 0); color:#555555;">rgba(255, 99, 71, 0)</div>
<div style="background-color:rgba(255, 99, 71, 0.2); color:#555555;">rgba(255, 99, 71, 0.2)</div>
<div style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</div>
<div style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</div>
<div style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</div>
<div style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</div>
گام های عملی سریع
- یک رنگ با rgb بنویس.
- مقادیر را کم وزیاد کن و اثر را ببین.
- با rgba شفافیت بساز.
نکته: دامنه هر مؤلفه RGB از 0 تا 255 است. دامنه آلفا 0 تا 1 است. برای آشنایی با سایر مدل ها، فصل های HEX و HSL را ببین. همچنین مرور فصل رنگ ها دید کلی می دهد.
جمع بندی سریع
- RGB یعنی ترکیب سه نور.
- 0 تا 255 شدت نور است.
- سه مقدار برابر یعنی خاکستری.
- RGBA شفافیت اضافه می کند.
- با ادیتور سریع تمرین کن.