CSS Color Converter: HEX to RGB aur HSL

CSS colors ko HEX, RGB, aur HSL ke beech convert karein, live swatch aur alpha support ke saath.

Jo bhi color aap daalte hain woh aapke browser mein locally convert hota hai, aur kuch bhi server par upload nahi hota.

Banaya aur maintain kiya: Udit Agarwal

HEX, RGB and HSL Color Codes, Explained

Readability check kar rahe hain? Contrast Checker try karein.

CSS Color Converter ke baare mein

Yeh CSS color converter kisi bhi color value ko ek saath HEX, RGB, aur HSL mein badal deta hai, ek live swatch preview ke saath taaki aap type karte hi exact shade dekh sakein. Ek hex code, ek rgb() ya hsl() value, ya ek aam CSS color name jaise blue, teal, ya gold paste karein, aur yeh turant input ko teeno formats mein normalize kar deta hai. Yeh transparency bhi handle karta hai, jisme rgba(), hsla(), aur alpha channel wala 8-digit hex shamil hai. Chahe aap kisi design token ke liye hex to rgb karein, stylesheet ke liye rgb to hex convert karein, ya palette tune karte waqt ek hsl value check karein, yeh har format ko sync mein rakhta hai. Front-end developers, designers, aur QA engineers ke liye banaya gaya jo rozana color formats sambhaalte hain. Sab kuch aapke browser mein locally chalta hai, isliye jo values aap daalte hain woh device se bahar nahi jaati.

Features

  • Ek hi input se HEX, RGB, aur HSL ek saath convert karta hai
  • Aam CSS color names jaise blue, teal, aur gold pehchaanta hai
  • rgba(), hsla(), aur 8-digit hex alpha ke zariye transparency support karta hai
  • Live color swatch preview type karte hi turant update hota hai
  • Shorthand 3- aur 4-digit hex codes accept karta hai
  • Percentage aur 0-255 RGB channel values normalize karta hai
  • Jab koi value parse na ho to ek saaf inline error dikhata hai
  • Aapke browser mein locally process hota hai

CSS Color Converter kaise use karein

  1. Color input box mein ek color type ya paste karein.
  2. Ek hex code, rgb(), hsl(), ya ek CSS color name jaise blue use karein.
  3. Result rows mein converted HEX, RGB, aur HSL values padhein.
  4. Exact color preview karne ke liye input ke bagal wala swatch check karein.

Example

Input

#3b82f6

Output

HEX  #3b82f6
RGB  rgb(59, 130, 246)
HSL  hsl(217, 91%, 60%)

Ek hex value matching live swatch ke saath RGB aur HSL mein convert hui.

Common errors aur troubleshooting

  • Ek value type karne ke baad "Couldn't parse that color" dikhta hai. — Ek valid hex code, rgb()/rgba(), hsl()/hsla(), ya ek supported CSS color name use karein; faltu characters ya missing parentheses parsing tod dete hain.
  • Ek CSS color name jaise "salmon" pehchaana nahi jaata. — Sirf aam names ka ek curated set support hota hai. Iski jagah equivalent hex ya rgb() value daalein.
  • Convert karne ke baad alpha kho jaata hai. — Input mein alpha channel shamil karein, jaise rgba(0,0,0,0.5) ya ek 8-digit hex jaise #00000080, aur woh sabhi formats mein carry hoga.
  • 255 se upar ke RGB values ya percentages galat lagte hain. — Channels valid range mein clamp ho jaate hain; expected result ke liye 0-255 ke numbers ya 0%-100% ke percentages daalein.

Aksar pooche jaane wale sawaal

CSS Color Converter kya hai?
Yeh ek in-browser tool hai jo kisi bhi HEX, rgb()/rgba(), hsl()/hsla(), ya aam CSS color name ko padhkar use HEX, RGB, aur HSL mein ek live swatch preview ke saath convert karta hai.
Is tool se HEX ko RGB aur HSL mein kaise convert karun?
Ek hex code jaise #3b82f6 Color box mein paste karein, aur CSS Color Converter turant result rows mein matching rgb() aur hsl() values dikha deta hai.
Kya CSS Color Converter transparency aur alpha channels support karta hai?
Haan. rgba(), hsla(), aur alpha value wala 8-digit hex sab parse hote hain, aur alpha har output format mein preserve hota hai.
Kya main code ki jagah ek CSS color name paste kar sakta hoon?
Haan, standard names jaise blue, teal, gold, aur indigo pehchaane jaate hain aur HEX, RGB, aur HSL mein convert hote hain.
Kya yeh shorthand hex codes accept karta hai?
Haan, 3-digit aur 4-digit shorthand hex jaise #f00 ya #f00a conversion se pehle apne aap expand ho jaate hain.
Kya jo color values main daalta hoon woh kahin upload hoti hain?
Nahi. CSS Color Converter poori tarah aapke browser mein chalta hai, isliye jo values aap daalte hain woh locally process hoti hain aur kabhi device se bahar nahi jaati.

Related tools

  • Contrast Checker — Do colors ke beech WCAG contrast ratio aur AA/AAA pass hota hai ya nahi, check karein.
  • CSS / SCSS Formatter — CSS/SCSS/LESS beautify ya minify karein, properties sort karein aur duplicates hatayein.
  • SVG Optimizer — SVG minify karein: comments, metadata aur editor cruft hatayein, aur whitespace collapse karein.
  • Number Base Converter — Integers ko binary, octal, decimal aur hexadecimal ke beech convert karein.
  • HTML Escape / Unescape — HTML special characters aur entities ko escape aur unescape karein.
  • JS / TS Formatter — Prettier options ke saath JavaScript, TypeScript aur JSX/TSX ko beautify karein, ya plain JavaScript minify karein.
  • HTML Formatter — HTML beautify ya minify karein, inline CSS/JS format karein aur result preview karein.

Code Formatters ke aur tools

  • Text Compare karein — Do texts ko line-by-line compare karein aur additions aur deletions dekhein.
  • MDX Converter — MDX ko text ke roop mein render karein, HTML → MDX convert karein aur text ko literal MDX mein escape karein.
  • CSS / SCSS Formatter — CSS/SCSS/LESS beautify ya minify karein, properties sort karein aur duplicates hatayein.
  • JS / TS Formatter — Prettier options ke saath JavaScript, TypeScript aur JSX/TSX ko beautify karein, ya plain JavaScript minify karein.
  • HTML Formatter — HTML beautify ya minify karein, inline CSS/JS format karein aur result preview karein.
  • XML Formatter — XML ko beautify, minify aur validate karein, aur XML ↔ JSON convert karein.
  • SQL Formatter — MySQL, PostgreSQL, SQL Server, SQLite, BigQuery aur Oracle ke liye SQL format karein.
  • GraphQL Formatter — GraphQL queries aur schemas format ya minify karein, syntax validate karein aur operations extract karein.
  • Dockerfile Formatter — Ek Dockerfile format karein aur best-practice aur lint suggestions paayein.
  • MongoDB Query Formatter — MongoDB shell queries aur aggregation pipelines format karein.
  • Contrast Checker — Do colors ke beech WCAG contrast ratio aur AA/AAA pass hota hai ya nahi, check karein.
  • Mermaid Diagram Renderer — Mermaid diagrams (flow, sequence, gantt) ko aapke browser mein SVG mein render karein.

Code Formatters ke sabhi tools dekhein (32) · Saare tools