Farvekonverter

Konverter mellem HEX, RGB, HSL, HSV og CMYK. Live-forhåndsvisning. WCAG-kontrasttjekker for tilgængelighed. Intet forlader din browser.

Sådan virker Farvekonverter

Farvekonverter oversætter enhver farve mellem HEX, RGB, HSL, HSV og CMYK-formater øjeblikkeligt, mens du skriver. Den kører også en WCAG-kontrastkontrol mellem to farver, du vælger, og viser kontrastforholdet og bestå/fejl-resultatet for AA/AAA for normal tekst, stor tekst og UI-komponenter. Alle beregninger sker i browseren uden at nogen data sendes nogen steder; intet du skriver forlader din enhed.

At forstå, hvordan den samme farve ser ud på tværs af farvemodeller, er nyttigt ved designoverleveringer. En designer kan angive en brandfarve som HEX #1A4F8C; en CSS-udvikler har brug for HSL-ækvivalenten til tematisering; et printteam har brug for CMYK-opdelingen. Dette værktøj foretager konverteringen i alle retninger på én gang, så du aldrig behøver at køre flere separate konvertere.

Skrevet af Bastien Sulyan

Sådan bruger du Farvekonverter, trin for trin

Skriv en HEX-værdi, klik på et farveprøve, eller angiv RGB-, HSL-, HSV- eller CMYK-værdier i de respektive felter.
Alle andre formatrepræsentationer opdateres øjeblikkeligt for at vise den tilsvarende farve.
For at køre en kontrastkontrol vælger du en forgrundsfarve og en baggrundsfarve ved hjælp af de to farvevælgere.
Læs WCAG-kontrastforholdet og bestå/fejl-badges for AA- og AAA-overensstemmelsesniveauer.
Kopier enhver farveværdi ved hjælp af kopier-ikonet ved siden af hvert felt.

Almindelige anvendelser

En UI-designer konverterer en brand-HEX-kode til HSL for at skrive en CSS brugerdefineret egenskab til et tematiseringssystem.
En webudvikler kontrollerer kontrastforholdet mellem tekst og baggrund inden levering af en komponent for at bekræfte WCAG AA-overensstemmelse.
En printdesigner modtager en web-HEX-farve og har brug for CMYK-ækvivalenten til at matche den i en trykt brochure.
En udvikler har brug for RGB-opdelingen af et design-token til at videregive individuelle kanalværdier til en canvas-tegnefunktion.

Ofte stillede spørgsmål

Understøtter værktøjet alpha-værdier (gennemsigtighed)?

Den nuværende konverter fungerer med fuldt uigennemsigtige farver (alpha = 1). HEXA (8-cifret hex) og RGBA er ikke endnu i omfang. For opacitet angiver du alfakanalen i din CSS separat ved hjælp af rgba()- eller oklch()-notation.

Gemmes eller sendes de farver, jeg angiver, nogen steder?

Nej. Farvekonvertering er ren aritmetik (kanal-omflytning og interval-skalering), der kører udelukkende i browserens JavaScript-motor. Intet du skriver her når nogen server eller ekstern tjeneste.

Hvilke WCAG-kontrastniveauer understøtter kontrolleren?

Værktøjet rapporterer mod WCAG 2.1-succeskriterierne: AA kræver et minimum kontrastforhold på 4,5:1 for normal tekst (under 18 pt eller 14 pt fed) og 3:1 for stor tekst og UI-komponenter. AAA kræver 7:1 for normal tekst og 4,5:1 for stor tekst.

Hvorfor adskiller CMYK-værdier sig mellem dette værktøj og professionel designsoftware?

RGB-til-CMYK-konverteringen, som dette værktøj udfører, er en matematisk formel uden en farveprofil. Professionelle designapplikationer anvender ICC-farveprofiler, der tager højde for blækpunktsforstørrelse og substrategenskaber. CMYK-værdierne her er nyttige til tilnærmelse; til produktionstryk skal du altid anvende din presseprofile i dedikeret software.

Kan jeg konvertere et CSS-farvenavn som »cornflowerblue« her?

CSS-navngivne farver kan ikke skrives direkte ind i konverterfelterne. For at konvertere en navngivet farve finder du først dens HEX-værdi i en CSS-reference (cornflowerblue er #6495ED) og indsætter derefter den HEX i HEX-feltet for at se alle andre formater.

Fungerer værktøjet offline, efter siden er indlæst?

Ja. Farvekonvertering er aritmetik uden ekstern afhængighed. Når siden er i din browser-cache, kan du åbne den uden netværksforbindelse, og alle konverteringer vil fungere normalt.

Relaterede værktøjer

Hold alt lokalt, udforsk komplementære værktøjer.

Alle udviklerværktøjer