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.

OKLCH — CSS Color Level 4

OKLCH (Lightness, Chroma, Hue) is the modern perceptually uniform color space introduced in CSS Color Level 4. Unlike HSL, OKLCH ensures that colors with the same lightness value actually appear equally bright to the human eye. It's supported in all modern browsers and is becoming the preferred format for design systems that need consistent, predictable color palettes.

LCH — CIE LCH Color Space

LCH (Lightness, Chroma, Hue) is the cylindrical representation of the CIELAB color space. It provides perceptually uniform color differences, meaning equal numerical changes produce visually equal differences. LCH is supported in CSS Color Level 4 via the lch() function and is widely used in color science, print workflows, and advanced design systems.

LAB — CIELAB Color Space

CIELAB (L*a*b*) is a device-independent color space that models human vision. L represents lightness (0–100), while a and b represent color-opponent dimensions (green–red and blue–yellow). LAB is the foundation for Delta E color difference calculations and is essential for color matching, print proofing, and scientific color analysis.

HWB — Hue Whiteness Blackness

HWB (Hue, Whiteness, Blackness) is a CSS Color Level 4 format designed to be more intuitive than HSL. You start with a hue, then add whiteness to lighten and blackness to darken. It's supported via the hwb() function in modern browsers and is particularly useful for creating tints and shades without complex math.

Tailwind CSS Colors

Tailwind CSS ships with a comprehensive color palette organized by name and shade (e.g., blue-500, rose-400). Converting Tailwind color classes to HEX codes is essential when integrating Tailwind designs with external tools, creating custom themes, or working with design tools that require hex values.

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