رنگ خاکستری 128. رنگ در سبک ها را می توان به روش های مختلف تنظیم کرد: با مقدار هگزادسیمال، با نام، در فرمت RGB، RGBA، HSL، HSLA
رنگ در CSS را می توان به روش های مختلفی تنظیم کرد:
بر اساس اسم،
با مقدار هگزادسیمال،
در فرمت های RGB و RGBA
در فرمت های HSL و HSLA.
رنگ را با نام تنظیم کنید
مرورگرها از تعیین رنگ های خاص برای عناصر با نام پشتیبانی می کنند. در این جدول از چند کلمه کلیدی (نام رنگ انگلیسی) برای تنظیم ویژگی های رنگ، کد RGB، کد هگز (HEX) و کد HSL استفاده شده است.
Tab. 1. نام رنگ ها، کد RGB، HEX و HSL آنها.
نام
رنگ
RGB
HEX
HSL
شرح
سفید
rgb(255، 255، 255)
#فففف یا #ففف
hsl(0, 0, 100%)
سفید
نقره
rgb(192، 192، 192)
#c0c0c0
hsl(0, 0, 75%)
خاکستری
خاکستری
rgb(128، 128، 128)
#808080
hsl(0, 0, 50%)
خاکستری تیره
سیاه
rgb(0، 0، 0)
#000000 یا #000
hsl(0, 0, 0%)
مشکی
مارون
rgb(128، 0، 0)
#800000
hsl(0, 100, 25%)
قرمز تیره
قرمز
rgb(255، 0، 0)
#ff0000 یا #f00
hsl(0, 100, 50%)
قرمز
نارنجی
rgb(255، 165، 0)
#ffa500
hsl(38.8، 100، 50%)
نارنجی
رنگ زرد
rgb(255، 255، 0)
#ffff00 یا #ff0
hsl(60، 100، 50%)
رنگ زرد
زیتون
rgb(128، 128، 0)
#808000
hsl(60، 100، 25%)
زیتون
اهک
rgb(0، 255، 0)
#00ff00 یا #0f0
hsl(120, 100, 50%)
سبز روشن
سبز
rgb(0، 128، 0)
#008000
hsl(120، 100، 25%)
سبز
آبی
rgb(0, 255, 255)
#00ffff یا #0ff
hsl(180، 100، 50%)
آبی
آبی
rgb(0، 0، 255)
#0000ff یا #00f
hsl(240، 100، 50%)
آبی
نیروی دریایی
rgb(0,0,128)
#000080
hsl(240، 100، 25%)
آبی تیره
رنگ آبی
rgb(0، 128، 128)
#008080
hsl(180، 100، 25%)
سبز آبی
فوشیا
rgb(255، 0، 255)
#ff00ff یا #f0f
hsl(300، 100، 50%)
رنگ صورتی
رنگ بنفش
rgb(128، 0، 128)
#800080
hsl(300، 100، 25%)
بنفش
این نمونه ای از استفاده از نام رنگ ها است، نام رنگ ها از جدول توسعه یافته گرفته شده است.
RGB به CSS
فیروزه ای متوسط
رنگ قهوه ای
زرشکی
بنفش آبی
rolelivedrab
در اینجا نحوه کار این کد آمده است:
تنظیم رنگ با RGB
RGB یک مدل رنگ افزودنی است. به انگلیسی علاوه بر این- اضافه RGB مخفف کلمات انگلیسی است: قرمز، سبز، آبی - قرمز، سبز، آبی). از اینجا مشخص می شود که در مدل RGB، رنگ ها با افزودن سه رنگ (قرمز، سبز، آبی) در مقادیر مختلف سنتز می شوند.
با ترکیب رنگ های قرمز، سبز و آبی می توانید چندین میلیون سایه به دست آورید. تمام ترکیبات ممکن در حافظه کامپیوترها ذخیره می شود.
برو سر اصل مطلب.
برای تنظیم ویژگی ها در این فرمت، از علامت rgb(r, g, b) استفاده می شود که r, g, b سه کانال برای هر رنگ (قرمز، سبز، آبی) هستند. مقادیر برای هر کانال در محدوده 0 تا 255 تنظیم شده است.
نمونه کد.
برای روشن شدن همه چیز، یک کد مثال می زنم:
RGB به CSS
rgb(255، 0، 0)
rgb(0, 255, 0)
rgb(0، 0، 255)
این مثال چگونه باید کار کند:
عکس. 1. رنگ ها در RGB
برای مثال توضیحات
در ابتدای صفحه، کلاس div.rgb را ایجاد می کنیم، به طوری که بلوک های ایجاد شده توسط تگ مورد نیاز است.
در اندازه صحیح نمایش داده می شود: 240 پیکسل در 40 پیکسل. ما مقدار - 40px را به ویژگی line-height (ارتفاع خط) اختصاص می دهیم، یعنی برابر با ارتفاع بلوک، این اجازه می دهد تا متن در بلوک نمایش داده شود.
در مرکز عمودی با استفاده از قانون ( text-align : مرکز ;).
بعد، در کد، رنگ پس زمینه بلوک را تنظیم کنید
با استفاده از ویژگی style با استفاده از ویژگی پس زمینه، و اختصاص مقادیر به rgb(255, 0, 0), rgb(0, 255, 0) و rgb(0, 0, 255). یعنی ما به طور متناوب یک کانال را تا حد امکان اشباع می کنیم و کانال های باقی مانده برای سنتز استفاده نمی شوند، زیرا مقدار آنها صفر است.
سعی کنید این مثال را ویرایش کنید تا مقادیر خود را شامل شود، مانند rgb(100، 100، 100).
تنظیم رنگ با RGBA
CSS3 ابزار جدیدی را برای کار با رنگ معرفی کرد - فرمت RGBA. می توان آن را تکامل مدل RGB نامید، اما با افزودن یک کانال جدید - کانال A یا آلفا. این کانال شفافیت رنگ را تنظیم می کند. مقادیر آن در محدوده 0 تا 1 تنظیم می شود. مقدار برابر با 0 مربوط به شفافیت کامل، 1 - شفافیت کامل (رنگ همان رنگی است که در سه کانال RGB اول تنظیم شده است) و مقادیر متوسط ، مانند 0.4 یا 0.6 - شفافیت به درجات مختلف.
نمونه کد.
RGBA به CSS3
در اینجا نحوه کار این است:
این کد از نظر ظاهری شبیه به کد زیر است که از مدل RGB برای تنظیم مقدار رنگ استفاده می کند:
RGBA به CSS3
نتیجه او این است:
یک مقدار کانال آلفا برابر با صفر، هر رنگی را نامرئی می کند - کاملاً شفاف، مقداری برابر با یک رنگ را در کد RGB بدون تغییر ترجمه می کند. ویژگی rgba(255,0,0,1.0) رنگ قرمز rgb(255, 0, 0) را نشان می دهد.
بر اساس مقدار هگزادسیمال (کد HEX)
در زندگی روزمره از سیستم اعشاری شمارش استفاده می کنیم. منشأ آن بسیار ساده است - ما ده انگشت روی دستان خود داریم و در زندگی راحت بود که روی انگشتان خود بشماریم. اگر در سیستم اعشاری ده رقم وجود دارد: از 0 تا 9 و عدد 10 رقم بعدی است، در این صورت 16 رقم در سیستم اعداد هگزادسیمال وجود دارد و رقم بعدی عدد 16 خواهد بود.
برای نشان دادن کدهای رنگی، ارقام اعشاری معمولی از 0 تا 9 به عنوان ارقام هگزادسیمال و حروف لاتین از A تا F برای نشان دادن اعداد از 10 تا 15 استفاده می شود، یعنی (0، 1، 2، 3، 4، 5، 6، 7، 8، 9، A، B، C، D، E، F). برای وضوح، بیایید این را در یک جدول خلاصه کنیم:
برای نوشتن اعداد هگزادسیمال بزرگتر از F (15 اعشاری)، مانند سیستم اعشاری، از اتحاد دو رقم نیز استفاده می کنند، اما از قبل هگزادسیمال، که واضح است. بنابراین، برای نوشتن عدد اعشاری 255 به صورت هگزادسیمال، از علامت FF استفاده می شود.
سیستم هگزا دسیمال برای کامپیوتر قابل درک تر است، مقادیر داده شده توسط مقدار هگزادسیمال را سریعتر پردازش می کند.
برای تعیین یک رنگ در سیستم هگزادسیمال، قبل از مقدار عددی علامت "#" قرار دهید، به عنوان مثال: #FFC0CB. مقدار #FFC0CB خود از سه رقم هگزادسیمال FF، C0 و CB تشکیل شده است. معنای این ورودی مانند تنظیم رنگ در فرمت RGB (rgb(r, g, b)) است - هر رقم هگزا دسیمال در کد HEX نشان دهنده اشباع رنگ در کانال مدل RGB آن است.
کد HEX در CSS
#FF0000
#00FF00
#0000FF
این کد عناصر زیر را نمایش می دهد:
و در اینجا یک تصویر با نتیجه از بخش "تنظیم رنگ با RGB" در این صفحه بالا آمده است.
عکس. 1. رنگ ها در RGB
می بینیم که رنگ ها یکسان هستند.
یک علامت اختصاری برای کد رنگ HEX مجاز است: یک عدد 6 رقمی را می توان به عنوان یک عدد 3 رقمی نوشت. این تنها زمانی معتبر است که دو رقم در مقدار رنگ همان کانال تکرار شود.
یعنی مخفف زیر قابل قبول است:
به عنوان مثال، رنگ #ff22aa را می توان به صورت #f2a یا رنگ #44aa22 را می توان به صورت #4a2 نوشت.
تنظیم رنگ با HSL
CSS3 فرمت جدیدی برای تعیین رنگ دارد.
فرمت HSL مخفف کلمات انگلیسی Hue (رنگ)، Saturate (اشباع) و Lightness (سبک) است.
Hue در HSL یک مقدار رنگ در یک چرخ رنگ خاص است (شکل 2) و بر حسب درجه مشخص می شود. اگر قیاس هایی با مدل RGB ترسیم کنیم، 0 درجه مربوط به قرمز، 120 درجه مربوط به سبز و 240 درجه مربوط به آبی است.
مقدار رنگ از 0 به 359 تغییر خواهد کرد.
شکل 2. چرخ رنگ HSL.
مقدار دوم - اشباع (Saturate) به عنوان درصد تنظیم می شود. در 100٪ اشباع، رنگ تا حد ممکن "آبدار" است، همانطور که نشانگر اشباع به سمت 0 حرکت می کند، رنگ بیشتر و بیشتر کدر می شود و به رنگ خاکستری در می آید.
مقدار سوم - Lightness (Lightness) نیز به صورت درصد تنظیم می شود. هر چه درصد بیشتر باشد، رنگ روشن تر خواهد بود. مقادیر افراطی 0% و 100% به ترتیب رنگهای سیاه (عدم نور) و سفید (در معرض) را نشان میدهند و فرقی نمیکند که کدام رنگ از چرخه رنگ در کانال اول انتخاب شده است. مقدار بهینه را می توان مقدار روشنایی رنگ را معادل 50 درصد در نظر گرفت.
تنظیم رنگ با HSLA
فرمت HSLA مربوط به HSL است، همانطور که RGB به RGBA است. در فرمت HSLA و همچنین در RGBA یک کانال آلفا اضافه شده است که وظیفه شفافیت رنگ را بر عهده دارد.
رنگ مشخص شده در فرمت HSL راحت تر خوانده می شود. می توان گفت که شهودی است. برای مثال، کد hsl(120,60%50%) می تواند رنگ نهایی را نشان دهد اگر تصویری از چرخه رنگ HSL در حافظه وجود داشته باشد. این را نمی توان در مورد فرمت های RGB و HEX گفت، کد رنگ مشخص شده در این فرمت ها تنها پس از رندر شدن در مانیتور مشخص می شود.
فرمت های جدید در CSS3 (HSL، HSLA و RGBA) در مرورگرها از نسخه های: IE 9.0، Opera 10.0 Firefox 3.0 کار می کنند. چگونه می توان استایل ها را در مرورگرهای قدیمی تر کار کرد؟
Someblock (رنگ پسزمینه: rgb(255,50,50)؛ رنگ پسزمینه: rgba (255,50,50,0.85)
هنگام استفاده از این کد در مرورگرهای قدیمی، رنگ پسزمینه کلاس .somebloсk، اگرچه از کانال آلفا استفاده نمیکند، با فرمت RGB نمایش داده میشود.
>> مدیریت رنگ
مقادیر رنگ RGB هگزادسیمال
روشهای توصیف و پردازش رنگها از این نظر که برای نمایش نهایی در نظر گرفته شدهاند، با یکدیگر متفاوت هستند. بیایید، برای مثال، نمایش رنگ ها را برای پلی گرافی و برای نمایشگرهای کامپیوتر مقایسه کنیم. در مورد اول، اساس است سفیدرنگ کاغذی که بعداً سه رنگ اصلی روی آن اعمال می شود: آبی,
رنگ بنفشو رنگ زرد. این سه رنگ اصلی با اختلاط با یکدیگر و با رنگ سفید کاغذ به نسبت های مختلف سایه های رنگی متفاوتی به جز سیاه خالص می دهند و یا در غیاب کامل رنگ کاغذ سفید می دهند. اگر رنگ مشکی را به آنها اضافه کنیم، می گیریم CMYK- راهی برای انتقال رنگ زمانی که رنگ مورد نظر با کم کردن رنگ های از دست رفته از سفید به دست می آید.
در مورد دوم، اساس است سیاهرنگ صفحه نمایش مانیتور که هر سلول آن در یکی از سه رنگ می درخشد: قرمز-قرمز، سبز-سبز و آبی-آبی. سپس در غیاب کامل هیچ درخششی، یک رنگ مشکی خالص از صفحه به دست می آید و هر یک از رنگ های مورد نیاز با نسبت هر یک از سه رنگ به دست می آید. در این صورت به دست خواهیم آورد RGB- روش انتقال رنگ رنگ های اولیه می توانند معانی از 0
قبل از 255
، یا از 0%
قبل از 100%
، یا می تواند به عنوان یک مقدار هگزادسیمال نمایش داده شود. در شکل زیر نتایج اختلاط رنگ های اصلی را مشاهده می کنید.
سیستم اعداد هگزا دسیمال، بر خلاف سیستم اعداد اعشاری، نه ده رقم در سری ارقام خود، بلکه شانزده رقم دارد - از این رو نام آن است. بر این اساس، انواع غیر تکراری ترکیبات دو رقمی فقط می توانند - 256
، برای ادامه سری ارقام بعد از آن 9
نامه هایی از آقبل از اف، بنابراین ردیف به این شکل خواهد بود -
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.
برای تبدیل اعداد از یک سیستم اعداد به سیستم اعداد دیگر و بالعکس، از ماشین حساب زیر استفاده کنید. حداکثر مقدار در اینجا می تواند باشد FF - 255
.
در این مورد، رنگ با سه عدد هگزادسیمال، که هر کدام از دو رقم تشکیل شده است، داده می شود. عدد اول شدت را تعیین می کند قرمزرنگ ها، متوسط سبز، آخرین چیز- آبیرنگ ها همه اعداد می توانند مقادیر متفاوتی داشته باشند 00
قبل از FF(از 0 تا 255). به عنوان مثال: رنگ سبز به عنوان داده شده است #00FF00، قرمز مانند #FF0000، آبی - مانند #0000FF، سفید مانند #FFFFFF، عدم وجود کامل رنگ یا سیاه به عنوان داده شده است #000000
.
در فرم زیر می توانید هر مقدار هگزادسیمال را برای هر یک از سه رنگ تنظیم کنید و با کلیک در قسمت خروجی نتیجه اختلاط آنها را مشاهده کنید.
نمونه هایی از مقادیر رنگ RGB هگزادسیمال: درجه بندی قرمز، آبی و سبز.
چشم انداز
کد
چشم انداز
کد
چشم انداز
کد
چشم انداز
کد
چشم انداز
کد
چشم انداز
کد
#010000
#800000
#000100
#008000
#000001
#000080
#100000
#900000
#001000
#009000
#000010
#000090
#200000
#A00000
#002000
#00A000
#000020
#0000A0
#300000
#B00000
#003000
#00B000
#000030
#0000B0
#400000
#C00000
#004000
#00C000
#000040
#0000C0
#500000
#D00000
#005000
#00D000
#000050
#0000D0
#600000
#E00000
#006000
#00E000
#000060
#0000E0
#700000
#FF0000
#007000
#00FF00
#000070
#0000FF
تعیین رنگ با حروف الفبای رشته
برای سهولت استفاده به برخی از رنگ ها و ترکیبات آنها نام هایی داده شد که توسط همه مرورگرها تشخیص داده شد و امکان تنظیم نام بسیاری از آنها فراهم شد. جدول زیر تعدادی از نام رنگ ها را نشان می دهد:
چشم انداز
نام
چشم انداز
نام
چشم انداز
نام
چشم انداز
نام
سفید
قرمز
نارنجی
رنگ زرد
سبز
آبی
رنگ بنفش
مشکی
آلیس آبی
سفید عتیقه
آبی
آکوامارین
لاجوردی
رنگ بژ
سوپ غلیظ خامه ای
بلانچدالموند
بنفش آبی
رنگ قهوه ای
بوقلمون
کادبلو
Chartreuse
شکلات
مرجان
گل ذرت
ابریشم ذرت
زرشکی
فیروزه ای
آبی تیره
دارک سیان
میله طلایی تیره
خاکستری تیره
سبز تیره
دارکخاکی
Darkmagenta
دارکولیو گرین
نارنجی تیره
دارکورچید
قرمز تیره
سالمون تیره
سبز تیره
آبی تیره
خاکستری تیره
فیروزه ای تیره
بنفش تیره
صورتی پررنگ
آبی آسمان عمیق
تیره رنگ
آبی طفره زن
آجر نسوز
سفید گلدار
جنگل سبز
فوشیا
گینزبورو
شبح سفید
طلا
گلدنرود
خاکستری
زرد سبز
عسلک
هات پینک
سرخ هندی
نیل
عاج
خاکی
اسطوخودوس
رژگونه اسطوخودوس
لیمونشیفون
آبی کمرنگ
مرجان سبک
سبز رنگ
رنگ زرد روشن
سبز روشن
خاکستری روشن
صورتی روشن
سالمون سبک
سبز روشن
آبی روشن
خاکستری تیغه روشن
آبی روشن فولادی
زرد کمرنگ
اهک
لیمو سبز
کتانی
ارغوانی
مارون
مدیوم آکوامارین
آبی متوسط
ارکیده متوسط
بنفش متوسط
سبز متوسط
رنگ آبی متوسط
بهار سبز متوسط
فیروزه ای متوسط
قرمز بنفش متوسط
آبی نیمه شب
کرم نعنا
میستروز
ناواهو سفید
نیروی دریایی
قدیمی
زیتون
زیتون
قرمز نارنجی
ارکیده
palegoldenrod
سبز کمرنگ
رنگی فیروزه ای
رنگ بنفش کمرنگ
شلاق پاپایا
پفک هلو
پرو
رنگ صورتی
آلو
آبی پودری
رزی براون
آبی سلطنتی
قهوه ای زینی
سبز دریایی
صدف دریایی
سینا
نقره
آبی آسمانی
تخته سنگ آبی
اسلیت گری
برف
بهارگرین
آبی فولادی
قهوهای مایل به زرد
آبی رنگ
خار مریم
گوجه فرنگی
فیروزه
بنفش
گندم
دود سفید
زرد سبز
فهرست حروف کوچک با نام رنگ ها بسیار گسترده و بیش از اندازه کافی است. اگر می خواهید یک رنگ پس زمینه آنقدر غیرعادی تنظیم کنید که حتی نامی نداشته باشد، می توانید از یک مقدار هگزادسیمال استفاده کنید.
استفاده از انتخابگر رنگ ایمن
متأسفانه، در پلتفرم های مختلف، با تنظیمات مختلف سیستم، بازتولید صحیح رنگ مشکل ساز است. نکته این است که مرورگر همیشه سعی می کند با ترکیب و جایگزینی رنگ ها به تنهایی، پالت رنگ سند را با تنظیمات سیستم و قابلیت های مانیتور تنظیم کند. در نتیجه، گاهی اوقات کاربر دقیقاً آنچه را که مدیر وب می خواست به او نشان دهد، نمی بیند. راه برون رفت از این وضعیت در استفاده از پالتی یافت شد که هر رنگ آن تضمین شده است که به یک شکل توسط همه مرورگرها در پلتفرم های مختلف ارائه شود. این به اصطلاح تضمینپالت، همچنین به عنوان شناخته شده است بی خطرجعبه رنگ نقاشی. این پالت شامل رنگ هایی است که اجزای رنگ آنها مقادیر زیر را به خود می گیرند: 00
,33
,66
,99
,
CC,FF، در تمام موارد ممکن 216
ترکیبات آنها
چشم انداز
کد
چشم انداز
کد
چشم انداز
کد
چشم انداز
کد
چشم انداز
کد
چشم انداز
کد
FFFFFF
CCCCCC
999999
666666
333333
000000
CCCC66
CCCC33
999966
999933
999900
666600
CCFF66
CCFF00
CCFF33
CCCC99
666633
333300
99FF00
99FF33
99CC66
99CC00
99CC33
669900
CCFF99
99FF99
66CC00
66CC33
669933
336600
66FF00
66FF33
33FF00
33CC00
339900
009900
33FF33
00FF33
00FF00
00CC00
33CC33
00CC33
CCFFCC
99CC99
66CC66
669966
336633
003300
99FF99
66FF66
33FF66
00FF66
339933
006600
66FF99
33FF99
00FF99
33CC66
00CC66
009933
66CC99
33CC99
00CC99
339966
009966
006633
99FFCC
66FFCC
33FFCC
00FFCC
33CCCC
009999
CCFFFF
99FFFF
66FFFF
33FFFF
00FFFF
00CCCC
99CCCC
66CCCC
339999
669999
006666
336666
66CCFF
33CCFF
00CCFF
3399 سی سی
0099CC
003333
99CCFF
3399FF
0099FF
6699 سی سی
336699
006699
0066FF
3366 سی سی
0066CC
0033FF
003399
003366
6699FF
3366FF
0000 FF
0000 سی سی
0033CC
000033
3333FF
3300 FF
3300 سی سی
3333 سی سی
000099
000066
9999 سی سی
6666FF
6666 سی سی
666699
333399
333366
CCCCFF
9999FF
6666FF
6600 FF
330099
330066
9966 سی سی
9966FF
6600 سی سی
6633 سی سی
663399
330033
CC99FF
CC66FF
9933FF
9900 FF
660099
663366
CC66FF
CC33FF
CC00FF
9900 سی سی
996699
660066
CC99CC
CC66CC
CC33CC
CC00CC
990099
993399
FFCCFF
FF99FF
FF66FF
FF33FF
FF00FF
CC3399
FF66CC
FF00CC
FF33CC
CC6699
CC0099
990066
FF99CC
FF3399
FF0099
CC0066
993366
660033
FF6699
FF3399
FF0066
CC3366
996666
663333
CC9999
CC6666
CC3333
CC0000
990033
330000
FFCCCC
FF9999
FF6666
FF3333
FF0000
CC0033
FF6633
CC3300
FF3300
FF0000
CC0000
990000
FFCC99
FFCC66
FF6600
CC6633
993300
660000
FF9900
FF9933
CC9966
CC6600
996633
663300
FFCC66
FFCC00
FFCC33
CC9900
CC9933
996600
FFFFCC
FFFF99
FFFF66
FFFF33
FFFF00
CCCC00
با دقت به نقاشی نگاه کنید. پس زمینه جعبه کشویی شفاف ساخته شده است. این یک تکنیک طراحی نسبتا رایج است. بیایید فکر کنیم که چگونه می توان این را اجرا کرد.
وظیفه
مرورگر متقاطع را رنگ شفاف کنید.
راه حل
اولین فکر در این شرایط استفاده از یک تصویر png24 برای پس زمینه با شفافیت از قبل تنظیم شده است. اما این عکس کاملا زائد است. شما می توانید بدون آن به خوبی انجام دهید (و بنابراین بدون درخواست اضافی به سرور). بیایید سعی کنیم بهترین راه حل را پیدا کنیم.
فکر دوم استفاده از . اما در این مورد خیلی راحت نیست. از این گذشته ، نه تنها پس زمینه ، بلکه کتیبه ها نیز شفاف می شوند. بله، در واقع، تمام پنجره به یکباره.
البته، می توانید سعی کنید یک ظرف اضافی اضافه کنید و فقط به آن Opacity اعمال کنید، اما این عنصر HTML فقط برای تزئین خواهد بود و بدیهی است که اضافی خواهد بود. آیا بدون آن امکان پذیر است؟
البته که می توانی! اگر از RGBA استفاده می کنید.
فرمت توضیحات رنگ RGBA
CSS3 اجازه می دهد تا رنگ با استفاده از توابع RGB و RGBA مشخص شود. در عین حال، باید سهم هر جزء رنگی را مشخص کنیم که تحت آن یک بایت اختصاص داده شده است (از 0 تا 255، ناگهان کسی نمی داند).
نحو برای این مورد بسیار ساده است:
پس زمینه: rgb(0, 255, 0); /* رنگ سبز خالص */
برای RGBA، پارامتر چهارم اضافه می شود - شفافیت آلفا (از 0 تا 1).
زمینه: rgba(255, 0, 0, 0.5); /* قرمز خالص با کدورت 50 درصد */
راه حل مشکل ما اینجاست. کافی است رنگ پس زمینه را با استفاده از rgba تنظیم کنیم و همه چیز همانطور که نیاز داریم به نظر می رسد. بدون تصاویر و عناصر اضافی!
این اعداد را از کجا می توانم تهیه کنم؟
با استفاده از ابزار قطره چکان در فتوشاپ می توانید رنگ های تشکیل دهنده را مشاهده کنید.
درباره سازگاری بین مرورگرها
از آنجایی که عملکرد RGB بسیار قدیمی تر از RGBA است و از زمان استاندارد CSS2 وجود داشته است، می توانید از ساختار تکراری زیر برای محافظت در برابر قدیمی ترین مرورگرها استفاده کنید:
با این رویکرد، پدربزرگ های مرورگرهای مدرن شفافیت نخواهند داشت، اما خود رنگ درست باقی می ماند.
به طور جداگانه، شما باید از IE مراقبت کنید. خر مانند تا نسخه هشتم RGBA را نمی فهمد.
مثل همیشه: زمین - به دهقانان، کارخانه ها - به کارگران و خرها - یک عصا! مانند .
البته در شرایط جنگی، این قانون را در یک CSS جداگانه بیرون می آوریم که در آن قرار می دهیم.
SomeBlock ( پس زمینه: شفاف؛ فیلتر:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000؛ زوم: 1;)
ترفند این است که همان رنگ های شروع و پایان (ff0000 - قرمز) را مشخص کنید و از این واقعیت استفاده کنید که می توانید کانال آلفا را برای گرادیان در این فیلتر تنظیم کنید (در مثال، مقدار 80 است).
برای مرجع: فیلتر از یک سیستم هگزادسیمال استفاده می کند و کد FF مربوط به یک رنگ کاملاً مات است (در اعشار 255 است). بر این اساس، هگزادسیمال 80 اعشاری 128 است، یعنی 50 درصد شفافیت.
تایید شده در:
IE 6-9
فایرفاکس 3+
Opera 10+
سافاری 4
کروم
HEX/HTML
یک رنگ در فرمت HEX چیزی بیش از نمایش هگزادسیمال RGB نیست.
رنگ ها به عنوان سه گروه از ارقام هگزا دسیمال نشان داده می شوند که هر گروه مسئول رنگ خود است: #112233، که در آن 11 قرمز، 22 سبز، 33 آبی است. همه مقادیر باید بین 00 و FF باشند.
بسیاری از برنامهها یک نماد کوتاه برای رنگهای هگزادسیمال را میپذیرند. اگر هر یک از سه گروه دارای کاراکترهای یکسانی باشد، برای مثال #112233، می توان آنها را به صورت #123 نوشت.
h1 (رنگ: #ff0000; ) /* قرمز */
h2 (رنگ: #00ff00; ) /* سبز */
h3 (رنگ: #0000ff; ) /* آبی */
h4 ( رنگ: #00f; ) /* همان آبی، مختصر */
RGB
فضای رنگی RGB (قرمز، سبز، آبی) شامل تمام رنگ های ممکن است که می توان با ترکیب قرمز، سبز و آبی به دست آورد. این مدل در عکاسی، تلویزیون و گرافیک کامپیوتری محبوب است.
مقادیر RGB به عنوان یک عدد صحیح بین 0 و 255 مشخص می شوند. برای مثال rgb(0,0,255) به رنگ آبی نمایش داده می شود زیرا پارامتر آبی روی بالاترین مقدار خود (255) و بقیه روی 0 تنظیم شده است.
برخی از برنامه ها (به ویژه مرورگرهای وب) از درصد RGB (از 0٪ تا 100٪) پشتیبانی می کنند.
h1 (رنگ: rgb(255، 0، 0؛ ) /* قرمز */
h2 ( رنگ: rgb(0, 255, 0); ) /* سبز */
h3 ( رنگ: rgb(0, 0, 255); ) /* آبی */
h4 ( رنگ: rgb(0٪، 0٪، 100%)؛ ) /* همان آبی، نماد درصد */
مقادیر رنگ RGB در همه مرورگرهای اصلی پشتیبانی می شود.
RGBA
اخیراً، مرورگرهای مدرن یاد گرفتهاند که با مدل رنگی RGBA کار کنند، یک پسوند RGB با پشتیبانی از یک کانال آلفا که کدورت یک شی را تعیین میکند.
مقدار رنگ RGBA به صورت: rgba (قرمز، سبز، آبی، آلفا) مشخص می شود. پارامتر آلفا عددی بین 0.0 (کاملا شفاف) و 1.0 (کاملاً مات) است.
RGBA در IE9+، Firefox 3+، Chrome، Safari و Opera 10+ پشتیبانی میشود.
HSL
مدل رنگی HSL نمایشی از مدل RGB در یک سیستم مختصات استوانه ای است. HSL رنگ ها را به گونه ای نشان می دهد که نسبت به RGB معمولی شهودی تر و قابل درک تر است. این مدل اغلب در برنامه های گرافیکی، در پالت های رنگی و برای تجزیه و تحلیل تصویر استفاده می شود.
HSL مخفف Hue (رنگ / رنگ)، اشباع (اشباع)، Lightness / Luminance (سبکی / سبکی / درخشندگی است که نباید با روشنایی اشتباه گرفته شود).
Hue موقعیت رنگ را در چرخه رنگ (از 0 تا 360) تنظیم می کند. اشباع یک مقدار درصد اشباع (از 0٪ تا 100٪) است. سبکی درصدی از سبکی (از 0٪ تا 100٪) است.
h1 ( رنگ: hsl(120، 100%، 50%)؛ ) /* سبز */
h2 ( رنگ: hsl(120، 100، 75%)؛ ) /* سبز روشن */
h3 ( رنگ: hsl(120، 100%، 25%)؛ ) /* سبز تیره */
h4 ( رنگ: hsl(120، 60%، 70%)؛ ) /* سبز پاستلی */
HSL در IE9+، Firefox، Chrome، Safari و Opera 10+ پشتیبانی میشود.
HSLA
مشابه RGB/RGBA، HSL دارای یک حالت HSLA با پشتیبانی از یک کانال آلفا برای تعیین کدورت یک شی است.
مقدار رنگ HSLA به صورت: hsla (رنگ، اشباع، روشنایی، آلفا) مشخص می شود. پارامتر آلفا عددی بین 0.0 (کاملا شفاف) و 1.0 (کاملاً مات) است.
مدل رنگی CMYK اغلب با چاپ رنگی، با چاپ همراه است. CMYK (بر خلاف RGB) یک مدل تفریق کننده است، به این معنی که مقادیر بالاتر با رنگ های تیره تر همراه است.
رنگ ها با نسبت فیروزه ای (سیان)، سرخابی (سرخابی)، زرد (زرد)، با افزودن رنگ سیاه (کلید / سیاه K) تعیین می شوند.
هر یک از اعدادی که یک رنگ را در CMYK تعریف میکنند، نشاندهنده درصد جوهر یک رنگ معین است که ترکیب رنگ را میسازد، یا بهتر است بگوییم، اندازه نقطه شطرنجی نمایش داده شده روی فتوتایپتر روی فیلم این رنگ (یا مستقیماً روی رنگ) صفحه چاپ در مورد CTP).
به عنوان مثال، برای به دست آوردن رنگ "PANTONE 7526" باید 9 قسمت فیروزه ای، 83 قسمت سرخابی، 100 قسمت زرد و 46 قسمت سیاه را با هم مخلوط کنید. این را می توان به صورت زیر نشان داد: (9،83،100،46). گاهی اوقات آنها از چنین عناوینی استفاده می کنند: C9M83Y100K46، یا (9٪، 83٪، 100٪، 46٪)، یا (0.09 / 0.83 / 1.0 / 0.46).
HSB/HSV
HSB (همچنین به عنوان HSV شناخته می شود) شبیه HSL است، اما آنها دو مدل رنگ متفاوت هستند. آنها هر دو بر اساس هندسه استوانه ای هستند، اما HSB/HSV بر اساس مدل "هگزاکون" است در حالی که HSL بر اساس مدل "دو هگزاکون" است. هنرمندان اغلب ترجیح می دهند از این مدل استفاده کنند، به طور کلی پذیرفته شده است که دستگاه HSB / HSV به درک رنگ طبیعی نزدیکتر است. به طور خاص، مدل رنگ HSB در فتوشاپ استفاده می شود.
HSB / HSV مخفف Hue (رنگ / رنگ)، Saturation (اشباع)، Brightness / Value (روشنایی / ارزش) است.
Hue موقعیت رنگ را در چرخه رنگ (از 0 تا 360) تنظیم می کند. اشباع یک مقدار درصد اشباع (از 0٪ تا 100٪) است. روشنایی درصدی از روشنایی (از 0٪ تا 100٪) است.
XYZ
مدل رنگ XYZ (CIE 1931 XYZ) یک فضای کاملاً ریاضی است. برخلاف مدلهای RGB، CMYK و سایر مدلها، در XYZ اجزای اصلی "تخیلی" هستند، به این معنی که نمیتوانید X، Y و Z را به هر مجموعه رنگ ترکیبی نگاشت کنید. XYZ مدل اصلی تقریباً برای تمام مدل های رنگی دیگر است که در زمینه های فنی استفاده می شود.
آزمایشگاه
مدل رنگ LAB (CIELAB، "CIE 1976 L*a*b*") از فضای CIE XYZ محاسبه می شود. هدف آزمایشگاه ایجاد فضای رنگی بود که در آن تغییر رنگ از نظر درک انسان خطی تر باشد (در مقایسه با XYZ)، یعنی همان تغییر در مقادیر مختصات رنگ در مناطق مختلف فضای رنگ ایجاد شود. همان احساس تغییر رنگ
برای تعیین رنگ ها از اعداد هگزادسیمال استفاده می شود. سیستم هگزادسیمال بر خلاف سیستم اعشاری، همانطور که از نامش پیداست، بر اساس عدد 16 است. اعداد به صورت زیر خواهند بود: 0، 1، 2، 3، 4، 5، 6، 7، 8، 9، A , B, C , D, E, F. اعداد از 10 تا 15 با حروف لاتین جایگزین می شوند. اعداد بزرگتر از 15 در سیستم هگزادسیمال از ترکیب دو عدد در یک عدد تشکیل می شوند. به عنوان مثال، عدد 255 در اعشار با عدد FF در هگزادسیمال مطابقت دارد. برای جلوگیری از سردرگمی در تعریف سیستم اعداد، قبل از عدد هگزادسیمال علامت هش #، به عنوان مثال #666999 قرار می گیرد. هر یک از سه رنگ - قرمز، سبز و آبی - می توانند مقادیری از 00 تا FF داشته باشند. بنابراین، تعیین رنگ به سه جزء #rrggbb تقسیم میشود که دو کاراکتر اول جزء قرمز رنگ، دو کاراکتر میانی سبز و دو کاراکتر آخر علامت آبی را نشان میدهند. استفاده از شکل اختصاری #rgb مجاز است که هر کاراکتر باید دو برابر شود. بنابراین، ورودی #fe0 باید به عنوان #ffee00 در نظر گرفته شود.
بر اساس اسم
اینترنت اکسپلورر
کروم
اپرا
سافاری
فایرفاکس
اندروید
iOS
4.0+
1.0+
3.5+
1.3+
1.0+
1.0+
1.0+
مرورگرها برخی از رنگ ها را با نام پشتیبانی می کنند. روی میز. 1 نام ها، کد هگزا، مقادیر در فرمت RGB، HSL و توضیحات را نشان می دهد.
Tab. 1. نام رنگ
نام
رنگ
کد
RGB
HSL
شرح
سفید
#فففف یا #ففف
rgb(255,255,255)
hsl (0.0%, 100%)
سفید
نقره
#c0c0c0
rgb(192,192,192)
hsl (0.0%, 75%)
خاکستری
خاکستری
#808080
rgb(128,128,128)
hsl(0.0%,50%)
خاکستری تیره
سیاه
#000000 یا #000
rgb(0,0,0)
hsl(0,0%,0%)
مشکی
مارون
#800000
rgb(128,0,0)
hsl(0,100%,25%)
قرمز تیره
قرمز
#ff0000 یا #f00
rgb(255,0,0)
hsl(0,100%,50%)
قرمز
نارنجی
#ffa500
rgb(255,165,0)
hsl(38.8,100%, 50%)
نارنجی
رنگ زرد
#ffff00 یا #ff0
rgb(255,255,0)
hsl(60,100%,50%)
رنگ زرد
زیتون
#808000
rgb(128,128,0)
hsl(60,100%, 25%)
زیتون
اهک
#00ff00 یا #0f0
rgb(0,255,0)
hsl(120,100%,50%)
سبز روشن
سبز
#008000
rgb(0,128,0)
hsl(120,100%, 25%)
سبز
آبی
#00ffff یا #0ff
rgb(0,255,255)
hsl(180,100%, 50%)
آبی
آبی
#0000ff یا #00f
rgb(0,0,255)
hsl(240,100%, 50%)
آبی
نیروی دریایی
#000080
rgb(0,0,128)
hsl(240,100%, 25%)
آبی تیره
رنگ آبی
#008080
rgb(0,128,128)
hsl(180,100%, 25%)
سبز آبی
فوشیا
#ff00ff یا #f0f
rgb(255,0,255)
hsl(300,100%, 50%)
رنگ صورتی
رنگ بنفش
#800080
rgb(128,0,128)
hsl(300,100%, 25%)
بنفش
با RGB
اینترنت اکسپلورر
کروم
اپرا
سافاری
فایرفاکس
اندروید
iOS
5.0+
1.0+
3.5+
1.3+
1.0+
1.0+
1.0+
شما می توانید یک رنگ را با استفاده از مقادیر قرمز، سبز و آبی به صورت اعشاری تعریف کنید. هر یک از سه جزء رنگی از 0 تا 255 مقدار می گیرند. همچنین تنظیم رنگ به عنوان درصد قابل قبول است، در حالی که 100٪ با عدد 255 مطابقت دارد. ابتدا کلمه کلیدی rgb مشخص می شود و سپس اجزای رنگ مشخص می شوند. در پرانتز مشخص شده و با کاما از هم جدا شده اند، برای مثال rgb(255، 128، 128) یا rgb(100٪، 50٪، 50٪).
RGBA
اینترنت اکسپلورر
کروم
اپرا
سافاری
فایرفاکس
اندروید
iOS
9.0+
1.0+
10.0+
3.1+
3.0+
2.1+
2.0+
فرمت RGBA از نظر نحو شبیه به RGB است، اما شامل یک کانال آلفا است که شفافیت عنصر را تعیین می کند. مقدار 0 کاملاً شفاف، 1 مات و مقدار میانی مانند 0.5 نیمه شفاف است.
RGBA به CSS3 اضافه شده است، بنابراین اعتبار کد CSS باید مطابق این نسخه انجام شود. لازم به ذکر است که استاندارد CSS3 هنوز در دست توسعه است و ممکن است برخی از ویژگی های آن تغییر کند. به عنوان مثال، یک رنگ RGB که به ویژگی background-color اضافه میشود، اعتبارسنجی را انجام میدهد، اما رنگی که به ویژگی پسزمینه اضافه میشود، تایید نمیشود. در عین حال، مرورگرها به درستی رنگ هر دو ویژگی را درک می کنند.
HSL
اینترنت اکسپلورر
کروم
اپرا
سافاری
فایرفاکس
اندروید
iOS
9.0+
1.0+
9.6+
3.1+
3.0+
2.1+
2.0+
نام فرمت HSL از ترکیب حروف اول Hue (رنگ)، Saturate (اشباع) و Lightness (سبک) تشکیل شده است. Hue مقدار رنگ در چرخه رنگ است (شکل 1) و بر حسب درجه مشخص می شود. 0 درجه قرمز، 120 درجه سبز و 240 درجه آبی است. مقدار رنگ می تواند از 0 تا 359 متفاوت باشد.
برنج. 1. چرخ رنگ
اشباع شدت یک رنگ است که به صورت درصدی از 0٪ تا 100٪ اندازه گیری می شود. مقدار 0٪ نشان دهنده عدم وجود رنگ و سایه خاکستری است، 100٪ حداکثر مقدار اشباع است.
Lightness میزان روشن بودن رنگ را تعیین می کند و به صورت درصدی از 0٪ تا 100٪ مشخص می شود. مقادیر کوچک رنگ را تیره تر می کند، در حالی که مقادیر زیاد آن را روشن تر می کند، مقادیر شدید 0٪ و 100٪ مربوط به سیاه و سفید است.
HSLA
اینترنت اکسپلورر
کروم
اپرا
سافاری
فایرفاکس
اندروید
iOS
9.0+
1.0+
10.0+
3.1+
3.0+
2.1+
2.0+
فرمت HSLA از نظر نحو شبیه به HSL است، اما شامل یک کانال آلفا است که شفافیت عنصر را تعیین می کند. مقدار 0 کاملاً شفاف، 1 مات و مقدار میانی مانند 0.5 نیمه شفاف است.
مقادیر رنگ در فرمتهای RGBA، HSL و HSLA به CSS3 اضافه میشوند، بنابراین هنگام استفاده از این فرمتها، اعتبار کد را در برابر نسخه بررسی کنید.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
رنگ ها
هشدار
تمامی روش های صید شیر درج شده در سایت بصورت تئوری و مبتنی بر روش های محاسباتی می باشد. نویسندگان ایمنی شما را هنگام استفاده از آنها تضمین نمی کنند و مسئولیت نتیجه را سلب می کنند. به یاد داشته باشید، شیر یک حیوان درنده و خطرناک است!