رنگ

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

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

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

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

انتخاب رنگ

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

ساده ترین راه برای انتخاب یک رنگ، انتخاب یکی از 148 رنگ نامگذاری شده در CSS است. اینها اسامی ساده انگلیسی مانند purple ، tomato و goldenrod هستند. برخی از محبوب ترین نام ها، بر اساس وب سالنامه ، black ، white ، red ، blue و gray هستند. موارد مورد علاقه ما عبارتند از goldenrod , aliceblue , و hotpink .

رنگ های عددی

در حالی که رنگ‌های نام‌گذاری شده می‌توانند راحت باشند، احتمالاً باید از رنگ‌های خاصی استفاده کنید که در آن مجموعه موجود نیست. می توانید رنگ ها را با مقادیر عددی به چند شکل مختلف مشخص کنید.

رنگ های شش گوش

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) .

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) استفاده کنید. با استفاده از تابع hsla() بنویسید: hsla(0, 0%, 0%, 50%) یا hsla(0, 0%, 0%, 0.5) .

رنگ های با وضوح بالا

RGB و HSL رنگ ها را در محدوده sRGB تعریف می کنند. مانیتورهای جدیدتر از رنگ‌های بسیار بیشتری نسبت به آنچه که با این فرمت‌ها توصیف می‌شود، و خارج از محدوده sRGB پشتیبانی می‌کنند. شما می توانید این رنگ ها را با انواع توابع CSS انتخاب کنید.

تابع color() .

h1 {
  color: color(srgb 0.9 0.2 0.4);
}

تابع CSS color() به شما امکان می دهد رنگی را در یک فضای رنگی خاص انتخاب کنید. اولین آرگومان فضای رنگی مورد استفاده است که گزینه های کانال های زیر را مشخص می کند. مانند rgb() ، می توانید کانال آلفا را با تنظیم یک عدد بین 0 و 1 یا یک درصد بعد از a / تنظیم کنید.

به عنوان مثال، رنگ قرمز تیره RGB در قطعه کد قبلی، که به عنوان rgb(183 21 64) تعریف شده است، می تواند با درصدهایی به عنوان rgb(72% 8% 25%) تعریف شود. می‌توانید از تابع color() با کلمه کلیدی srgb برای تعیین رنگ مشابه با color(srgb .72 .08 .25) استفاده کنید.

srgb فضای رنگی را تنظیم می کند و به ما می گوید که سه آرگومان بعدی قرمز، سبز و آبی هستند. مقادیر به جای 0 تا 255 از 0 به 1 می روند.

مشابه rgb() می توانیم آلفا را با یک / و یک درصد یا اعشار بین 0 و 1 تنظیم کنیم.

فضاهای رنگی زیادی وجود دارد که می توانید با تابع color() از آنها استفاده کنید که هر کدام نقاط قوت و موارد استفاده متفاوتی دارند.

صفحه نمایش P3

h1 {
  color: color(display-p3 0.9 0.2 0.4);
}

وسعت صفحه نمایش P3 50 درصد بیشتر از sRGB رنگ دارد. با استفاده از تابع color() می توانید تمام رنگ ها را در وسعت Display P3 با فضای رنگی Display P3 مشخص کنید.

برای تنظیم مشکی در نمایشگر P3، آن را به صورت color(display-p3 0 0 0) تعریف کنید. پس از تعیین فضای رنگی display-p3 برای تابع color() ، سه کانال دارید: قرمز، سبز و آبی، شبیه به color(srgb) . اما از آنجایی که مقادیر کانال مختصات را در یک فضای رنگی وسیع‌تر نشان می‌دهند، مقادیر کانال یکسان به معنای چیزهای متفاوتی خواهد بود.

color(srgb 1 .5 0) یک رنگ نارنجی است که معادل color(display-p3 0.93596 0.52724 0.1983) . ما می‌توانیم با گسترش آن از فضای sRGB به color(display-p3 1 .5 0) پرتقال را زنده‌تر کنیم.

اوکلاب

Oklab با تابع oklab() با کانال های Lightness، a و b تعریف می شود. برای ایجاد شیب های صاف و تنظیم اشباع رنگ، در عین حفظ رنگ و روشنی مفید است.

h1 {
  color: oklab(75% 0.1 0.1)
}

کانال سبکی از 0 به 1 یا 0% تا 100% می رود. رنگ هایی با روشنایی 0 همیشه سیاه خواهند بود.

کانال a از -0.4 به 0.4 یا 0% تا 100% می رود. مقادیر پایین تر سبزتر هستند و مقادیر بالاتر قرمز تر هستند.

کانال b از -0.4 به 0.4 یا 0% تا 100% می رود. مقادیر پایین‌تر آبی‌تر و مقادیر بالاتر زردتر هستند.

OkLCh

OkLCh شکل قطبی یا استوانه‌ای OKLab است و با کانال‌های Lightness، Chroma و Hue تعریف می‌شود. برای تنظیم رنگ ها به روش ادراکی یکنواخت مفید است. این به این معنی است که تغییرات در رنگ تأثیری بر روشن شدن یا اشباع شدن یک رنگ ندارد.

h1 {
  color: oklch(80% 0.1 200)
}

شما با سبکی و رنگ در HSL کار کرده‌اید، و chroma شبیه به اشباع است. می توانید مشکی را با oklch(0 0 0) و سفید را با oklch(1 0 0) ست کنید.

کانال سبکی از 0 به 1 یا 0% تا 100% می رود. رنگ هایی با روشنایی 0 همیشه سیاه خواهند بود.

کانال chroma تعیین می کند که یک رنگ چقدر پر جنب و جوش باشد - 0 یا 0٪ غیراشباع می شود و مقادیر بالاتر رنگ بیشتری خواهند داشت. مقدار 100% همان .4 است، اما می توان به سرعت با مقادیر نزدیک به .4 از محدوده خارج شد.

Hue دقیقاً مانند hsl() بر حسب درجه مشخص می شود.

OkLCh با محدوده ای مانند Display P3 محدود نمی شود، بنابراین باید مطمئن شوید که رنگ هایی را می سازید که قابل نمایش باشند. oklch(80% 50% 200) آبی روشن است که از نظر عددی رنگی معقول به نظر می رسد، اما خارج از محدوده نمایشگر P3 است.

فضاهای دیگر

راه های زیادی برای تعیین رنگ ها در CSS وجود دارد و نیازی نیست همه آنها را یاد بگیرید. فرمت‌های rgb() و Hex معمولاً در ابزارهای طراحی و در کدهای موجود استفاده می‌شوند و دانستن آنها مفید است. همچنین آشنایی با قالبی که بتوان آن را به طور قابل پیش بینی دستکاری کرد، مفید است. شما می توانید مقادیر hsl یا oklch را مستقیماً تغییر دهید و حس کنید که رنگ حاصل چه خواهد بود.

در دسترسی به رنگ‌ها و فضاهای جدید بیشتر بخوانید.

رنگ های سیستم

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

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

دستکاری رنگ ها

در حالی که ممکن است پالت رنگی برای استفاده در سایت خود داشته باشید، ممکن است به انواع آن رنگ ها برای حالت های شناور، مرزها و سایر عناصر رابط کاربری نیاز داشته باشید. شما می توانید هر رنگ را مشخص کنید، اما CSS همچنین راه هایی برای تبدیل رنگ ها برای ایجاد این گونه ها ارائه می دهد.

color-mix()

برای استفاده از نتیجه ترکیب دو رنگ، می توانید از متد color-mix() استفاده کنید. این برای ترکیب یک رنگ با سفید یا سیاه برای ایجاد یک نوع روشن تر یا تیره تر مفید است.

برای استفاده از color-mix() باید دو رنگ را تعریف کنید، اینکه چگونه می خواهید ترکیب شوند (روش درون یابی)، و چه مقدار از هر رنگ را می خواهید.

برای فضاهای رنگی که دارای رنگ هستند، شما همچنین می توانید تصمیم بگیرید که از کدام سمت دور چرخه رنگ بروید. پیش‌فرض استفاده از مسیر shorter است، اما می‌توانید longer یا increasing و decreasing نیز انتخاب کنید.

فضای رنگ و جهت با هم روش درون یابی هستند.

شما همچنین می توانید مقدار هر رنگ را برای مخلوط کردن ارائه دهید.

نحو نسبی رنگ

همچنین می‌توانید با استفاده از نحو نسبی رنگ، مستقیم‌تر با یک رنگ کار کنید، که به شما امکان می‌دهد هر رنگی را بگیرید و محاسباتی را روی آن انجام دهید تا رنگ جدیدی ایجاد کنید.

h1 {
  color: oklch(from red l c h);
}

استفاده از تابع oklch() به این معنی است که با کانال های lightness، chroma و hue کار خواهید کرد. بعد از کلمه کلیدی from شما می توانید هر رنگی را در هر نحوی مشخص کنید. سپس به شما مقدار هر کانال را می دهد تا به عنوان یک حرف استفاده کنید. این به رنگ قرمز تبدیل می شود، بدون هیچ گونه تنظیمات.

برای انجام تنظیمات، می توانید از تابع calc() برای تغییر مقادیر کانال استفاده کنید یا فقط کانال را به طور کامل جایگزین کنید. در اینجا ما از همان رنگ red استفاده می کنیم، اما آن را با oklch(62% 0.25 29) .

h1 {
  color: oklch(from oklch(62% 0.25 29) calc(l / 2) c 180);
}

کانال روشنایی 62% / 2 یا 31% است. کانال کروما بدون تغییر است، بنابراین 0.25 است. کانال رنگ 180 است. این رنگ جدید oklch(31% 0.25 180) را ایجاد می کند، یک رنگ سبز تیره جدید.

شما اغلب از یک ویژگی سفارشی به عنوان رنگ ورودی استفاده می کنید. این به شما امکان می دهد تغییرات رنگی را به صورت پویا ایجاد کنید.

شما می توانید این کار را با هر تابع رنگی انجام دهید، و انجام این کار با توابع رنگی که دارای کانال هایی هستند که تغییراتی را که می خواهید انجام دهید را توصیف می کنند مفید است. به عنوان مثال، اگر می خواهید روشنایی یک رنگ را تنظیم کنید، oklch یا hsl انتخاب کنید، زیرا می توانید مستقیماً کانال روشنایی را تغییر دهید.

h1 {
  color: oklch(from var(--primary-color) calc(l * 0.9) c h);
}

با استفاده از Relative Color Syntax یا RCS، می‌توانید یک پالت رنگی برای استفاده در سایت خود ایجاد کنید.

خارج از طیف رنگ

محتوای شما در صفحه‌های مختلف نمایش داده می‌شود که ممکن است از رنگ‌های گسترده پشتیبانی کنند یا نباشند. اگر رنگی را مشخص کنید که توسط یک صفحه پشتیبانی نمی شود، فرآیندی به نام gamut mapping را طی می کند تا رنگ مشابهی را پیدا کند که می تواند روی صفحه نمایش داده شود. اگر می‌خواهید رنگ‌های خاصی را در آن موارد تعریف کنید، می‌توانید از پرس و جو رسانه color-gamut استفاده کنید.

محل استفاده از رنگ در قوانین 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 استفاده کنید
• راهنمای جامع رنگ
• راهنمای جامع در مورد رنگ های گسترده
• [ویدئو] توضیحی در مورد نحوه خواندن کدهای هگز
• نحوه کار کدهای هگزادسیمال