تبدیلکننده رنگ (HEX/RGB/HSL)
رنگها را بین قالبهای HEX، RGB و HSL تبدیل کنید. رنگی را بهصورت بصری انتخاب کنید یا مقادیر را بهصورت دستی وارد کنید.
#535bebrgb(83, 91, 235)hsl(237, 79%, 62%)نحوه استفاده از این ابزار
- 1
Click the color swatch to open your operating system's color picker and choose a color visually.
- 2
Or type a 6-digit HEX value (such as #535beb, with or without the leading #) into the text field.
- 3
Read the matching rgb(R, G, B) and hsl(H, S%, L%) strings in the result cards below.
- 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 استفاده کنم؟▼
OKLCH و فضاهای رنگی مدرن چطور؟▼
ابزارهای مرتبط
تولیدکننده Box Shadow در CSS
مقادیر box-shadow در CSS را بهصورت دیداری بسازید. در لحظه پیشنمایش بگیرید و CSS تولیدشده را کپی کنید.
مولد گرادیان CSS
گرادیانهای خطی و شعاعی CSS بسازید. رنگها را بهصورت بصری انتخاب کنید و CSS تولیدشده را کپی کنید.
مولد منحنی شتابگیری Cubic Bezier
منحنیهای شتابگیری cubic-bezier برای CSS بسازید. شامل پیشتنظیمهای استاندارد است.
تولیدکننده پالت رنگ
از هر رنگ پایه، پالتهای رنگی هماهنگ تولید کنید. از طرحهای مکمل، متشابه، سهتایی و تکرنگ پشتیبانی میکند.
تولیدکننده Border Radius در CSS
مقادیر پیچیده border-radius در CSS را بهصورت دیداری بسازید. کنترل مستقل روی هر گوشه.
تولیدکننده ()CSS Clamp
مقادیر CSS سیال و واکنشگرا را با clamp() تولید کنید. بهنرمی بین اندازههای کمینه و بیشینه در بازههای viewport مقیاس میگیرد.