CSS-enheds- og farvekonverter

Forstå CSS-farver og -enheder

Farveformaterne HEX, RGB og HSL

CSS understøtter flere farveformater, hver med unikke fordele. <strong>HEX-farver</strong> bruger en sekscifret hexadecimal notation (f.eks. <code>#22c55e</code>) og er det mest almindelige format inden for webdesign på grund af dets korthed. De repræsenterer røde, grønne og blå kanaler som par af hexadecimale cifre fra 00 til FF.

<strong>RGB (Red, Green, Blue)</strong> bruger decimalværdier fra 0 til 255 for hver kanal. Formatet <code>rgb(34, 197, 94)</code> er mere læsbart og tillader nem manipulation af individuelle kanaler. RGBA udvider dette med en alfakanal til gennemsigtighedskontrol.

<strong>HSL (Hue, Saturation, Lightness)</strong> er det mest intuitive for designere. Farvetone er en grad på farvehjulet (0–360), mens mætning og lyshed er procentværdier. Det gør det nemt at skabe farvevariationer — juster lysheden for nuancer eller mætningen for livlighed.

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 til trykt design

<strong>CMYK</strong> er standardfarvemodellen for tryk.

HSV i designværktøjer

<strong>HSV</strong> er den native farvemodel i Photoshop, Figma og Sketch.

PX vs REM: CSS-enheder forklaret

<strong>Pixels (PX)</strong> er absolutte enheder — 1px er altid 1/96 af en tomme på skærmen. De giver pixelperfekt kontrol, men tilpasser sig ikke brugerens skriftstørrelsesindstillinger. <strong>REM</strong>-enheder er relative til rodelementets skriftstørrelse (typisk 16px). Brug af REM sikrer, at dine layouts skalerer proportionalt, når brugere ændrer deres browsers standardskriftstørrelse, hvilket forbedrer tilgængeligheden.

Konverteringen er ligetil: divider pixels med 16 for at få REM-værdier. For eksempel bliver 24px til 1.5rem.

<strong>EM-enheder</strong> er relative til forældreelementets 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 bruge CSS-konvertere?

Manuel konvertering mellem farveformater er kedelig og fejlbehæftet. Uanset om du oversætter en designers HEX-værdier til HSL for CSS-brugerdefinerede egenskaber, eller konverterer en pixelbaseret mockup til et REM-baseret responsivt layout, sparer automatiserede konverteringsværktøjer tid og eliminerer fejl.

• 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