RevealTheme logo

تبدیل‌کننده رنگ (HEX/RGB/HSL)

رنگ‌ها را بین قالب‌های HEX، RGB و HSL تبدیل کنید. رنگی را به‌صورت بصری انتخاب کنید یا مقادیر را به‌صورت دستی وارد کنید.

HEX
#535beb
RGB
rgb(83, 91, 235)
HSL
hsl(237, 79%, 62%)

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

  1. 1

    Click the color swatch to open your operating system's color picker and choose a color visually.

  2. 2

    Or type a 6-digit HEX value (such as #535beb, with or without the leading #) into the text field.

  3. 3

    Read the matching rgb(R, G, B) and hsl(H, S%, L%) strings in the result cards below.

  4. 4

    Copy whichever format you need straight into your CSS or design file.

تبدیل‌کننده رنگ (HEX/RGB/HSL) چیست؟

HEX، RGB و HSL سه روش برای بیان یک رنگ یکسان هستند. HEX (#RRGGBB) رایج‌ترین قالب در CSS و ابزارهای طراحی است. RGB (rgb(R,G,B)) کانال‌ها را به‌صورت عددی جدا می‌کند. HSL (hsl(H,S%,L%)) برای انسان‌ها شهودی‌تر است: hue همان رنگ است، saturation شدت آن است و lightness روشنایی آن است. هنگام طراحی پالت‌ها از HSL استفاده کنید؛ برای پیاده‌سازی آن را به HEX تبدیل کنید.

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

  • Translating a brand HEX code from a style guide into the rgb() values a legacy stylesheet or email template requires.

  • Grabbing the HSL form of a color so you can nudge its lightness or saturation while keeping the same hue for a palette.

  • Checking the exact RGB channels of a color picked from a screenshot or mockup before writing it into CSS.

  • Confirming what a designer's HEX swatch becomes in RGB for a canvas, SVG, or charting library that wants numeric channels.

  • Teaching or learning how hexadecimal color notation maps to decimal RGB and to the HSL model.

  • Quickly sampling a color visually with the picker and reading all three CSS-ready notations at once.

پرسش‌های متداول

چه زمانی باید به‌جای HEX از HSL استفاده کنم؟
هنگام طراحی: HSL به شما امکان می‌دهد lightness یا saturation را به‌صورت مستقل تنظیم کنید. سپس برای کد آن را به HEX تبدیل کنید.
OKLCH و فضاهای رنگی مدرن چطور؟
OKLCH از نظر ادراکی یکنواخت است و برای دسترس‌پذیری بهتر عمل می‌کند. در CSS Color Level 4 پشتیبانی می‌شود (همه مرورگرهای مدرن).

ابزارهای مرتبط