رنگ

پادکست CSS - 006: Color Part One

رنگ بخش مهمی از هر وب سایت است و در CSS گزینه های زیادی برای انواع رنگ ها، عملکردها و درمان ها وجود دارد.

چگونه تصمیم می گیرید از کدام نوع رنگ استفاده کنید؟ چگونه رنگ های خود را نیمه شفاف می کنید؟ در این درس، شما می خواهید یاد بگیرید که چه گزینه هایی برای کمک به تصمیم گیری درست برای پروژه و تیم خود دارید.

CSS دارای انواع داده های مختلف است، مانند رشته ها و اعداد. رنگ یکی از این انواع است و از انواع دیگری مانند اعداد برای تعاریف خود استفاده می کند.

رنگ های عددی

این احتمال وجود دارد که اولین مواجهه شما با رنگ ها در CSS از طریق رنگ های عددی باشد. ما می توانیم با مقادیر رنگ عددی به چند شکل مختلف کار کنیم.

رنگ های شش گوش

h1 {
  color: #b71540;
}

نماد هگزا دسیمال (اغلب به هگز کوتاه می شود) یک نحو مختصر برای RGB است که یک مقدار عددی را به قرمز سبز و آبی که سه رنگ اصلی هستند اختصاص می دهد.

محدوده هگزادسیمال 0-9 و AF است. هنگامی که در یک دنباله شش رقمی استفاده می شود، آنها به محدوده های عددی RGB که 0-255 هستند ترجمه می شوند که به ترتیب با کانال های رنگ قرمز، سبز و آبی مطابقت دارند.

شما همچنین می توانید یک مقدار آلفا را با هر رنگ عددی تعریف کنید. مقدار آلفا درصدی از شفافیت است. در کد هگز، دو رقم دیگر به دنباله شش رقمی اضافه می کنید و یک دنباله هشت رقمی می سازید. به عنوان مثال، برای تنظیم مشکی در کد هگز، #000000 را بنویسید. برای افزودن شفافیت 50٪، آن را به #00000080 تغییر دهید.

از آنجایی که مقیاس هگز 0-9 و AF است، مقادیر شفافیت احتمالاً آن چیزی نیست که شما انتظار دارید. در اینجا برخی از مقادیر کلیدی و رایج اضافه شده به کد هگز سیاه، #000000 آمده است:

• 0٪ آلفا - که کاملاً شفاف است - 00 : #00000000 است
• 50% آلفا 80 است: #00000080
• 75٪ آلفا BF است: #000000BF

برای تبدیل یک هگز دو رقمی به اعشار، رقم اول را در 16 ضرب کنید (چون هگز مبنای 16 است)، سپس رقم دوم را اضافه کنید. استفاده از BF به عنوان مثال برای 75% آلفا:

1. B برابر با 11 است که با ضرب در 16 برابر با 176 می شود
2. F برابر با 15 است
3. 176 + 15 = 191
4. مقدار آلفا 191-75٪ از 255 است

RGB (قرمز، سبز، آبی)

h1 {
  color: rgb(183, 21, 64);
}

رنگ‌های RGB با تابع رنگ rgb() با استفاده از اعداد یا درصد به عنوان پارامتر تعریف می‌شوند. اعداد باید در محدوده 0 تا 255 و درصدها بین 0 تا 100 درصد باشد. RGB در مقیاس 0-255 کار می کند، بنابراین 255 معادل 100٪ و 0 تا 0٪ خواهد بود.

برای تنظیم مشکی در RGB، آن را به صورت rgb(0 0 0) تعریف کنید که صفر قرمز، صفر سبز و صفر آبی است. سیاه همچنین می تواند به عنوان rgb(0%, 0%, 0%) تعریف شود. رنگ سفید دقیقاً برعکس است: rgb(255, 255, 255) یا rgb(100%, 100%, 100%) .

یک آلفا در rgb() به یکی از دو روش تنظیم می شود. یا یک / بعد از پارامترهای قرمز، سبز و آبی اضافه کنید یا از تابع rgba() استفاده کنید. آلفا را می توان با درصد یا اعشار بین 0 و 1 تعریف کرد. به عنوان مثال، برای تنظیم 50% سیاهی آلفا در مرورگرهای مدرن، بنویسید: rgb(0 0 0 / 50%) یا rgb(0 0 0 / 0.5) . برای پشتیبانی گسترده تر، با استفاده از تابع rgba() بنویسید: rgba(0, 0, 0, 50%) یا rgba(0, 0, 0, 0.5) .

HSL (رنگ، ​​اشباع، سبکی)

h1 {
  color: hsl(344, 79%, 40%);
}

HSL مخفف رنگ، اشباع و سبکی است. Hue مقدار چرخه رنگ را از 0 تا 360 درجه توصیف می کند که با قرمز شروع می شود (هر دو 0 و 360 است). رنگ 180 یا 50 درصد در محدوده آبی خواهد بود. منشا رنگی است که ما می بینیم.

اشباع به معنای پر جنب و جوش بودن رنگ انتخاب شده است. یک رنگ کاملاً غیراشباع (با اشباع 0% ) در مقیاس خاکستری ظاهر می شود. و در نهایت، روشنایی پارامتری است که مقیاس نور اضافه شده از سفید تا سیاه را توصیف می کند. سبکی 100% همیشه به شما رنگ سفید می دهد.

با استفاده از تابع رنگ hsl() با نوشتن hsl(0 0% 0%) یا حتی hsl(0deg 0% 0%) یک رنگ مشکی واقعی را تعریف می کنید. این به این دلیل است که پارامتر hue درجه را در چرخه رنگ مشخص می کند، که اگر از نوع عدد استفاده کنید، 0-360 است. همچنین می توانید از نوع زاویه استفاده کنید که ( 0deg ) یا (0turn) است. اشباع و سبکی هر دو با درصد تعریف می شوند.

آلفا در hsl() ، به همان شیوه rgb() با افزودن a / بعد از پارامترهای hue، saturation و lightness یا با استفاده از تابع hsla() تعریف می شود. آلفا را می توان با درصد یا اعشار بین 0 و 1 تعریف کرد. به عنوان مثال، برای تنظیم 50% آلفا سیاه، از: hsl(0 0% 0% / 50%) یا hsl(0 0% 0% / 0.5) استفاده کنید. hsl(0 0% 0% / 0.5) . با استفاده از تابع hsla() بنویسید: hsla(0, 0%, 0%, 50%) یا hsla(0, 0%, 0%, 0.5) .

کلمات کلیدی رنگی

148 رنگ نامگذاری شده در CSS وجود دارد. اینها اسامی ساده انگلیسی مانند بنفش، گوجه فرنگی و گلدنرود هستند. برخی از محبوب ترین نام ها، بر اساس وب سالنامه ، سیاه، سفید، قرمز، آبی و خاکستری هستند. موارد مورد علاقه ما عبارتند از goldenrod، aliceblue، و hotpink.

علاوه بر رنگ‌های استاندارد، کلیدواژه‌های خاصی نیز وجود دارد:

• transparent یک رنگ کاملا شفاف است. همچنین مقدار اولیه background-color است
• currentColor مقدار دینامیکی محاسباتی متنی ویژگی color است. اگر رنگ متن red داشته باشید و سپس border-color روی currentColor تنظیم کنید، آن نیز قرمز خواهد بود. اگر عنصری که بر روی آن currentColor تعریف می‌کنید مقداری برای color تعریف شده نداشته باشد، در عوض currentColor توسط آبشار محاسبه می‌شود.

محل استفاده از رنگ در قوانین CSS

اگر یک ویژگی CSS نوع داده <color> را به عنوان مقدار بپذیرد، هر یک از روش های بالا را برای بیان رنگ می پذیرد. برای استایل دادن به متن، از ویژگی های color ، text-shadow و text-decoration-color استفاده کنید که همگی رنگ را به عنوان مقدار یا رنگ را به عنوان بخشی از مقدار می پذیرند.

برای پس‌زمینه، می‌توانید یک رنگ را به عنوان مقدار background یا background-color تنظیم کنید. رنگ ها را می توان در شیب ها نیز استفاده کرد، مانند linear-gradient . گرادیان ها نوعی از تصویر هستند که می توانند به صورت برنامه نویسی در CSS تعریف شوند. گرادیان دو یا چند رنگ را در هر ترکیبی از فرمت رنگی مانند hex، rgb یا hsl می پذیرد.

در نهایت، border-color و outline-color رنگ حاشیه‌ها و خطوط را روی جعبه‌های شما تنظیم می‌کنند. ویژگی box-shadow نیز رنگ را به عنوان یکی از مقادیر می پذیرد.

درک خود را بررسی کنید

دانش خود را از رنگ تست کنید

منابع

• نسخه ی نمایشی مفیدی که نشان می دهد چگونه می توانید از زاویه ها با HSL استفاده کنید
• راهنمای جامع رنگ
• راهنمای جامع در مورد رنگ های گسترده
• [ویدئو] توضیحی در مورد نحوه خواندن کدهای هگز
• نحوه کار کدهای هگزادسیمال