Fargekonverterer

Konverter mellom HEX, RGB, HSL, HSV og CMYK. Direkteforhåndsvisning. WCAG-kontrastkontroll for tilgjengelighet. Ingenting forlater nettleseren.

Slik fungerer Fargekonverterer

Fargekonverter oversetter enhver farge mellom HEX-, RGB-, HSL-, HSV- og CMYK-formater øyeblikkelig mens du skriver. Den kjører også en WCAG-kontrastsjekk mellom to farger du velger, og viser kontrasteforholdet og AA/AAA bestått/ikke bestått-resultatet for normal tekst, stor tekst og UI-komponenter. Alle beregninger skjer i nettleseren uten at data sendes noe sted; ingenting du skriver forlater enheten din.

Å forstå hvordan den samme fargen ser ut på tvers av fargemodeller er nyttig i designoverlevering. En designer kan spesifisere en merkevarefarge som HEX #1A4F8C; en CSS-utvikler trenger HSL-ekvivalenten for temaing; et trykkteam trenger CMYK-nedbrytningen. Dette verktøyet gjør konverteringen i alle retninger på én gang slik at du aldri trenger å kjøre flere separate konvertere.

Skrevet av Bastien Sulyan

Slik bruker du Fargekonverterer, steg for steg

Skriv inn en HEX-verdi, klikk en fargeprøve, eller skriv inn RGB-, HSL-, HSV- eller CMYK-verdier i de respektive feltene.
Alle andre formatrepresentasjoner oppdateres umiddelbart for å vise den tilsvarende fargen.
For å kjøre en kontrastsjekk, velg en forgrunnsfarge og en bakgrunnsfarge ved hjelp av de to fargevalgene.
Les WCAG-kontrastforholdet og bestått/ikke bestått-merkene for AA- og AAA-samsvarsnivåene.
Kopier en hvilken som helst fargeverdi ved hjelp av kopieringsikonet ved siden av hvert felt.

Vanlige bruksområder

En UI-designer konverterer en merkevare-HEX-kode til HSL for å skrive en CSS-egendefinert egenskap for et temaingssystem.
En webutvikler sjekker kontrastforholdet mellom tekstfargen og bakgrunnen før han sender ut en komponent for å bekrefte WCAG AA-samsvar.
En trykkdesigner mottar en web-HEX-farge og trenger CMYK-ekvivalenten for å matche den i en trykt brosjyre.
En utvikler trenger RGB-nedbrytningen av et designtoken for å sende individuelle kanalverdier til en canvas-tegnefunksjon.

Ofte stilte spørsmål

Støtter verktøyet alfa (gjennomsiktighet)-verdier?

Den gjeldende konverteren fungerer med fullt ugjennomsiktige farger (alfa = 1). HEXA (8-sifret hex) og RGBA er ikke i omfang ennå. For gjennomsiktighet, angi alfakanalen i CSS-en din separat ved å bruke rgba()- eller oklch()-notasjonen.

Lagres eller sendes fargene jeg angir noe sted?

Nei. Fargekonvertering er ren aritmetikk (kanalremapping og rekkeviddeskalering) som kjøres helt i nettleserens JavaScript-motor. Ingenting du skriver her når noen server eller ekstern tjeneste.

Hvilke WCAG-kontrastnivåer støtter sjekken?

Verktøyet rapporterer mot WCAG 2.1-suksesskriterier: AA krever et minimumskontrasteforhold på 4,5:1 for normal tekst (under 18pt eller 14pt fet) og 3:1 for stor tekst og UI-komponenter. AAA krever 7:1 for normal tekst og 4,5:1 for stor tekst.

Hvorfor skiller CMYK-verdier seg mellom dette verktøyet og profesjonell designprogramvare?

RGB-til-CMYK-konverteringen dette verktøyet utfører er en matematisk formel uten en fargeprofil. Profesjonelle designapplikasjoner bruker ICC-fargeprofiler som tar hensyn til blekksettforsterkning og substratmedegenskaper. CMYK-verdiene her er nyttige for tilnærming; for produksjonstrykk, bruk alltid presseprofilen din i dedikert programvare.

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

CSS-navngitte farger skrives ikke direkte inn i konvertererfeltene. For å konvertere en navngitt farge, finn først HEX-verdien i en CSS-referanse (cornflowerblue er #6495ED), og lim deretter inn den HEX-en i HEX-feltet for å se alle andre formater.

Fungerer verktøyet frakoblet etter at siden er lastet?

Ja. Fargekonvertering er aritmetikk uten ekstern avhengighet. Når siden er i nettleserens hurtigbuffer, kan du åpne den uten nettverksforbindelse, og alle konverteringer vil fungere normalt.

Relaterte verktøy

Hold alt lokalt, utforsk komplementære verktøy.

Alle utviklerverktøy