رنگ های RGB در CSS (RGB & RGBA)

در این بخش با «رنگ های RGB در CSS» آشنا می شوید. مدل RGB شدت نور قرمز، سبز و آبی را با فرمول rgb(red, green, blue) مشخص می کند. هر مؤلفه بین 0 تا 255 است؛ بنابراین rgb(255, 0, 0) قرمز خالص می سازد.

فرمول و بازه رنگ های RGB

برای سیاه، هر سه مؤلفه 0 است (rgb(0, 0, 0)) و برای سفید هر سه 255 است (rgb(255, 255, 255)). سپس می توانید با تغییر اعداد، رنگ های متنوع بسازید.

.red { background-color: rgb(255, 0, 0); }
.blue { background-color: rgb(0, 0, 255); }
.greenish { background-color: rgb(60, 179, 113); }

سایه های خاکستری با RGB

وقتی سه مؤلفه مقدار برابر دارند، نتیجه «خاکستری» می شود. هرچه مقدار بزرگ تر باشد، خاکستری روشن تر است.

.g1 { background-color: rgb(60, 60, 60); }
.g2 { background-color: rgb(120, 120, 120); }
.g3 { background-color: rgb(240, 240, 240); }

رنگ های RGBA در CSS

«RGBA» گسترش «رنگ های RGB در CSS» با کانال شفافیت (alpha) است: rgba(red, green, blue, alpha). مقدار آلفا بین 0.0 تا 1.0 است.

.tomato-20 { background-color: rgba(255, 99, 71, 0.2); }
.tomato-60 { background-color: rgba(255, 99, 71, 0.6); }
.tomato-100 { background-color: rgba(255, 99, 71, 1); }

نکته: برای لایه گذاری روی پس زمینه ها، مقدار آلفا را کاهش دهید تا متن یا الگوهای زیرین دیده شوند.

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

برای مرور کلی رنگ ها به رنگ های CSS بروید. همچنین مدل های دیگر را در HEX و HSL بخوانید. در صورت نیاز به درج صحیح استایل ها صفحه نحوه استفاده و در مواجهه با خطاها ارورها را ببینید. این صفحه نیز با لنگر رنگ های RGB در CSS در دسترس است.

هشدار: اعداد خارج از بازه 0 تا 255 نادیده گرفته می شوند؛ همچنین مقدار آلفا باید بین 0.0 و 1.0 باشد.