CSS-yksikkö- ja värimuunnin

CSS-värien ja -yksiköiden ymmärtäminen

HEX-, RGB- ja HSL-värimuodot

CSS tukee useita värimuotoja, joista jokaisella on ainutlaatuisia etuja. <strong>HEX-värit</strong> käyttävät kuusinumeroista heksadesimaalimerkintää (esim. <code>#22c55e</code>) ja ovat yleisin muoto web-suunnittelussa lyhyytensä ansiosta. Ne edustavat punaista, vihreää ja sinistä kanavaa heksadesimaalilukuparein 00:sta FF:ään.

<strong>RGB (Red, Green, Blue)</strong> käyttää desimaaliarvoja 0–255 kullekin kanavalle. Muoto <code>rgb(34, 197, 94)</code> on luettavampi ja mahdollistaa yksittäisten kanavien helpon muokkauksen. RGBA laajentaa tätä alfa-kanavalla läpinäkyvyyden hallintaan.

<strong>HSL (Hue, Saturation, Lightness)</strong> on suunnittelijoille intuitiivisin. Sävy on aste väriympyrällä (0–360), kun taas kylläisyys ja kirkkaus ovat prosentteja. Tämä tekee värimuunnelmien luomisesta helppoa — säädä kirkkautta sävyille tai kylläisyyttä elävyydelle.

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 painosuunnitteluun

<strong>CMYK</strong> on painon vakiovärimalli.

HSV suunnittelutyökaluissa

<strong>HSV</strong> on Photoshopin, Figman ja Sketchin natiivi värimalli.

PX vs REM: CSS-yksiköt selitettynä

<strong>Pikselit (PX)</strong> ovat absoluuttisia yksiköitä — 1px on aina 1/96 tuumaa näytöllä. Ne tarjoavat pikselitarkan hallinnan, mutta eivät reagoi käyttäjän kirjasinkoon asetuksiin. <strong>REM</strong>-yksiköt ovat suhteellisia juurielementin kirjasinkokoon (yleensä 16px). REM:n käyttö varmistaa, että asettelusi skaalautuvat suhteellisesti käyttäjien muuttaessa selaimen oletuskirjasinkokoa, mikä parantaa saavutettavuutta.

Muunnos on suoraviivainen: jaa pikselit 16:lla saadaksesi REM-arvot. Esimerkiksi 24px on 1.5rem.

<strong>EM-yksiköt</strong> ovat suhteellisia vanhemman elementin kirjasinkokoon.

• 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

Miksi käyttää CSS-muuntimia?

Manuaalinen muuntaminen värimuotojen välillä on työlästä ja virhealtista. Olipa kyse suunnittelijan HEX-arvojen kääntämisestä HSL:ksi CSS-mukautettuihin ominaisuuksiin tai pikselipohjaisen mallin muuntamisesta REM-pohjaiseksi responsiiviseksi asetteluksi, automatisoidut muunnostyökalut säästävät aikaa ja poistavat virheet.

• 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