رنگ کنورٹر

ٹرینڈنگ 🔥

HEX، RGB، HSL کے درمیان رنگ تبدیل کریں

ڈیولپر ٹولز

رنگ کنورٹر کو کیسے استعمال کریں

  1. 1کسی بھی سپورٹڈ فارمیٹ میں رنگ کی ویلیو درج کریں
  2. 2فوری طور پر تمام دیگر فارمیٹس میں تبدیل ہوتا ہے
  3. 3لائیو کلر پریویو دیکھیں

رنگ کنورٹر کے بارے میں

کلر کنورٹر HEX، RGB، RGBA، HSL اور HSLA فارمیٹس کے درمیان رنگ کی ویلیوز تبدیل کرنے کا ایک جامع ٹول ہے۔ لائیو کلر پریویو دکھاتا ہے۔

رنگ کنورٹر کی اہم خصوصیات

  • Convert between HEX, RGB, RGBA, HSL, and HSLA instantly
  • Enter any format and all others update simultaneously
  • Visual color preview swatch updates in real time
  • Browser color picker for interactive color selection
  • Supports both 3-digit (#RGB) and 6-digit (#RRGGBB) HEX formats
  • Handles alpha/transparency channel in RGBA and HSLA
  • One-click copy for each color format
  • Works entirely in-browser — no server requests

معاون فارمیٹس

ان پٹ فارمیٹس

HEX (#RRGGBB, #RGB)RGB (rgb(r, g, b))RGBA (rgba(r, g, b, a))HSL (hsl(h, s%, l%))HSLA (hsla(h, s%, l%, a))

آؤٹ پٹ فارمیٹس

HEXRGBRGBAHSLHSLA

cornflowerblue جیسے نامی CSS رنگ ان پٹ کے طور پر سپورٹ نہیں ہیں۔

مثالیں

Convert a Figma HEX color to HSL for CSS

Translate a design tool HEX value to HSL for use in CSS custom properties.

ان پٹ

#3B82F6

آؤٹ پٹ

RGB: rgb(59, 130, 246) | HSL: hsl(217, 91%, 60%) | HSLA: hsla(217, 91%, 60%, 1)

Add transparency to an RGB color

Get the RGBA equivalent of a solid color with 50% opacity for a semi-transparent overlay.

ان پٹ

rgb(0, 0, 0) with alpha 0.5

آؤٹ پٹ

RGBA: rgba(0, 0, 0, 0.5) | HEX with alpha: #00000080

عام استعمال کے معاملات

  • Translating HEX colors from design tools (Figma, Sketch) into CSS RGB or HSL values
  • Converting solid colors to RGBA for semi-transparent overlays and backgrounds
  • Using HSL values for programmatic lightening and darkening in CSS custom properties
  • Bridging color formats between front-end code and back-end APIs
  • Verifying that different format representations of a color are equivalent
  • Quickly checking the RGB values of a HEX color in a design spec

مسئلہ حل کرنا

HEX value produces a different color than expected

حل

HEX values are case-insensitive but must be exactly 3 or 6 hexadecimal digits after the #. Ensure you have not missed a character — #FF0 (3-digit) and #FF0000 (6-digit) are both valid red.

HSL hue value is out of range

حل

HSL hue is a value from 0 to 360 degrees. Saturation and lightness are percentages (0–100%). Enter values within these ranges to get a valid color.

Alpha value in RGBA/HSLA is not working

حل

Alpha is a value from 0 (fully transparent) to 1 (fully opaque). Values like 0.5 represent 50% opacity. Do not enter a percentage — use a decimal between 0 and 1.

اکثر پوچھے جانے والے سوالات

What color formats are supported?

HEX (#RRGGBB and #RGB), RGB (rgb(r, g, b)), RGBA (rgba(r, g, b, a)), HSL (hsl(h, s%, l%)), and HSLA (hsla(h, s%, l%, a)). Enter any format and all others are calculated instantly.

What is the difference between RGB and HSL?

RGB defines colors as intensities of red, green, and blue light. HSL defines colors by hue (0–360°), saturation (0–100%), and lightness (0–100%). HSL is more intuitive for adjusting color properties — changing lightness darkens or lightens a color without affecting its hue.

When should I use RGBA instead of HEX?

Use RGBA when you need transparency (alpha channel). HEX does not natively support transparency in all browsers (HEX with alpha is #RRGGBBAA). RGBA is the most universally compatible format for transparent colors in CSS.

What does the alpha value in RGBA represent?

Alpha (the fourth value in RGBA) represents opacity: 0 is fully transparent, 1 is fully opaque. Values like 0.5 give 50% transparency, allowing the background to show through.

Can I convert CSS named colors like "cornflowerblue"?

Named CSS colors are not currently supported as input. You can find the HEX value of any named color from a CSS reference and enter the HEX value to convert to other formats.

Is there a difference between HEX shorthand (#RGB) and full HEX (#RRGGBB)?

#RGB is shorthand for #RRGGBB where each digit is doubled. #F80 equals #FF8800. Both represent the same color; shorthand is only valid when both digits of each pair are identical.

Is my data sent to a server?

No. All conversions are performed locally in your browser using JavaScript math. No data is transmitted anywhere.

Can I use this to find the HSL lightness of a color?

Yes. Enter the HEX or RGB value and the HSL output shows the lightness percentage. You can then adjust the lightness in your CSS to create lighter or darker variants of the same hue.