Konverter Unit dan Warna CSS

Memahami Warna dan Unit CSS

Format Warna HEX, RGB, dan HSL

CSS mendukung beberapa format warna. <strong>Warna HEX</strong> menggunakan notasi heksadesimal enam karakter (misalnya, <code>#22c55e</code>) dan merupakan format paling umum dalam desain web.

<strong>RGB</strong> menggunakan nilai desimal dari 0 hingga 255 untuk setiap saluran. RGBA memperluas ini dengan saluran alfa untuk kontrol transparansi.

<strong>HSL</strong> paling intuitif bagi desainer. Hue adalah derajat pada roda warna (0–360), sementara Saturation dan Lightness adalah persentase.

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 untuk desain cetak

<strong>CMYK</strong> adalah model warna standar untuk cetak.

HSV di alat desain

<strong>HSV</strong> adalah model warna asli di Photoshop, Figma, dan Sketch.

PX vs REM: Unit CSS Dijelaskan

<strong>Piksel (PX)</strong> adalah unit absolut. <strong>REM</strong> adalah unit relatif terhadap ukuran font elemen root (biasanya 16px). Menggunakan REM memastikan tata letak berskala proporsional.

Konversinya langsung: bagi piksel dengan 16 untuk mendapatkan nilai REM. Misalnya, 24px sama dengan 1.5rem.

<strong>Unit EM</strong> relatif terhadap ukuran font elemen induk.

• 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

Mengapa Menggunakan Konverter CSS?

Mengonversi secara manual antara format warna itu membosankan dan rawan kesalahan. Alat konversi otomatis menghemat waktu dan menghilangkan kesalahan.

• 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