CSS-enhets- och färgkonverterare

Förstå CSS-färger och -enheter

Färgformaten HEX, RGB och HSL

CSS stöder flera färgformat, var och en med unika fördelar. <strong>HEX-färger</strong> använder en sexsiffrig hexadecimal notation (t.ex. <code>#22c55e</code>) och är det vanligaste formatet inom webbdesign tack vare sin korthet. De representerar röda, gröna och blå kanaler som par av hexadecimala siffror från 00 till FF.

<strong>RGB (Red, Green, Blue)</strong> använder decimalvärden från 0 till 255 för varje kanal. Formatet <code>rgb(34, 197, 94)</code> är mer läsbart och tillåter enkel manipulering av enskilda kanaler. RGBA utökar detta med en alfakanal för transparenskontroll.

<strong>HSL (Hue, Saturation, Lightness)</strong> är det mest intuitiva för designers. Nyans är en grad på färghjulet (0–360), medan mättnad och ljushet är procentvärden. Det gör det enkelt att skapa färgvariationer — justera ljusheten för nyanser eller mättnaden för livfullhet.

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 för tryckdesign

<strong>CMYK</strong> är standardfärgmodellen för tryck.

HSV i designverktyg

<strong>HSV</strong> är den inbyggda färgmodellen i Photoshop, Figma och Sketch.

PX vs REM: CSS-enheter förklarade

<strong>Pixlar (PX)</strong> är absoluta enheter — 1px är alltid 1/96 av en tum på skärmen. De ger pixelperfekt kontroll men anpassar sig inte efter användarens teckenstorleksinställningar. <strong>REM</strong>-enheter är relativa till rotelementets teckenstorlek (vanligtvis 16px). Att använda REM säkerställer att dina layouter skalas proportionellt när användare ändrar sin webbläsares standardteckenstorlek, vilket förbättrar tillgängligheten.

Konverteringen är enkel: dela pixlar med 16 för att få REM-värden. Till exempel blir 24px 1.5rem.

<strong>EM-enheter</strong> är relativa till föräldraelementets teckenstorlek.

• 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

Varför använda CSS-konverterare?

Manuell konvertering mellan färgformat är tråkigt och felbenäget. Oavsett om du översätter en designers HEX-värden till HSL för CSS-anpassade egenskaper, eller konverterar en pixelbaserad mockup till en REM-baserad responsiv layout, sparar automatiserade konverteringsverktyg tid och eliminerar misstag.

• 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