CSS-enhets- og fargekonverterer

Forstå CSS-farger og -enheter

Fargeformatene HEX, RGB og HSL

CSS støtter flere fargeformater, hver med unike fordeler. <strong>HEX-farger</strong> bruker en sekssifret heksadesimal notasjon (f.eks. <code>#22c55e</code>) og er det vanligste formatet innen webdesign på grunn av sin korthet. De representerer røde, grønne og blå kanaler som par av heksadesimale sifre fra 00 til FF.

<strong>RGB (Red, Green, Blue)</strong> bruker desimalverdier fra 0 til 255 for hver kanal. Formatet <code>rgb(34, 197, 94)</code> er mer lesbart og tillater enkel manipulering av individuelle kanaler. RGBA utvider dette med en alfakanal for transparenskontroll.

<strong>HSL (Hue, Saturation, Lightness)</strong> er det mest intuitive for designere. Fargetone er en grad på fargehjulet (0–360), mens metning og lyshet er prosentverdier. Dette gjør det enkelt å lage fargevariasjoner — juster lysheten for nyanser eller metningen for livlighet.

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 for trykkdesign

<strong>CMYK</strong> er standard fargemodell for trykk.

HSV i designverktøy

<strong>HSV</strong> er den innebygde fargemodellen i Photoshop, Figma og Sketch.

PX vs REM: CSS-enheter forklart

<strong>Piksler (PX)</strong> er absolutte enheter — 1px er alltid 1/96 av en tomme på skjermen. De gir pikselperfekt kontroll, men tilpasser seg ikke brukerens skriftstørrelsesinnstillinger. <strong>REM</strong>-enheter er relative til rotelementets skriftstørrelse (vanligvis 16px). Bruk av REM sikrer at layoutene dine skalerer proporsjonalt når brukere endrer nettleserens standard skriftstørrelse, noe som forbedrer tilgjengeligheten.

Konverteringen er enkel: del piksler med 16 for å få REM-verdier. For eksempel blir 24px til 1.5rem.

<strong>EM-enheter</strong> er relative til foreldreelementets skriftstørrelse.

• 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

Hvorfor bruke CSS-konverterere?

Manuell konvertering mellom fargeformater er kjedelig og feilutsatt. Enten du oversetter en designers HEX-verdier til HSL for CSS-egendefinerte egenskaper, eller konverterer en pikselbasert mockup til et REM-basert responsivt oppsett, sparer automatiserte konverteringsverktøy tid og eliminerer feil.

• 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