Convertor de unități și culori CSS

Înțelegerea culorilor și unităților CSS

Formatele de culoare HEX, RGB și HSL

CSS acceptă mai multe formate de culoare. <strong>Culorile HEX</strong> folosesc o notație hexazecimală cu șase caractere (de exemplu, <code>#22c55e</code>) și sunt cel mai comun format în designul web.

<strong>RGB</strong> folosește valori zecimale de la 0 la 255 pentru fiecare canal. RGBA extinde cu un canal alfa pentru transparență.

<strong>HSL</strong> este cel mai intuitiv pentru designeri. Nuanța este un grad pe roata culorilor (0–360), saturația și luminozitatea sunt procente.

CSS Named Colors

CSS provides 147 named colors like coral, steelblue, and rebeccapurple. While convenient for prototyping, named colors offer limited precision. Converting a CSS color name to HEX or RGB gives you exact values you can fine-tune for production use.

CMYK pentru tipărire

<strong>CMYK</strong> este modelul de culoare standard pentru tipărire.

HSV în instrumente de design

<strong>HSV</strong> este modelul de culoare nativ în Photoshop, Figma și Sketch.

PX versus REM: Unitățile CSS

<strong>Pixelii (PX)</strong> sunt unități absolute. <strong>Unitățile REM</strong> sunt relative la dimensiunea fontului elementului rădăcină (de obicei 16px). REM asigură scalarea proporțională.

Conversia este simplă: împarte pixelii la 16 pentru a obține valori REM. 24px = 1.5rem.

<strong>Unitățile EM</strong> sunt relative la dimensiunea fontului elementului părinte.

• 1rem = 16px (default browser setting)
• 1em = parent font-size (context-dependent)
• 0.75rem = 12px — common for small/caption text
• 1.25rem = 20px — common for subheadings
• 2rem = 32px — common for section headings

De ce să folosești convertoare CSS?

Conversia manuală între formatele de culoare este plictisitoare și predispusă la erori. Instrumentele automatizate economisesc timp și elimină erorile.

• Instant results — paste a value and get the converted output immediately, no formulas needed.
• Copy-ready output — every result includes a one-click copy button with properly formatted CSS syntax.
• Color preview — see a live swatch of the converted color to visually confirm accuracy.
• No installation — works in any browser, on any device. No extensions, downloads, or signups.
• Developer-friendly — shareable URLs with pre-filled values for easy team collaboration.

Common CSS Conversion Workflows

• Design handoff: Figma and Sketch export colors as HEX. Convert to RGB or HSL if your codebase uses those formats.
• Dark mode generation: Take your light-mode HSL palette, adjust lightness values, and convert back to HEX.
• Accessibility checks: Convert colors to RGB to calculate contrast ratios using the WCAG luminance formula.
• Legacy migration: Convert pixel-based layouts to rem-based responsive systems during refactors.
• Cross-browser debugging: Quickly convert colors to match your source code format.

Supported Conversions