تبدیل HEX به HSL Hexadecimal ↔ Hue Saturation Lightness رایگان آنلاین امن

چرا HEX را به HSL تبدیل می‌کنید

کد hex مثل #5A4632 راه خوبی برای ذخیره کردن رنگ است و راه ضعیفی برای فکر کردن به آن. هیچ چیز در رقم‌ها نمی‌گوید که رنگ قهوه‌ای است، چقدر روشن است یا نسخهٔ کمی کم‌رنگ‌تر آن چه شکلی خواهد بود. HSL برای رفع همین ابداع شد. رنگ را همان‌طور که مردم دربارهٔ آن حرف می‌زنند توصیف می‌کند: کدام فام است، چقدر زنده است و چقدر روشن. تبدیل HEX به HSL یعنی ترجمهٔ رنگ از شکلی که ابزار طراحی به دستتان می‌دهد به شکلی که می‌توانید با آن استدلال کنید: hsl(30, 29%, 28%) نارنجی‌قهوه‌ای تیرهٔ ملایمی است و بلافاصله می‌بینید که بالا بردن آخرین عدد آن را کم‌رنگ‌تر می‌کند.

این دلیل واقعی استفادهٔ طراح‌ها و توسعه‌دهنده‌های فرانت‌اند از این تبدیل است. رنگ برندی به صورت hex دارند و به خانواده‌ای از رنگ‌های مرتبط نیاز دارند: روشن‌تری برای حالت هاور، تیره‌تری برای دکمهٔ فشرده‌شده، بسیار کم‌رنگی برای سایه‌روشن پس‌زمینه، کم‌اشباعی برای کنترل غیرفعال. در hex هر یک جست‌وجوی تازه‌ای برای سه جفت رقم است. در HSL هر یک تغییر یک عدد است. رنگ همان رنگ است، دیده‌شده از عدسی مفیدتر.

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

HSL چه چیزی را توصیف می‌کند

فام: جایگاه روی چرخهٔ رنگ

فام زاویه‌ای از 0 تا 360 درجه دور چرخهٔ رنگ است. قرمز در 0 است، زرد در 60، سبز در 120، فیروزه‌ای در 180، آبی در 240 و سرخابی در 300؛ در 360 به قرمز برگشته‌اید. فام 30 میان قرمز و زرد است، که نارنجی است. عدد می‌گوید در کدام خانوادهٔ رنگ هستید، و دربارهٔ روشن یا کم‌رنگ بودنش چیزی نمی‌گوید.

اشباع: چقدر زنده

اشباع درصد است. در 100% رنگ تا جایی که فام اجازه می‌دهد خالص است؛ در 0% همهٔ رنگش را از دست داده و خاکستری است. اشباع 29%، مثل قهوه‌ای مثال ما، رنگی ملایم و خاکی است. پایین آوردن اشباع سریع‌ترین راه برای آرام‌تر کردن رنگ پرسروصدا بدون تغییر شخصیتش است.

روشنی: چقدر کم‌رنگ یا تیره

روشنی هم درصد است. در 0% رنگ بدون توجه به فام و اشباع مشکی است؛ در 100% سفید است؛ در 50% رنگ کامل و عادی است. قهوه‌ای ما در 28% سمت تیره است. بالا بردن عدد نسخهٔ کم‌رنگ‌تر همان رنگ را می‌دهد و پایین آوردنش نسخهٔ تیره‌تر را، که دقیقاً تغییری است که طراح‌ها بیش از همه می‌خواهند.

چرا از hex آسان‌تر است

در hex، کم‌رنگ‌تر کردن رنگ یعنی افزایش هر سه جفت به مقدارهای متفاوت تا فام جابه‌جا نشود، که با چشم تقریباً غیرممکن است. در HSL یعنی تغییر یک رقم واحد و رها کردن دو تای دیگر.

تبدیل چگونه کار می‌کند

از سه بایت به یک زاویه و دو درصد

مبدل اول رقم‌های hex را به عنوان مقدارهای قرمز، سبز و آبی می‌خواند، هر کدام از 0 تا 255، و آن‌ها را به بازهٔ 0 تا 1 مقیاس می‌کند. بزرگ‌ترین و کوچک‌ترین از این سه را پیدا می‌کند. روشنی میانگین آن دو است. اشباع به فاصلهٔ آن‌ها از هم نسبت به روشنی بستگی دارد. فام به این بستگی دارد که کدام کانال بزرگ‌تر است و دو تای دیگر چگونه مقایسه می‌شوند. اگر هر سه برابر باشند، رنگ خاکستری است، اشباع صفر است و فام معنایی ندارد؛ مبدل در این حالت 0 را برای آن نشان می‌دهد.

مثال

برای #5A4632 بایت‌ها 90، 70 و 50 هستند. قرمز با 0.353 بزرگ‌ترین است و آبی با 0.196 کوچک‌ترین. روشنی نصف مجموع آن‌هاست، 0.275، حدود 28%. دامنه 0.157 است، پس اشباع 0.157 تقسیم بر مجموع 0.549 است، حدود 29%. قرمز بزرگ‌ترین کانال است و سبز میان آن‌هاست، که فام را در 30 درجه می‌گذارد. نتیجه hsl(30, 29%, 28%) است.

عددهای کامل

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

تبدیل چه چیزی را نگه می‌دارد و چه چیزی را نمی‌تواند

رنگ را همان‌طور که چشم دسته‌بندی می‌کند نگه می‌دارد

نتیجه رنگ است آن‌گونه که چشم دسته‌بندی می‌کند: فامی روی چرخه، میزان اشباع، میزان روشنی. برای همین داشتن HSL ارزش دارد. با تغییر یک عدد می‌توانید رنگ را کم‌رنگ‌تر یا سایه‌ای را تیره‌تر کنید، که در hex تقریباً غیرممکن است.

نمی‌تواند همان بایت‌ها را پس بدهد

این دو همان رنگ‌ها را توصیف می‌کنند، اما HSL از هندسه‌ای دیگر به آن‌ها می‌رسد و سه عددش هنگام نوشتن به درجه و درصد کامل گرد می‌شود. پس رنگی که به HSL برده شود و برگردد ممکن است یک یا دو پله از جایی که شروع کرد دورتر فرود بیاید: از نظر بصری یکسان، نه بایت به بایت یکسان. اگر بایت‌های دقیق را لازم دارید، hex را نگه دارید. HEX را به HSL تبدیل کنید تا با رنگ کار کنید، و hex را نسخهٔ مادر نگه دارید.

خاکستری‌ها فام ندارند

وقتی سه بایت برابرند، دربارهٔ فام چیزی برای گفتن نیست. مبدل فام 0 و اشباع 0% می‌دهد و فقط روشنی خاکستری را توصیف می‌کند. از 0 چیزی برداشت نکنید.

استفادهٔ عملی از HSL

ساختن خانواده‌ای از سایه‌ها

رنگ پایهٔ hsl(30, 29%, 28%) را بگیرید. سایهٔ روشن‌تر برای هاور hsl(30, 29%, 34%) است. سایه‌روشن بسیار کم‌رنگ برای پس‌زمینه hsl(30, 29%, 94%) است. سایهٔ تیره‌تر برای حالت فشرده hsl(30, 29%, 22%) است. فام و اشباع سر جایشان می‌مانند، پس رنگ‌ها آشکارا به هم تعلق دارند. انجام همین کار در hex چندین تلاش می‌گرفت و باز هم کمی ناجور به نظر می‌رسید.

تم‌بندی و حالت تاریک

تم اغلب همان پالت را در نسخهٔ روشن و تاریک لازم دارد. با HSL فام را نگه می‌دارید و روشنی و اشباع را تنظیم می‌کنید: پس‌زمینه‌ها را برای تم روشن روشن‌تر و متن را تیره‌تر می‌کنید، و برای تاریک برعکس. تعریف فام به عنوان یک ویژگی سفارشی و تغییر فقط روشنی راه رایج و مرتبی برای این کار است.

تولید پالت

برای پیدا کردن رنگ‌هایی که با رنگ پایه جور باشند، فام را بچرخانید. سی درجه به هر طرف رنگ‌های مجاور را می‌دهد، 180 مکمل را می‌دهد و 120 یا 240 سه‌گانه را. اشباع و روشنی را ثابت کنید، فام را عوض کنید، و رنگ‌ها حال و هوای یکدستی دارند. راهی سریع برای شروع پالتی است که تصادفی به نظر نمی‌رسد.

کنتراست در دسترس‌پذیر

روشنی کنترل اصلی کنتراست است. اگر خواندن متن روی پس‌زمینهٔ رنگی سخت است، راه‌حل معمولاً افزایش اختلاف روشنی میان آن‌هاست، و HSL این را به تنظیم یک عدد در هر طرف تبدیل می‌کند.

چگونه HEX را اینجا به HSL تبدیل کنیم

کد hex را تایپ یا جای‌گذاری کنید

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

مقدار hsl را بخوانید

پاسخ بلافاصله ظاهر می‌شود، مثل #5A4632 = hsl(30, 29%, 28%). سه عدد فام به درجه و اشباع و روشنی به درصدند.

آن را در شیوه‌نامه‌تان کپی کنید

نتیجه را همان‌طور که هست در قاعده‌ای مثل color: hsl(30, 29%, 28%) استفاده کنید. برای تنظیم رنگ، آخرین رقم را عوض کنید. ابزار جهت مخالف HSL به HEX است.

این نمادگذاری‌ها از کجا می‌آیند

Hex و RGB یک چیزند که دو بار نوشته شده

رنگ صفحه سه عدد است، اینکه چه مقدار نور قرمز، سبز و آبی ساطع شود، هر کدام از 0 تا 255، که یک بایت است. Hex فقط آن بایت‌ها را در مبنای شانزده می‌نویسد. برای دیدن عددها، HEX را به RGB تبدیل کنید.

HSL و CMYK

HSL ابداع شد چون هیچ‌کدام برای انسان خوانا نیستند: فام را به صورت زاویه‌ای دور چرخهٔ رنگ می‌دهد، با اشباع و روشنی به صورت درصد، تا طراح بتواند چیزی را روشن‌تر کند بدون اینکه سه رقم را دوباره محاسبه کند. CMYK به دنیایی کاملاً دیگر تعلق دارد، جوهر به جای نور. تفریقی است، از چهار صفحهٔ چاپ ساخته شده و نمی‌تواند به هر رنگی که صفحه می‌تواند برسد، چون صفحه نور ساطع می‌کند در حالی که کاغذ فقط بازتاب می‌دهد.

تله‌ها هنگام تبدیل HEX به HSL

انتظار رفت و برگشت کامل

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

فرض کردن اینکه روشنی برابر یعنی درخشندگی برابر

دو رنگ با روشنی HSL یکسان می‌توانند در درخشندگی کاملاً متفاوت به نظر برسند: زرد در 50% بسیار درخشان‌تر از آبی در 50% دیده می‌شود. روشنی HSL عددی راحت است، نه معیاری از درخشندگی ادراک‌شده. برای بررسی کنتراست از ابزار کنتراست درست استفاده کنید.

فراموش کردن علامت‌های درصد

در CSS، اشباع و روشنی در hsl() علامت درصد دارند و فام عددی ساده یا عددی با deg است. جا انداختن علامت‌ها اشتباه کلاسیک است.

زیادی معنی کردن خاکستری

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

پرسش‌هایی که مردم پیش از تبدیل می‌پرسند

#FF0000 در HSL چیست؟

hsl(0, 100%, 50%)، قرمز خالص.

#FFFFFF در HSL چیست؟

hsl(0, 0%, 100%)، سفید. فام برای سفید بی‌معنی است و مبدل 0 نشان می‌دهد.

آیا HSL همه‌جا پشتیبانی می‌شود؟

همهٔ مرورگرهای امروزی hsl() و hsla() را می‌فهمند. سال‌هاست در CSS هست.

آیا تبدیل دقیق است؟

به این معنا دقیق است که همان رنگ را توصیف می‌کند، اما عددها به درجه و درصد کامل گرد می‌شوند، پس برگشتن ممکن است یک پله دورتر فرود بیاید.

آیا رنگ من بارگذاری می‌شود؟

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

چگونه برگردم؟

با HSL به HEX.

انتخاب هوشمندانه هنگام تبدیل HEX به HSL

برای کار از HSL استفاده کنید، برای ذخیره از hex

پالت مادر را در hex نگه دارید، جایی که ابهام ندارد، و وقتی می‌خواهید تغییرها بسازید از HSL استفاده کنید. رفت و برگشت‌ها کمی از دست می‌دهند؛ مادر نه.

فضاهای رنگی جدیدتر را در نظر بگیرید

CSS اکنون oklch() و نمادگذاری‌های مشابهی ارائه می‌دهد که در آن‌ها روشنی برابر واقعاً برابر به نظر می‌رسد. برای نظام‌های طراحی جدید ارزش یادگیری دارند. HSL نمادگذاری‌ای می‌ماند که تقریباً همه می‌فهمند و هر ابزاری پشتیبانی می‌کند.

از ویژگی‌های سفارشی استفاده کنید

--hue و --sat و --light را تعریف کنید و رنگ‌ها را از آن‌ها بسازید: hsl(var(--hue) var(--sat) var(--light)). آن‌گاه تم با ویرایش چند عدد عوض می‌شود.

خواندن و نوشتن HSL با اطمینان

چند نشانه برای یادآوری

چند عدد خواندن HSL را آسان‌تر می‌کنند. فام‌ها در مضرب‌های 60 رنگ‌های خالص‌اند: 0 قرمز، 60 زرد، 120 سبز، 180 فیروزه‌ای، 240 آبی، 300 سرخابی. روشنی 50 با اشباع 100 خالص‌ترین نسخهٔ هر فام را می‌دهد، و روشنی 95 یا بالاتر سایه‌روشنی چنان کم‌رنگ است که به عنوان پس‌زمینه کار می‌کند. وقتی HEX را به HSL تبدیل می‌کنید و فامی نزدیک یکی از این نشانه‌ها می‌بینید، می‌توانید خانوادهٔ رنگ را در یک نگاه نام ببرید.

حرکت میان خانواده‌ها

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

نگه داشتن یادداشتی از مقدارهای تبدیل‌شده

وقتی برای پالت HEX را به HSL تبدیل می‌کنید، نتیجه‌ها را در جدولی با hex اصلی کنارشان بنویسید. جدول نشان می‌دهد رنگ‌ها چه رابطه‌ای دارند، و اگر فام یا روشنی با بقیه ناهماهنگ باشد، بی‌قاعدگی بلافاصله دیده می‌شود. به تیمتان هم مرجع مشترکی می‌دهد.

آزمایش روی صفحه‌های واقعی

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

مبدل‌های مرتبط

همین خانوادهٔ ابزارها تبدیل‌های همسایه را پوشش می‌دهد. برای برگشت از HSL به HEX استفاده کنید. برای عددهای پشت کد، HEX به RGB و RGB به HEX هستند، و برای چاپ، HEX به CMYK و CMYK به HEX. برای اندازه‌ها در همان شیوه‌نامه، px به rem و px به em برای طول همان کاری را می‌کنند که این صفحه برای رنگ‌ها.

یک مثال عملی

فرض کنید رنگ برند شما #1E7A5C است. HEX را به HSL تبدیل می‌کنید و hsl(160, 61%, 30%) را می‌خوانید. برای حالت هاور hsl(160, 61%, 36%) می‌نویسید، کمی روشن‌تر. برای حالت فشرده، hsl(160, 61%, 24%). برای پس‌زمینهٔ بسیار کم‌رنگ پشت یک اعلان، hsl(160, 40%, 95%). برای دکمهٔ غیرفعال، hsl(160, 12%, 60%)، همان فام با بیشتر رنگ بیرون کشیده‌شده. پنج رنگ، یک فام، در یک دقیقه نوشته شده، و همه طوری به نظر می‌رسند که انگار به هم تعلق دارند. وقتی رنگ برند عوض می‌شود، عدد فام را یک بار عوض می‌کنید.

یک فهرست کوتاه

پیش از تبدیل

تصمیم بگیرید می‌خواهید با رنگ چه کنید: تغییرش دهید، تم‌بندی‌اش کنید یا فقط بخوانیدش.

هنگام تبدیل

hex را جای‌گذاری کنید، hsl را بخوانید و سه عدد را یادداشت کنید.

پس از تبدیل

تغییرها را با عوض کردن یک عدد در هر بار بسازید و روی پس‌زمینهٔ واقعی نگاهشان کنید.

اشتباه‌های رایج

دقیق دانستن عددهای گردشده

آن‌ها عدد کامل‌اند. hex را نسخهٔ مادر نگه دارید.

یکی گرفتن روشنی با درخشندگی

دو رنگ در روشنی یکسان می‌توانند در میزان درخشان به نظر رسیدن بسیار متفاوت باشند.

جا انداختن علامت درصد

اشباع و روشنی در CSS به آن‌ها نیاز دارند.

رنگ‌های شما روی دستگاهتان می‌مانند

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

خلاصه

برای تبدیل HEX به HSL در اینجا، کد hex را تایپ یا جای‌گذاری کنید و مقدار hsl را بلافاصله بخوانید. تبدیل رنگ را آن‌گونه که چشم دسته‌بندی می‌کند نگه می‌دارد: فامی روی چرخه، میزان اشباع، میزان روشنی. برای همین داشتن HSL ارزش دارد، چون با تغییر یک عدد می‌توانید رنگ را کم‌رنگ‌تر یا سایه‌ای را تیره‌تر کنید، که در hex تقریباً غیرممکن است. این دو همان رنگ‌ها را توصیف می‌کنند، اما HSL از هندسه‌ای دیگر به آن‌ها می‌رسد و سه عددش به درجه و درصد کامل گرد می‌شوند، پس رنگی که به HSL برده شود و برگردد ممکن است یک یا دو پله از جایی که شروع کرد دورتر فرود بیاید. اگر بایت‌های دقیق را لازم دارید، hex را نگه دارید. چیزی بارگذاری نمی‌شود.