Konwerter jednostek i kolorów CSS

Zrozumienie kolorów i jednostek CSS

Formaty kolorów HEX, RGB i HSL

CSS obsługuje kilka formatów kolorów, z których każdy ma unikalne zalety. <strong>Kolory HEX</strong> używają sześcioznakowej notacji szesnastkowej (np. <code>#22c55e</code>) i są najpopularniejszym formatem w projektowaniu stron internetowych ze względu na ich zwięzłość. Reprezentują kanały czerwony, zielony i niebieski jako pary cyfr szesnastkowych od 00 do FF.

<strong>RGB (Red, Green, Blue)</strong> używa wartości dziesiętnych od 0 do 255 dla każdego kanału. Format <code>rgb(34, 197, 94)</code> jest bardziej czytelny i pozwala na łatwą manipulację poszczególnymi kanałami. RGBA rozszerza ten format o kanał alfa do kontroli przezroczystości.

<strong>HSL (Hue, Saturation, Lightness)</strong> jest najbardziej intuicyjny dla projektantów. Barwa to stopień na kole kolorów (0–360), a nasycenie i jasność to wartości procentowe. Ułatwia to tworzenie wariantów kolorów — wystarczy dostosować jasność dla odcieni lub nasycenie dla żywości.

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 do druku

<strong>CMYK</strong> to standardowy model kolorów dla druku.

HSV w narzędziach projektowych

<strong>HSV</strong> to natywny model kolorów w Photoshopie, Figmie i Sketchu.

PX vs REM: wyjaśnienie jednostek CSS

<strong>Piksele (PX)</strong> to jednostki bezwzględne — 1px to zawsze 1/96 cala na ekranie. Zapewniają precyzyjną kontrolę, ale nie reagują na preferencje rozmiaru czcionki użytkownika. <strong>REM</strong> to jednostki względne w stosunku do rozmiaru czcionki elementu głównego (zazwyczaj 16px). Użycie REM zapewnia proporcjonalne skalowanie układów przy zmianie domyślnego rozmiaru czcionki w przeglądarce, poprawiając dostępność.

Konwersja jest prosta: podziel piksele przez 16, aby uzyskać wartości REM. Na przykład 24px to 1.5rem.

<strong>Jednostki EM</strong> są względne wobec rozmiaru czcionki elementu nadrzędnego.

• 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

Dlaczego warto używać konwerterów CSS?

Ręczna konwersja między formatami kolorów jest żmudna i podatna na błędy. Niezależnie od tego, czy tłumaczysz wartości HEX projektanta na HSL dla właściwości niestandardowych CSS, czy konwertujesz układ oparty na pikselach na responsywny układ oparty na REM, zautomatyzowane narzędzia konwersji oszczędzają czas i eliminują błędy.

• 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