What is the difference between HEX, RGB, and HSL color formats?

HEX (#RRGGBB) encodes red, green, and blue channels as two hexadecimal digits each (0–FF). RGB (rgb(255, 0, 0)) expresses the same channels as decimal values 0–255. HSL (hsl(0, 100%, 50%)) represents color as Hue (0–360°, the color wheel position), Saturation (0–100%, color intensity), and Lightness (0–100%, black to white). HEX and RGB are equivalent and used most in code; HSL is more intuitive for manually adjusting colors because you can change lightness independently of hue.

What is the difference between HSL and HSV (HSB)?

HSL and HSV (also called HSB — Hue, Saturation, Brightness) both use a hue angle and saturation percentage but differ in the third channel. In HSL, 50% Lightness is a pure color, 0% is black, and 100% is white. In HSV, 100% Value/Brightness is a pure color, and 0% is black — there is no way to get white without reducing saturation. Photoshop and most design tools use HSB; CSS uses HSL. The same hue and saturation produce different colors in each model.

How do I convert a hex color code to RGB?

Split the hex code into three 2-character pairs and convert each from hexadecimal to decimal. For #1A2B3C: R = 1A hex = 26 decimal, G = 2B hex = 43 decimal, B = 3C hex = 60 decimal → rgb(26, 43, 60). For shorthand hex like #ABC, expand each digit: #ABC = #AABBCC. In JavaScript: parseInt('1A', 16) returns 26. Most color pickers, CSS preprocessors, and design tools perform this conversion automatically.

What is color opacity/alpha and how is it expressed?

Alpha represents opacity: 0 = fully transparent, 1 (or 100%) = fully opaque. In CSS: rgba(255, 0, 0, 0.5) for 50% transparent red. In 8-digit HEX: #RRGGBBAA, so #FF000080 is 50% transparent red (80 hex = 128 decimal = ~50%). In HSLA: hsla(0, 100%, 50%, 0.5). In Tailwind CSS, opacity is set separately (bg-red-500/50). In SVG, fill-opacity and stroke-opacity control transparency. Note: alpha compositing depends on the background — a transparent element over white looks different than over black.

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

ورودی رنگ

جزئیات فنی

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

این ابزار چه کاری انجام می‌دهد

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

موارد استفادهٔ رایج برای توسعه‌دهندگان

توسعه‌دهندگان هنگام پیاده‌سازی رابط‌های کاربری، ساخت استایل‌های CSS یا کار با سیستم‌های طراحی که به استفاده‌ی یکسان و سازگار از رنگ‌ها نیاز دارند، از ابزارهای انتخاب‌گر رنگ استفاده می‌کنند. تبدیل hex به rgb هنگام کار با قالب‌های مختلف رنگ در CSS، تبدیل مشخصات طراحی به کد، یا تضمین سازگاری رنگ در پلتفرم‌های مختلف ضروری است. بسیاری از توسعه‌دهندگان هنگام یکپارچه‌سازی با ابزارهای طراحی، پردازش رنگ‌های انتخاب‌شده توسط کاربر، یا پیاده‌سازی سیستم‌های تم با چندین نمایش رنگی به تبدیل کد رنگ نیاز دارند. مبدل رنگ هنگام کار با کتابخانه‌های گرافیکی، عملیات canvas یا پردازش تصویر که به قالب‌های رنگی مشخص نیاز دارند کمک می‌کند. قابلیت انتخاب‌گر رنگ آنلاین برای ساخت پالت‌های رنگی، عیب‌یابی مشکلات مرتبط با رنگ، یا تولید واریانت‌های رنگ برای مؤلفه‌های UI ارزشمند است. ابزار قطره‌چکان به استخراج رنگ‌ها از طراحی‌های موجود یا تطبیق رنگ‌ها بین عناصر مختلف کمک می‌کند.

قالب‌ها، نوع‌ها یا گونه‌های داده

انتخاب‌گر رنگ از قالب‌های مختلف نمایش رنگ که در توسعه وب و برنامه‌های طراحی استفاده می‌شوند پشتیبانی می‌کند. کدهای رنگ هگزادسیمال (#RRGGBB یا #RGB) استاندارد CSS و توسعه وب هستند و نمایش فشرده‌ای از رنگ ارائه می‌دهند. مقادیر RGB (قرمز، سبز، آبی) از بازه‌های عددی 0 تا 255 یا مقادیر اعشاری 0 تا 1 برای تعیین دقیق رنگ استفاده می‌کنند. مدل‌های رنگی HSL (فام، اشباع، روشنایی) و HSV (فام، اشباع، مقدار) امکان دست‌کاری شهودی رنگ را بر اساس ادراک انسانی از رنگ فراهم می‌کنند. مبدل hsl برای تنظیمات رنگ کمک می‌کند، در حالی که مبدل hsv برای برنامه‌نویسی گرافیک مفید است. برخی برنامه‌ها برای طراحی چاپ به مقادیر CMYK یا برای گردش‌کارهای دقیق از نظر رنگ به فضای رنگی LAB نیاز دارند. مبدل کد رنگ به‌صورت خودکار تبدیل قالب‌ها، گرد کردن دقت و اعتبارسنجی را انجام می‌دهد تا دقت رنگ در سیستم‌های مختلف تضمین شود.

دام‌های رایج و حالت‌های لبه‌ای

هنگام استفاده از ابزارهای انتخاب‌گر رنگ، توجه داشته باشید که ظاهر رنگ می‌تواند بین نمایشگرها، مرورگرها و سیستم‌عامل‌های مختلف به‌طور قابل‌توجهی متفاوت باشد. فرایند تبدیل hex به rgb ممکن است هنگام تبدیل بین قالب‌ها، به‌ویژه برای رنگ‌هایی که دقیقاً به مقادیر گسسته‌ی RGB نگاشت نمی‌شوند، خطاهای جزئی گرد کردن ایجاد کند. ملاحظات دسترس‌پذیری رنگ نیازمند بررسی نسبت کنتراست و اطمینان از مناسب بودن رنگ‌ها برای کاربران دارای نقص دید رنگی است. برخی قالب‌های رنگی گستره‌ی رنگی (gamut) محدودی دارند، بنابراین رنگ‌ها ممکن است هنگام تبدیل بین فضاهای رنگی متفاوت به نظر برسند. انتخاب‌گر رنگ آنلاین باید اصلاح گاما و تفاوت‌های پروفایل رنگ را که بر نحوه‌ی نمایش رنگ‌ها در زمینه‌های مختلف اثر می‌گذارند در نظر بگیرد. همیشه رنگ‌های انتخاب‌شده را در محیط هدف آزمایش کنید، زیرا رنگ‌ها ممکن است در شرایط نوری مختلف، زمینه‌های پس‌زمینه، یا هنگام نمایش روی انواع دستگاه‌ها متفاوت دیده شوند.

چه زمانی از این ابزار استفاده کنیم در برابر کُد

از این انتخاب‌گر رنگ مبتنی بر مرورگر برای انتخاب سریع رنگ، کاوش طراحی، یا تبدیل رنگ‌ها در حین توسعه استفاده کنید. این ابزار برای انتخاب تعاملی رنگ‌ها، استخراج رنگ از طراحی‌ها، یا تبدیل بین قالب‌های رنگی هنگام کار روی نمونه‌های اولیه یا پروژه‌های کوچک ایده‌آل است. برای برنامه‌های تولیدی، از کتابخانه‌های دست‌کاری رنگ مخصوص زبان برنامه‌نویسی خود (مانند chroma.js برای JavaScript، colorsys برای Python، یا Color برای Java) استفاده کنید که عملیات رنگ را به‌صورت برنامه‌نویسی و با امکان یکپارچه‌سازی با منطق برنامه ارائه می‌دهند. راهکارهای مبتنی بر کد امکان پردازش خودکار رنگ، تولید پالت رنگ و یکپارچه‌سازی با سیستم‌های طراحی یا ابزارهای مدیریت محتوا را فراهم می‌کنند. از ابزارهای مرورگر برای کارهای طراحی و توسعه استفاده کنید، اما برای برنامه‌هایی که به پردازش خودکار رنگ، تولید تم یا قابلیت‌های پیشرفته‌ی دست‌کاری رنگ مانند محاسبه‌ی هارمونی رنگ یا بررسی دسترس‌پذیری نیاز دارند، مدیریت رنگ را به‌صورت برنامه‌نویسی پیاده‌سازی کنید.