HEX RGB-omvandlare

Konvertera färgformat utan att gissa

Färgvärden flyttas ofta mellan verktyg som föredrar olika format. En designer kanske lämnar över en HEX-token, en CSS-animation kan behöva RGB-kanaler och en temajustering är ofta enklast i HSL. Den här HEX RGB-omvandlaren håller de vanliga webbformaten synkroniserade så att du anger den version du har och kopierar den du behöver. Liveförhandsgranskningen gör också misstag tydliga: om en kanal skrivs fel ändras förhandsgranskningen direkt.

Omvandlaren stöder det dagliga CSS-arbetsflödet: sexsiffrig HEX, RGB, RGBA, HSL och HSLA. Alfa styrs separat eftersom opacitet oftast är ett designbeslut snarare än en del av en varumärkesfärgtoken. Sätt alfa till ett för täckande färger, eller sänk det för att skapa överlägg, fokusringar, skuggor och genomskinliga bakgrunder som ändå använder samma grundnyans.

När du ska använda RGB, RGBA, HSL eller HSLA

RGB är en direkt beskrivning av skärmfärg och är användbart när du matchar värden från skärmdumpar, canvas-utdata eller äldre designverktyg. RGBA lägger till transparens, praktiskt för överlägg och diskreta kantlinjer. HSL beskriver färg i termer av nyans, mättnad och ljushet, så det är mer naturligt när du vill skapa relaterade färger: vrid nyansen för en ny accent, sänk mättnaden för ett dämpat tillstånd eller höj ljusheten för en ljusare ton. HSLA ger samma alfakontroll åt den mer lättlästa modellen.

Pålitliga värden för CSS och design tokens

Konsekventa omvandlingar är viktiga i designsystem. Avrundningsfel eller kopierade stavfel kan skapa nästan identiska färger som är svåra att upptäcka men besvärliga att underhålla. Verktyget begränsar RGB-kanaler till det giltiga intervallet 0–255, håller HSL-procentvärden inom 0–100 och formaterar utdata som CSS redo att klistras in. Eftersom allt körs lokalt kan du tryggt konvertera ej lanserade produktfärger, kundpaletter eller interna varumärkestokens utan att ladda upp dem någonstans.