Конвертер одиниць і кольорів CSS

Розуміння кольорів та одиниць CSS

Формати кольорів HEX, RGB та HSL

CSS підтримує кілька форматів кольорів. <strong>Кольори HEX</strong> використовують шестизначну шістнадцяткову нотацію (наприклад, <code>#22c55e</code>) і є найпоширенішим форматом у веб-дизайні.

<strong>RGB</strong> використовує десяткові значення від 0 до 255 для кожного каналу. RGBA розширює це каналом альфа для контролю прозорості.

<strong>HSL</strong> є найбільш інтуїтивним для дизайнерів. Відтінок — це градус на колірному колі (0–360), а насиченість та яскравість — відсотки.

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 для друку

<strong>CMYK</strong> — стандартна колірна модель для друку.

HSV в інструментах дизайну

<strong>HSV</strong> — рідна колірна модель у Photoshop, Figma та Sketch.

PX проти REM: одиниці CSS

<strong>Пікселі (PX)</strong> — це абсолютні одиниці. <strong>REM</strong> — це відносні одиниці щодо розміру шрифту кореневого елемента (зазвичай 16px). Використання REM гарантує пропорційне масштабування макетів.

Конвертація проста: поділіть пікселі на 16, щоб отримати значення REM. Наприклад, 24px дорівнює 1.5rem.

<strong>Одиниці EM</strong> відносні до розміру шрифту батьківського елемента.

• 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

Чому варто використовувати конвертери CSS?

Ручна конвертація між форматами кольорів — це нудно та схильно до помилок. Автоматизовані інструменти конвертації заощаджують час та усувають помилки.

• 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