از نام‌ها گرفته تا هگز تا rgb و hsl، راه‌های زیادی را کشف کنید که CSS به شما امکان می‌دهد رنگ را توصیف کنید.
نکات کلیدی
- استفاده از نام های رنگی: CSS 145 نام رنگ را برای انتخاب رنگ آسان و مبتدی ارائه می دهد، اما گزینه ها محدود هستند و ممکن است نیازهای طراحی دقیق را برآورده نکنند.
- کدهای رنگ هگزا دسیمال: کدهای هگز طیف وسیعی از گزینه های رنگی و سفارشی سازی دقیق را ارائه می دهند، اگرچه استفاده و به خاطر سپردن آنها کمتر بصری هستند.
- مقادیر رنگ RGB و RGBA: RGB امکان کنترل دقیق رنگ با مقادیر عددی را فراهم می کند، در حالی که RGBA شفافیت را اضافه می کند. اطمینان از ترکیب رنگ در دسترس مهم است.
رنگ‌ها یکی از متداول‌ترین ویژگی‌های CSS هستند که نقشی حیاتی در شکل‌دهی هویت بصری، خلق و خو و تجربه کاربری وب‌سایت دارند. CSS مجموعه‌ای از انتخاب‌ها را برای استفاده از رنگ ارائه می‌دهد که هر کدام برای نیازها و ترجیحات طراحی خاص طراحی شده‌اند.
در حالی که نادیده گرفتن اهمیت تعریف رنگ آسان است، انتخاب های شما می تواند به طور قابل توجهی بر ظاهر و احساس وب سایت شما تأثیر بگذارد. بررسی تفاوت‌های بین روش‌های مختلف و نحوه اعمال و ترکیب عملی آنها، توانایی شما را برای ایجاد وب‌سایت‌های جذاب بصری افزایش می‌دهد.
1. استفاده از نام رنگ
CSS روشی مفید برای تعریف رنگ ها با استفاده از نام ها ارائه می دهد و 145 گزینه در دسترس است. این نام‌های رنگی از ساده «قرمز»، «سبز» و «آبی» تا سایه‌های خاص‌تری مانند «مرجانی» یا «اسطوخودوس» متغیر است.
استفاده از رنگ‌های نامگذاری شده ساده است: شما نام رنگی مانند قرمز را انتخاب می‌کنید و از آن در یک ویژگی CSS استفاده می‌کنید که از مقادیر رنگ پشتیبانی می‌کند. این ویژگی‌ها شامل رنگ واضح و رنگ پس‌زمینه، و همچنین رنگ حاشیه، طرح کلی، رنگ و متن سایه و غیره است.
زمانی که به یک رنگ موقت برای نمونه سازی نیاز دارید یا می خواهید کد خود را به راحتی بخوانید، نام رنگ ها مفید هستند. در اینجا نحو است:
color_property: color_name;
در این مورد، به سادگی color_name را با رنگ خاصی که می خواهید استفاده کنید جایگزین کنید. به عنوان مثال، اگر می خواهید رنگ متن یک پاراگراف را قرمز کنید، بنویسید:
p {
color: red;
}
این به پاراگراف های شما رنگ متن قرمز می دهد:
مزایا: خواندن و درک آنها در کد CSS شما آسان است. آنها برای مبتدیان مناسب هستند، در مرورگرها به خوبی کار می کنند، و برای ایده های طراحی سریع مفید هستند.
معایب: آنها گزینه های محدودی دارند و ممکن است سایه های دقیق مورد نیاز شما را ارائه ندهند که خلاقیت طراحی را محدود می کند. علاوه بر این، ممکن است همیشه الزامات دسترسی دقیق را برآورده نکنند، و پشتیبانی در سیستم‌های قدیمی‌تر می‌تواند متفاوت باشد.
2. کدهای رنگ هگزادسیمال
کدهای رنگ هگزا دسیمال که اغلب به آنها “کدهای هگز” گفته می شود، رایج ترین روش های تعیین رنگ ها در طراحی وب هستند. این کدها از ترکیب شش کاراکتری از اعداد و حروف (0-9، A-F) تشکیل شده‌اند که ترکیبی از اجزای قرمز، سبز و آبی (RGB) را در یک رنگ نشان می‌دهند.
در حالی که استفاده از آنها آسان است، درک نحوه عملکرد آنها می تواند چالش برانگیز باشد. می توانید برای درک بهتر کدهای هگز را عمیقاً بررسی کنید. در اینجا یک مثال اساسی از نحوه استفاده از کدهای هگزا در CSS آورده شده است:
color: #RRGGBB;
در این فرمت، RR، GG و BB به ترتیب نشان دهنده اجزای قرمز، سبز و آبی هستند. هر جزء می تواند از 00 (بدون شدت) تا FF (حداکثر شدت) متغیر باشد. برای مثال، اگر می‌خواهید رنگ پس‌زمینه هدر یک وب‌سایت را روی یک سایه آبی خاص تنظیم کنید، می‌توانید از یک کد هگز مانند زیر استفاده کنید:
header {
background-color: #336699;
}
این یک رنگ آبی تیره ایجاد می کند:
را
همچنین اگر هر یک از سه جزء یک کاراکتر را دو بار تکرار کند، می‌توانید از کوتاه‌نویسی استفاده کنید. می توانید مثال بالا را به صورت زیر بنویسید:
header {
background-color: #369;
}
مزایا: کدهای رنگ هگزادسیمال طیف گسترده ای از گزینه های رنگی را ارائه می دهند که به شما امکان می دهد سایه های دقیق و سفارشی ایجاد کنید. آنها کنترل صافی را بر انتخاب رنگ ارائه می دهند و آنها را برای الزامات طراحی پیچیده ایده آل می کنند.
معایب: اگرچه کدهای هگز قدرتمند هستند، اما نسبت به رنگ های نامگذاری شده کمتر بصری هستند. همچنین ممکن است با چالش به خاطر سپردن مقادیر خاص رنگ مواجه شوید. خوشبختانه، ابزارهایی برای یافتن کدهای هگز رنگی که با آنها روبرو می شوید در دسترس هستند و این فرآیند را قابل کنترل تر می کند.
3. مقادیر رنگ RGB و RGBA
مانند کدهای هگزادسیمال، این فرمت به شما امکان می دهد رنگ ها را بر اساس اجزای قرمز، سبز و آبی آنها مشخص کنید. اما این بار می توانید از اعداد صحیح دوستانه استفاده کنید.
مقادیر رنگ RGB
مقادیر رنگ RGB دومین روش رایج برای تعریف رنگ ها در CSS است. “RGB” نشان دهنده قرمز، سبز و آبی است که به عنوان یک تابع CSS با پرانتزهای زیر آن بیان می شود. در داخل پرانتز، مقادیری را به هر کانال رنگی از 0 تا 255 اختصاص می دهید. این به شما امکان می دهد شدت قرمز، سبز و آبی را در رنگی که می خواهید استفاده کنید کنترل کنید.
در اینجا نحو است:
rgb(red_value, green_value, blue_value);
مقادیر red_value، green_value و blue_value را با مقادیر عددی مربوطه جایگزین کنید. به عنوان مثال، می توانید به رنگ های سفید، سیاه و قرمز مانند آنچه در این تصویر نشان داده شده است، دست پیدا کنید:
وقتی هر سه کانال رنگی (قرمز، سبز و آبی) را روی حداکثر مقدارشان 255 تنظیم می کنید، بیشترین شدت را برای هر کانال ایجاد می کنید و رنگ سفید را ایجاد می کنید:
.white-box {
color: rgb(255, 255, 255);
}
وقتی هر سه کانال رنگی را روی حداقل مقدار 0 تنظیم می کنید، نشان دهنده عدم وجود رنگ در هر کانال و در نتیجه سیاه است.
.black-box {
color: rgb(0, 0, 0);
}
با تنظیم کانال قرمز بر روی حداکثر مقدار آن 255، در حالی که کانال های دیگر در مقدار حداقل 0 خود نگه داشته می شوند، رنگ قرمز تولید می شود:
.red-box {
color: rgb(255, 0, 0);
}
مقادیر رنگ RGBA
RGBA مانند RGB عمل می کند، تنها تفاوت در گنجاندن مقدار آلفا است. “A” در RGBA مخفف آلفا است که سطح شفافیت یا کدورت رنگ انتخابی را تعیین می کند. مقدار 0 نشان دهنده شفافیت کامل است که رنگ را کاملاً نامرئی می کند، در حالی که مقدار 1 نشان دهنده کدورت کامل است و رنگ را کاملاً قابل مشاهده می کند.
RGBA مخصوصاً زمانی مفید است که می‌خواهید عناصری با سطوح مختلف شفافیت ایجاد کنید، مانند پس‌زمینه شفاف یا متن محو شده. نحو کامل این است:
color: rgba(red_value, green_value, blue_value, alpha_value);
در اینجا، red_value، green_value و blue_value کانال های رنگی را مانند RGB نشان می دهند و alpha_value سطح شفافیت را مشخص می کند.
div {
background-color: rgba(0, 128, 0, 0.5);
}
در این مثال، مقدار آلفای 0.5 شفافیت 50% را به رنگ سبز اختصاص می دهد و به محتوای زیر آن اجازه می دهد تا از طریق:
مزایا: RGB و RGBA به شما امکان می دهند رنگ ها را با دقت کنترل کنید و انتخاب سایه های دقیق و ایجاد طرح های بصری جذاب را آسان تر می کند. آنها با مرورگرهای مختلف وب سازگار هستند و اطمینان حاصل می کنند که رنگ های انتخابی شما یکدست به نظر می رسند.
معایب: چالش در حصول اطمینان از ترکیب رنگ های قابل دسترس نهفته است. توجه به نسبت کنتراست، به ویژه هنگام کار با شفافیت در RGBA بسیار مهم است. دستورالعمل های WCAG می تواند به شما کمک کند تا اطمینان حاصل کنید که طرح شما در دسترس است.
4. مقادیر رنگ HSL و HSLA
HSL – مخفف Hue، Saturation و Lightness – یکی دیگر از تابع های CSS است که رنگ ها را تعریف می کند. مانند RGB، HSL از مقادیر عددی برای نشان دادن رنگ ها استفاده می کند، اما این کار را متفاوت انجام می دهد. ممکن است با مقادیر HSL از اجزای UI در برنامه های طراحی و جاهای دیگر آشنا باشید.
Hue: این خود رنگ را با استفاده از درجات روی یک چرخ رنگ، از 0 تا 360 نشان می دهد. تصور کنید که نقطه ای از یک دایره را انتخاب می کند، جایی که هر درجه مربوط به رنگ متفاوتی است. به عنوان مثال، 0 و 360 درجه برای قرمز، 120 درجه برای سبز، و 240 درجه برای آبی.
اشباع: اشباع، زنده بودن یا شدت رنگ را تعیین می کند. رابطه رنگ با خاکستری را مشخص می کند، به طوری که 0٪ کاملاً خاکستری (غیراشباع) و 100٪ کاملاً اشباع شده (سرزنده و خالص) است.
روشنایی: روشنایی نشان دهنده میزان روشن یا تیره بودن رنگ است. این مربوط به موقعیت رنگ در طیف بین سیاه (0٪) و سفید (100٪) است. مقدار 50% رنگ معمولی را نشان می دهد، در حالی که مقادیر زیر 50% رنگ را تیره می کند و مقادیر بالای 50% آن را روشن می کند.
علاوه بر HSL، HSLA نیز وجود دارد که در آن “A” مخفف “آلفا” است. این شبیه به “A” در RGBA است و به معنای شفافیت است.
در اینجا نحو است:
color: hsl(hue_value, saturation_percentage, lightness_percentage);
با استفاده از این نحو، hue_value، saturation_percentage و lightness_percentage را با مقادیر خاصی که برای هر جزء می خواهید جایگزین کنید. مثلا:
div {
background-color: hsl(120, 100%, 50%);
}
در این مثال، رنگ پس‌زمینه یک عنصر div با استفاده از مقادیر HSL روی سبز پر جنب و جوش تنظیم شده است. 120 نشان دهنده رنگ (سبز)، 100٪ برای اشباع کامل است، و 50٪ روشنایی را در سطح متعادل تنظیم می کند.
مزایا: HSL و HSLA محاسبات رنگی همه کاره را با استفاده از ویژگی های سفارشی CSS ارائه می دهند. آنها بسیار با مرورگرهای مدرن سازگار هستند و تنظیم آسان برای روشنایی رنگ را امکان پذیر می کنند.
معایب: یادگیری HSL مستلزم درک علم رنگ، مانند رنگ‌ها و اشباع‌ها است که می‌تواند چالش‌برانگیزتر از رنگ‌های آشنای RGB باشد.
استقبال از قدرت رنگ های CSS
روش‌های بیشتری وجود دارد که می‌توانید بررسی کنید، و در حالی که در حال بررسی قالب‌های مختلف برای تعریف رنگ‌ها در CSS هستید، به خاطر داشته باشید که قدرت شکل دادن به ظاهر، حالت و تجربه کاربری وب‌سایت خود را دارید.
انتخاب فرمت رنگ شما – چه نام رنگ های ساده، کدهای هگزا دسیمال، RGB یا HSL باشد – می تواند بر نحوه درک مخاطبان از سایت شما تأثیر بگذارد. بنابراین، آزمایش کنید، یاد بگیرید و تعاریف رنگی را پیدا کنید که به بهترین وجه با اهداف طراحی شما مطابقت دارد.