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

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

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

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

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

از فام، اشباع و روشنی به قرمز، سبز و آبی

مبدل اول کروما را محاسبه می‌کند، یعنی رنگ چقدر از خاکستری دور است: با اشباع زیاد می‌شود و وقتی روشنی از 50% دور می‌شود کم می‌شود. سپس فام را در یکی از شش قطاع چرخهٔ رنگ می‌گذارد، که هر کدام 60 درجه پهنا دارد، و از روی قطاع تعیین می‌کند کدام یک از سه کانال در بیشینه است، کدام در کمینه و کدام میان آن‌ها. در پایان ثابتی اضافه می‌کند تا روشنی درست دربیاید، سه مقدار را از بازهٔ 0 تا 1 به 0 تا 255 مقیاس می‌کند و هر کدام را به عدد کامل گرد می‌کند. آن سه بایت در مبنای شانزده نوشته می‌شوند، هر کدام دو رقم.

مثالی با عددها

hsl(30, 29%, 28%) را بگیرید. کروما (1 − |2 × 0.28 − 1|) × 0.29 = 0.56 × 0.29 = 0.1624 است. فام 30 درجه نیمهٔ قطاع اول است، پس کانال میانی نصف کروما است، 0.0812. ثابتی که باید اضافه شود 0.28 − 0.0812 = 0.1988 است. پس قرمز 0.1624 + 0.1988 = 0.3612 است، سبز 0.0812 + 0.1988 = 0.28 و آبی 0.1988. با ضرب در 255 و گرد کردن، این‌ها 92، 71 و 51 می‌شوند. در hex این #5C4733 است.

خاکستری‌ها

وقتی اشباع 0% است، رنگ بدون توجه به فام خاکستری است و سه بایت برابرند. hsl(0, 0%, 50%) برابر #808080 است. فام نادیده گرفته می‌شود، پس هر عدد فام همان خاکستری را می‌دهد.

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

رنگ را همان‌طور که توصیف کردید نگه می‌دارد

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

نمی‌تواند در برگشت همان عددها را تضمین کند

این دو همان رنگ‌ها را توصیف می‌کنند، اما HSL از هندسه‌ای دیگر به آن‌ها می‌رسد و سه عددش هنگام نوشتن به درجه و درصد کامل گرد می‌شود. پس رنگی که به HSL برده شود و برگردد ممکن است یک یا دو پله از جایی که شروع کرد دورتر فرود بیاید: از نظر بصری یکسان، نه بایت به بایت یکسان. در مثال ما، #5A4632 رنگی بود که HSL آن حدود hsl(30, 29%, 28%) است؛ تبدیل این رقم‌های گردشده به عقب #5C4733 می‌دهد، دو پله دورتر در قرمز. اگر بایت‌های دقیق را لازم دارید، hex را نگه دارید.

علامت‌های درصد و درجه

صفحه فام را به درجه و اشباع و روشنی را به درصد می‌خواند. می‌توانید آن‌ها را با علامت‌ها یا بدون آن‌ها بنویسید. فام بالاتر از 360 یا پایین‌تر از 0 دور چرخه پیچیده می‌شود، پس 390 با 30 یکی است.

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

نوشتن فایل توکن طراحی

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

تولید رنگ برای ابزارهایی که hsl() را نمی‌خوانند

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

بررسی پالت تولیدشده

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

به اشتراک گذاشتن رنگ در یک پیام

کد hex کوتاه است، قابل کپی است و تقریباً هر کسی که با رنگ کار می‌کند آن را می‌فهمد. مقدار hsl() بلندتر و بیرون از طراحی کمتر آشناست. وقتی رنگی را برای کسی می‌فرستید، hex شکل مؤدبانه است.

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

مقدار hsl را تایپ یا جای‌گذاری کنید

رنگ را در فیلد اول به شکل hsl(30, 29%, 28%) وارد کنید، یا فقط سه عدد. فام به درجه است، اشباع و روشنی به درصد.

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

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

آن را در کارتان کپی کنید

کد را در شیوه‌نامه، فایل توکن یا پیامتان استفاده کنید. برای جهت مخالف، HEX به HSL یک کلیک فاصله دارد.

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

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

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

HSL و CMYK

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

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

انتظار برگشتن کد اصلی

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

قاطی کردن اشباع و روشنی

این دو را به‌آسانی می‌شود به اشتباه جابه‌جا کرد: hsl(30, 28%, 29%) برابر hsl(30, 29%, 28%) نیست. ترتیب فام، اشباع، روشنی است. اگر رنگ روی صفحه آن‌طور که انتظار داشتید به نظر نمی‌رسد، بررسی کنید جابه‌جایشان نکرده باشید.

فراموش کردن اینکه روشنی درخشندگی نیست

دو رنگ با روشنی یکسان می‌توانند در درخشندگی متفاوت به نظر برسند. زرد در روشنی 50% بسیار درخشان‌تر از آبی در 50% دیده می‌شود. اگر برای متن و پس‌زمینه رنگ انتخاب می‌کنید، کنتراستشان را با ابزار درست بررسی کنید، نه با مقایسهٔ عددهای روشنی.

استفاده از مقدارهای بیرون از بازه

اشباع و روشنی به 0 تا 100 درصد محدودند. مقدارهای بیرون از این بازه بریده می‌شوند. روشنی 120% درخشان‌تر از سفید نیست؛ سفید است.

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

hsl(0, 100%, 50%) در hex چیست؟

#FF0000، قرمز خالص.

hsl(0, 0%, 100%) در hex چیست؟

#FFFFFF، سفید.

آیا می‌توانم از اعشار استفاده کنم؟

بله. hsl(30.5, 28.6%, 27.8%) پذیرفته می‌شود. نتیجه به بایت کامل گرد می‌شود.

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

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

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

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

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

با HEX به HSL.

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

تصمیم بگیرید کدام شکل مادر است

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

HSL را برای تغییر و hex را برای تثبیت استفاده کنید

وقتی خانواده‌ای از سایه‌ها لازم دارید، در HSL کار کنید. وقتی باید رنگی را تثبیت کنید تا در هر ابزار یکسان باشد، آن را به صورت hex بنویسید.

عددهایی را که تایپ کردید نگه دارید

مقدارهای HSL را کنار hex در یادداشت پالتتان ثبت کنید. اگر کسی بعداً نسخهٔ کم‌رنگ‌تر بخواهد، می‌تواند از عددهای شما شروع کند و نه از کدی که پیش‌تر گرد شده است.

شش قطاع چرخه

کدام کانال بالاست، کدام پایین

تبدیل چرخه را به شش قطاع 60 درجه‌ای تقسیم می‌کند، و در هر کدام یک کانال در بیشینه است، یکی در کمینه و سومی نرم تغییر می‌کند. از 0 تا 60، قرمز در بیشینه است، آبی در کمینه و سبز بالا می‌رود: قرمز به زرد می‌گردد. از 60 تا 120، سبز در بیشینه است و قرمز پایین می‌آید: زرد به سبز می‌گردد. از 120 تا 180، سبز بالا می‌ماند و آبی بالا می‌رود: سبز به فیروزه‌ای می‌گردد. از 180 تا 240، آبی جا را می‌گیرد و سبز پایین می‌آید. از 240 تا 300، آبی بالا می‌ماند و قرمز بالا می‌رود: آبی به سرخابی می‌گردد. از 300 تا 360، قرمز دوباره جا را می‌گیرد و آبی پایین می‌آید. وقتی HSL را به HEX تبدیل می‌کنید، دانستن اینکه فام شما در کدام قطاع است کمک می‌کند، چون می‌گوید کدام یک از سه جفت در پاسخ بزرگ‌ترین خواهد بود.

چرا پاسخ شباهت خانوادگی دارد

رنگ‌هایی با فام و اشباع یکسان اما روشنی متفاوت کدهای hexای می‌دهند که مثل خویشاوندند: همان الگوی اینکه کدام جفت بالاست و کدام پایین، فقط بالا یا پایین مقیاس‌شده. #5C4733، #7A5F44 و #A38461 همه در یک خانواده‌اند، با قرمز بزرگ‌ترین، سپس سبز، سپس آبی. می‌توانید یاد بگیرید این را در یک نگاه بخوانید، و گرفتن اشتباه‌ها را آسان‌تر می‌کند.

ساختن شیب روشنی

یک فام، نه پله

کاربرد بسیار عملی این تبدیل ساختن شیبی از یک رنگ است، از بسیار کم‌رنگ تا بسیار تیره، از آن مقیاس‌هایی که نظام‌های طراحی 50، 100، 200 و همین‌طور تا 900 برچسب می‌زنند. یک فام و یک اشباع انتخاب کنید، و روشنی را از مقدارهایی مثل 96، 90، 80، 70، 60، 50، 40، 30 و 20 درصد بگذرانید. برای هر پله HSL را به HEX تبدیل کنید، و نه کد دارید که به هم تعلق دارند. کم کردن اندکی اشباع در دو سر، چند امتیاز در کم‌رنگ‌ترین و تیره‌ترین پله‌ها، اغلب طبیعی‌تر از ثابت نگه داشتن آن به نظر می‌رسد.

نام‌گذاری پله‌ها

به هر پله نامی بدهید که نقشش را ثبت می‌کند، نه مقدارش را: surface برای کم‌رنگ‌ترین، border برای بعدی، text برای تیره‌ترین. در کد، نام به خوانندهٔ بعدی می‌گوید رنگ برای چیست، و می‌توانید عدد پشت آن را بدون دست زدن به قاعده‌هایی که از آن استفاده می‌کنند عوض کنید.

تم‌های روشن و تاریک

آینه کردن شیب

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

بررسی هر دو تم

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

وقتی فقط تصویر مبهمی از رنگ دارید

از چرخه شروع کنید، سپس بهتر کنید

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

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

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

یک مثال عملی

فرض کنید سبزی را برای حالت موفقیت یک برنامه انتخاب کرده‌اید: hsl(145, 55%, 38%). آن را تایپ می‌کنید و #2C9658 را می‌خوانید. آن کد را در فایل توکن به صورت --success استفاده می‌کنید. برای پس‌زمینهٔ اعلان موفقیت همان فام را می‌گیرید، hsl(145, 45%, 94%)، و #E9F7EF را می‌خوانید. برای حاشیه، hsl(145, 45%, 78%)، که #AEE0C3 خوانده می‌شود. سه کد، یک فام، همه در یک دقیقه مشتق شده‌اند، و هر کدام کد hex ساده‌ای که هر ابزار در تیم می‌تواند باز کند.

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

پیش از تبدیل

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

هنگام تبدیل

مقدارها را تایپ کنید، hex را بخوانید و با علامت هشش کپی کنید.

پس از تبدیل

رنگ را روی صفحه در زمینه نگاه کنید و مقدارهای HSL را برای بعداً کنار کد یادداشت کنید.

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

جابه‌جا کردن اشباع و روشنی

ترتیب فام، اشباع، روشنی است.

انتظار بازیابی hex قدیمی

ممکن است یک پله دورتر فرود بیاید. اگر مهم است اصل را نگه دارید.

مقایسهٔ روشنی به جای کنتراست

برای متن و پس‌زمینه از ابزار کنتراست استفاده کنید.

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

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

خلاصه

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