مبدل رنگ هگز RGB HSL

مبدل رنگ رایگان: HEX به RGB، RGB به HEX، به علاوه HSL، HSV، CMYK و آلفا. لغزنده زنده، انتخابگر رنگ، EyeDropper، نمونه های ذخیره شده، هارمونی، کنتراست WCAG، پیش نمایش کوررنگی و صادرات کد، بدون ثبت نام، به صورت محلی اجرا می شود.

ساخت و نگهداری توسط Shehzad Munir ·

مبدل رنگ هگز RGB HSL
Loading Color Converter
Share

تبدیل رنگ ها در هر جهت، فورا

هر رنگی را بین HEX، RGB، HSL، HSV/HSB و CMYK در هر جهت، همان لحظه که تایپ می‌کنید، تبدیل کنید. برای طراحان و توسعه‌دهندگان ساخته شده است، لغزنده‌های تعاملی RGB/HSL/alpha را با آهنگ‌های گرادیان زنده، انتخابگر رنگ، EyeDropper صفحه نمایش، نمونه‌های ذخیره‌شده و اخیر، هارمونی‌های رنگی آماده، یک رمپ رنگ/سایه، یک میکسر دو رنگ، یک پیش‌نمایش کدهای کپی-کوررنگی، پیش‌نمایش کدهای WCA-Gready و WCA-Gready را اضافه می‌کند. CSS، Tailwind، SCSS، Swift و Android، همه در مرورگر شما، بدون هیچ چیزی آپلود شده است.

یک مبدل رنگ تنها زمانی مفید است که هر نمادی را که انجام می‌دهید بیان کند. این ابزار HEX را به RGB و back تبدیل می کند و همچنین HSL، HSV (همچنین HSB نامیده می شود) و CMYK را به یکباره و در زمان واقعی پل می کند. یک HEX مانند #3b82f6 تایپ کنید و بلافاصله rgb (59، 130، 246)، hsl (217، 91، 60%)، hsv (217، 97، 96%) و cmyk آن (76٪، 47٪، 0٪، 4٪) را دریافت می کنید. هر یک از فیلدها را تغییر دهید و بقیه دنبال می‌شوند، بنابراین می‌توانید در مدلی که مناسب کار است استدلال کنید: HEX برای نشانه‌گذاری، RGB برای بوم و شیب، HSL/HSV برای تغییرات بصری روشنایی و اشباع، و CMYK زمانی که یک طرح شروع به چاپ می‌کند.

ویژگی ها

  • HEX دو طرفه ↔ RGB ↔ HSL ↔ HSV ↔ CMYK، با آلفا
  • اسلایدرهای تعاملی RGB، HSL و آلفا با آهنگ‌های گرادیان زنده
  • انتخابگر رنگ بومی + مرورگر EyeDropper
  • تاریخچه اخیر + نمونه های ذخیره شده (در مرورگر شما نگهداری می شود)
  • پشتیبانی از رنگ‌های نام‌گذاری شده CSS (زرشکی، آبی، طلایی…)
  • هارمونی، رمپ رنگ/سایه + میکسر دو رنگ
  • پیش نمایش کوررنگی (protanopia، deuteranopia، tritanopia)
  • نشان‌های کنتراست زنده WCAG AA/AAA
  • صادرات آماده کپی برای CSS، Tailwind، SCSS، Swift و Android

نحوه استفاده از مبدل رنگ هگز RGB HSL

  1. 1

    رنگی را انتخاب یا تایپ کنید

    از انتخابگر رنگ، EyeDropper یا مقدار HEX، rgb()، hsl()، hsv()/hsb()، cmyk() یا یک نام رنگ CSS مانند "teal" تایپ کنید. هر قالب دیگری فوراً به روز می شود.

  2. 2

    تبدیل ها را بخوانید

    فیلدهای HEX، RGB، HSL، HSV و CMYK همگی همگام هستند. هر یک از آنها را ویرایش کنید و بقیه به صورت زنده دوباره محاسبه شوند، بنابراین می توانید با هر نمادی که ترجیح می دهید کار کنید.

  3. 3

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

    روی نمونه های مکمل، مشابه، سه گانه یا چهارتایی کلیک کنید، روی سطح شیب دار روشنایی رنگ/سایه قدم بزنید، یا دو رنگ را با میکسر ترکیب کنید تا دقیقاً روی سایه مورد نیازتان قرار بگیرید.

  4. 4

    کپی و بررسی کنتراست

    هر قالبی را با یک کلیک کپی کنید و نشان های WCAG AA/AAA را بخوانید تا مطمئن شوید که رنگ شما قبل از ارسال روی سفید یا سیاه قابل خواندن است.

موارد استفاده رایج

  • در حین نوشتن CSS یا JSX، HEX را به RGB (یا RGB به HEX) تبدیل کنید.
  • یک نام تجاری HEX را به HSL/HSV برای قالب بندی و ترفندهای آلفا ترجمه کنید.
  • یک رنگ را برای گردش کار چاپ و پیش چاپ به CMYK تبدیل کنید.
  • با بازخورد کنتراست فوری WCAG، پالت‌های قابل دسترس بسازید.
  • طرح های مکمل و مشابه برای UI و تصاویر ایجاد کنید.
  • با EyeDropper یک رنگ را مستقیماً از روی صفحه نمایش بگیرید.

راهنمای تفصیلی

از HEX تا RGB، HSL، HSV و CMYK بدون ریاضی

در زیر هود، مبدل هر ورودی را به یک RGB سه‌گانه عادی می‌کند، سپس فرمول‌های استاندارد sRGB را برای استخراج فضاهای دیگر، همان مرورگرهای ریاضی و ابزار طراحی استفاده می‌کند، بنابراین اعداد با آنچه در Figma، Photoshop یا Chrome DevTools می‌بینید مطابقت دارند. همچنین HEX (#fff)، HEX 8 رقمی را با آلفا (#3b82f6aa)، rgb()/rgba()، hsl()/hsla()، و رنگ‌های متداول CSS مانند زرشکی، آبی و طلایی را می‌فهمد، بنابراین هرگز مجبور نیستید فرمول را حفظ کنید یا برگه‌ها را تغییر دهید. هر فرمت دارای یک دکمه کپی است و نمونه پیش‌نمایش بزرگ رنگ شما را در پس‌زمینه واقعی نشان می‌دهد تا بتوانید با یک نگاه آن را بررسی کنید.

با هارمونی و رمپ پالت های بهتری طراحی کنید

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

دسترسی و حریم خصوصی داخلی

رنگ خوب، رنگ قابل خواندن است. مبدل نسبت کنتراست WCAG رنگ شما را در برابر سفید و سیاه نشان می‌دهد و مطابقت AA (4.5:1) و AAA (7:1) را نشان می‌دهد، بنابراین می‌توانید متن با کنتراست پایین را قبل از ارسال، که همراهی طبیعی برای جستجوگر کنتراست اختصاصی است، دریافت کنید. و از آنجایی که همه چیز به صورت محلی در مرورگر شما اجرا می‌شود، رنگ‌های شما هرگز از دستگاه شما خارج نمی‌شوند: هیچ آپلودی، هیچ حساب کاربری و ردیابی وجود ندارد، که باعث می‌شود برند و کار مشتری خصوصی بماند در حالی که ابزار فوری می‌ماند.

سوالات متداول

چگونه HEX را به RGB تبدیل کنم؟

یک مقدار HEX (مانند #3b82f6 یا #fff) را در فیلد HEX تایپ یا جایگذاری کنید، یا از انتخابگر رنگ استفاده کنید. مقدار RGB فوراً به صورت rgb (r, g, b) ظاهر می شود و می توانید با یک کلیک آن را کپی کنید. تبدیل به روش دیگری نیز کار می کند، مقدار rgb() را تایپ کنید و به روز رسانی HEX را به صورت زنده انجام دهید.

آیا می توانم همزمان به HSL، HSV و CMYK تبدیل کنم؟

بله. هر فیلد: HEX، RGB، HSL، HSV/HSB و CMYK، همگام می‌ماند. هر کدام را ویرایش کنید و بقیه فوراً دوباره محاسبه شوند، بنابراین می توانید هر پنج نماد را برای یک رنگ بدون اجرای ابزار جداگانه بخوانید.

تفاوت بین HSL و HSV چیست؟

هر دو رنگ را بر اساس رنگ توصیف می کنند، اما HSL (روشنایی) و HSV/HSB (مقدار/روشنایی) اشباع را به طور متفاوتی مدل می کنند. HSL رنگ‌های خالص را در روشنایی 50 درصد قرار می‌دهد، در حالی که HSV آنها را در ارزش 100 درصد قرار می‌دهد، بنابراین همین درصد می‌تواند بین این دو روشن‌تر یا تیره‌تر به نظر برسد. این ابزار هر دو را نشان می دهد تا بتوانید فریمورک مورد انتظار خود را انتخاب کنید.

چگونه می توانم یک مقدار CMYK برای چاپ دریافت کنم؟

رنگ خود را در هر قالبی تایپ کنید و قسمت CMYK را بخوانید، برای مثال #3b82f6 به cmyk تبدیل می‌شود(76%، 47%، 0%، 4%). CMYK مدل تفریقی است که توسط چاپگرها استفاده می شود، بنابراین زمانی که یک رنگ وب باید در یک بروشور یا بسته بندی مطابقت داده شود، مفید است.

آیا می توانم رنگی را از صفحه نمایش خود انتخاب کنم؟

بله، در مرورگرهای پشتیبانی شده (Chrome، Edge و سایرین با EyeDropper API) دکمه «Pick» یک قطره چکان صفحه نمایش را باز می کند تا بتوانید هر پیکسل، رنگی از یک تصویر، یک وب سایت یا دسکتاپ خود را نمونه برداری کنید و مستقیماً آن را در مبدل بارگذاری کنید.

آیا می توانم رنگ ها را با لغزنده تنظیم کنم و شفافیت را اضافه کنم؟

بله. لغزنده‌های تعاملی R، G، B، H، S، L و آلفا هر کدام یک مسیر گرادیان زنده را نشان می‌دهند، بنابراین می‌توانید با کشیدن یا تایپ یک مقدار دقیق، یک سایه را تنظیم کنید. نوار لغزنده آلفا خروجی 8 رقمی HEX و rgba()/hsla() را برای شفافیت تولید می کند.

آیا نشان می دهد که یک رنگ برای کاربران کوررنگ چگونه به نظر می رسد؟

بله. پیش‌نمایش کوررنگی نحوه ظاهر شدن رنگ شما در زیر پروتانوپیا، دوترانوپیا، تریتانوپیا و آکروماتوپسی کامل را شبیه‌سازی می‌کند، بنابراین می‌توانید بررسی کنید که یک پالت همچنان برای تقریباً 1 در 12 مرد و 1 در 200 زن با نقص بینایی رنگ ارتباط برقرار می‌کند.

آیا می توانم رنگ را به عنوان CSS، Tailwind یا کد برنامه صادر کنم؟

بله. پانل صادرات قطعه‌های آماده کپی را برای متغیرهای CSS، rgb()، SCSS، ورودی پیکربندی Tailwind، Swift UIColor، Android Color.parseColor و JSON، به‌علاوه نمونه‌های اخیر و ذخیره‌شده به‌صورت محلی در مرورگر شما ارائه می‌دهد.

آیا مبدل رنگ رایگان و خصوصی است؟

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

آیا می توانم RGB یا HEX را به HSL و OKLCH تبدیل کنم؟

بله. بین HEX، RGB(A)، HSL و OKLCH مدرن تبدیل می‌شود تا بتوانید فرمت دقیق CSS یا ابزار طراحی خود را کپی کنید.

آیا شفافیت (RGBA/HEX با آلفا) را کنترل می کند؟

بله. یک مقدار آلفا اضافه کنید و RGBA و هگز 8 رقمی تولید می کند، بنابراین وقتی رنگ را در استایل خود کپی می کنید، کدورت حفظ می شود.

از مجله

All articles →