باز کردن قدرت توابع رنگی مدرن CSS: تاریخچه، کاربردها و کاربردهای عملی

Summarize this content to 400 words in Persian Lang
توابع رنگی CSS یک جعبه ابزار قوی برای تعریف و دستکاری رنگ ها در طراحی وب در اختیار توسعه دهندگان قرار می دهد. این توابع انعطاف‌پذیری و دقت را ارائه می‌دهند و به شما امکان می‌دهند طرح‌های پویا و از نظر بصری جذاب ایجاد کنید. این مقاله به تاریخچه توابع رنگی CSS، مسائلی که آنها قصد حل آنها را دارند، و نحوه استفاده موثر از آنها می پردازد.

تاریخچه مختصری از توابع رنگ CSS

در ابتدا، CSS مجموعه محدودی از روش‌ها را برای تعریف رنگ‌ها، مانند رنگ‌های نام‌گذاری شده و نمادهای هگزادسیمال ارائه کرد. در حالی که این روش‌ها ساده و مؤثر بودند، اما فاقد انعطاف‌پذیری و دقت لازم برای نیازهای طراحی پیچیده‌تر بودند. با تکامل طراحی وب، نیاز به تکنیک های پیشرفته تر دستکاری رنگ نیز افزایش یافت.

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

توابع رنگی CSS مدرن چه مشکلاتی را حل می کنند؟

1. یکنواختی ادراکی: مدل‌های رنگی سنتی مانند RGB و HSL درک انسان از تفاوت‌های رنگی را در نظر نمی‌گیرند. توابع مدرن مانند lab()، lch()، و oklch() به گونه ای طراحی شده اند که از نظر ادراکی یکنواخت باشند، به این معنی که تغییرات در مقادیر رنگ بیشتر با نحوه درک ما از این تغییرات مطابقت دارد.

2. تنظیمات رنگ پویا: کارکردهایی مانند color-mix() و color-contrast() ابزارهایی را برای تنظیم پویا رنگ ها بر اساس محیط اطرافشان فراهم می کند که خوانایی بهتر و هماهنگی بصری را تضمین می کند.

3. سازگاری و پیش بینی پذیری: عملکردهای مدرن نتایج سازگارتر و قابل پیش بینی تری را هنگام ترکیب و تطبیق رنگ ها ارائه می دهند که برای ایجاد طرح های منسجم بسیار مهم است.

4. دسترسی: عملکردهای رنگی بهبود یافته به ایجاد طرح‌های در دسترس کمک می‌کنند و تضمین کنتراست کافی و تمایز رنگ‌ها را آسان‌تر می‌کنند.

نمای کلی توابع رنگ CSS

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

CSS از انواع رنگ های با نام از پیش تعریف شده مانند “قرمز”، “سبز”، “آبی” و غیره پشتیبانی می کند.

.element {
background-color: red;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

2. نماد هگزادسیمال

نماد هگزادسیمال برای رنگ های RGB.

.element {
background-color: #ff6347; /* Tomato */
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

3. rgb() و rgba()

رنگ ها را با استفاده از مدل رنگ قرمز-سبز-آبی تعریف می کند.

.element {
background-color: rgb(255, 99, 71); /* Tomato */
background-color: rgba(255, 99, 71, 0.5); /* 50% transparent Tomato */
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

4. hsl() و hsla()

از مدل Hue-Saturation-Lightness استفاده می کند.

.element {
background-color: hsl(9, 100%, 64%); /* Tomato */
background-color: hsla(9, 100%, 64%, 0.5); /* 50% transparent Tomato */
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

5. CurrentColor

از مقدار فعلی استفاده می کند color ویژگی.

.element {
color: #ff6347;
border: 2px solid currentColor; /* Border color matches text color */
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

6. ربکا ارغوانی

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

.element {
background-color: rebeccapurple; /* #663399 */
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

7. cmyk()

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

.element {
background-color: cmyk(0, 1, 1, 0); /* Red */
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

8. adjust-hue()

رنگ یک رنگ را با درجه مشخصی تنظیم می کند.

.element {
background-color: adjust-hue(hsl(120, 100%, 50%), 45deg); /* Adjusted hue */
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

9. saturate()

اشباع رنگ را افزایش می دهد.

.element {
background-color: saturate(hsl(120, 50%, 50%), 20%); /* More saturated */
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

10. desaturate()

اشباع رنگ را کاهش می دهد.

.element {
background-color: desaturate(hsl(120, 50%, 50%), 20%); /* Less saturated */
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

11. lighten()

رنگ را روشن تر می کند.

.element {
background-color: lighten(hsl(120, 50%, 50%), 20%); /* Lighter */
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

12. darken()

رنگ را تیره تر می کند.

.element {
background-color: darken(hsl(120, 50%, 50%), 20%); /* Darker */
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

13. color()

امکان استفاده از رنگ ها از فضاهای رنگی مختلف را فراهم می کند.

.element {
background-color: color(display-p3 1 0.5 0); /* Display P3 color space */
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

14. color-mix()

دو رنگ را با هم ترکیب می کند.

.element {
background-color: color-mix(in srgb, blue 30%, yellow 70%);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

15. آزمایشگاه ()

از مدل رنگی CIE LAB برای یکنواختی ادراکی استفاده می کند.

.element {
background-color: lab(60% 40 30); /* Lightness, a*, b* */
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

16. lch()

یک نمایش استوانه ای از مدل رنگی CIE LAB.

.element {
background-color: lch(70% 50 200); /* Lightness, Chroma, Hue */
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

17. تقویت ()

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

.element {
background-color: hwb(260 30% 40%); /* Hue, Whiteness, Blackness */
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

18. خاکستری ()

با استفاده از درصد، سایه های خاکستری ایجاد می کند.

.element {
background-color: gray(50%); /* Medium gray */
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

19. رنگ-کنتراست()

رنگی را انتخاب می کند که کنتراست کافی در پس زمینه ایجاد کند.

.element {
background-color: color-contrast(white vs black, blue, red);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

20. oklch()

از Oklab Luminance، Chroma و Hue برای یکنواختی ادراکی استفاده می کند.

.element {
background-color: oklch(80% 0.5 200); /* Luminance, Chroma, Hue */
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

کاربردهای عملی

1. جلوه های شناور: استفاده کنید rgba() یا hsla() برای ایجاد جلوه های شناور ظریف با شفافیت.

.button {
background-color: rgb(0, 123, 255);
}
.button:hover {
background-color: rgba(0, 123, 255, 0.8);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

2. موضوع بندی: استفاده کنید currentColor برای ایجاد مولفه های آگاه به موضوع

.theme-dark {
color: #ffffff;
}
.theme-light {
color: #000000;
}
.themed-element {
border: 1px solid currentColor;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

3. رنگ های پویا: قدرت نفوذ hsl() برای تنظیمات رنگ پویا، مانند تغییر روشنایی یا اشباع.

.lighten {
background-color: hsl(220, 90%, 70%);
}
.darken {
background-color: hsl(220, 90%, 30%);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

4. ترکیب رنگ ثابت: استفاده کنید oklch() برای ترکیب رنگ ها به گونه ای که طبیعی تر و یکدست تر به نظر برسد.

.box {
background-color: oklch(75% 0.3 90); /* Soft, bright color */
}
.highlight {
background-color: oklch(75% 0.3 120); /* Slightly different hue */
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

5. هماهنگی رنگ: با تنظیم رنگ و در عین حال ثابت نگه داشتن روشنایی و رنگ، طرح های رنگی هماهنگ ایجاد کنید.

.primary {
background-color: oklch(70% 0.4 30);
}
.secondary {
background-color: oklch(70% 0.4 60);
}
.accent {
background-color: oklch(70% 0.4 90);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

6. رنگ های قابل دسترس: استفاده کنید oklch() برای ایجاد رنگ هایی که از نظر ادراکی متمایز هستند، خوانایی و دسترسی را بهبود می بخشد.

.text {
color: oklch(20% 0.1 30); /* Dark color for text */
}
.background {
background-color: oklch(90% 0.1 30); /* Light background color */
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نتیجه

توابع رنگی مدرن CSS قابلیت‌های طراحی وب را گسترش می‌دهند و سطح بالاتری از دقت و انعطاف‌پذیری را ارائه می‌دهند. با ترکیب توابع مانند lab()، lch()، hwb()، gray()، color-contrast()، و oklch()، می توانید دستکاری های رنگی پیچیده تر و در دسترس تری داشته باشید. با آخرین پیشرفت های CSS به روز باشید تا به استفاده از پتانسیل کامل این ابزار قدرتمند در پروژه های طراحی وب خود ادامه دهید.

.element {
  background-color: red;
}

.element {
  background-color: #ff6347; /* Tomato */
}

.element {
  background-color: rgb(255, 99, 71); /* Tomato */
  background-color: rgba(255, 99, 71, 0.5); /* 50% transparent Tomato */
}

.element {
  background-color: hsl(9, 100%, 64%); /* Tomato */
  background-color: hsla(9, 100%, 64%, 0.5); /* 50% transparent Tomato */
}

.element {
  color: #ff6347;
  border: 2px solid currentColor; /* Border color matches text color */
}

.element {
  background-color: rebeccapurple; /* #663399 */
}

.element {
  background-color: cmyk(0, 1, 1, 0); /* Red */
}

.element {
  background-color: adjust-hue(hsl(120, 100%, 50%), 45deg); /* Adjusted hue */
}

.element {
  background-color: saturate(hsl(120, 50%, 50%), 20%); /* More saturated */
}

.element {
  background-color: desaturate(hsl(120, 50%, 50%), 20%); /* Less saturated */
}

.element {
  background-color: lighten(hsl(120, 50%, 50%), 20%); /* Lighter */
}

.element {
  background-color: darken(hsl(120, 50%, 50%), 20%); /* Darker */
}

.element {
  background-color: color(display-p3 1 0.5 0); /* Display P3 color space */
}

.element {
  background-color: color-mix(in srgb, blue 30%, yellow 70%);
}

.element {
  background-color: lab(60% 40 30); /* Lightness, a*, b* */
}

.element {
  background-color: lch(70% 50 200); /* Lightness, Chroma, Hue */
}

.element {
  background-color: hwb(260 30% 40%); /* Hue, Whiteness, Blackness */
}

.element {
  background-color: gray(50%); /* Medium gray */
}

.element {
  background-color: color-contrast(white vs black, blue, red);
}

.element {
  background-color: oklch(80% 0.5 200); /* Luminance, Chroma, Hue */
}

.button {
  background-color: rgb(0, 123, 255);
}
.button:hover {
  background-color: rgba(0, 123, 255, 0.8);
}

.theme-dark {
  color: #ffffff;
}
.theme-light {
  color: #000000;
}
.themed-element {
  border: 1px solid currentColor;
}

.lighten {
  background-color: hsl(220, 90%, 70%);
}
.darken {
  background-color: hsl(220, 90%, 30%);
}

.box {
  background-color: oklch(75% 0.3 90); /* Soft, bright color */
}
.highlight {
  background-color: oklch(75% 0.3 120); /* Slightly different hue */
}

.primary {
  background-color: oklch(70% 0.4 30);
}
.secondary {
  background-color: oklch(70% 0.4 60);
}
.accent {
  background-color: oklch(70% 0.4 90);
}

.text {
  color: oklch(20% 0.1 30); /* Dark color for text */
}
.background {
  background-color: oklch(90% 0.1 30); /* Light background color */
}