titel: "Kleurconverter: Converteer HEX, RGB, HSL, HWB en CMYK op de juiste manier en quot; slug: kleurconverter-gids tool: kleurconvertercategorie: kleurtype: cluster
Kleur Converter: Converteer HEX, RGB, HSL, HWB en CMYK op de juiste manier
De eerste keer dat een kleur mij beet was op een print run Ik had een landingspagina gebouwd voor een van mijn WordPress producten, had het merk blauw in de browser afgemeld, en stuurde vervolgens dezelfde & quot; blue" naar een printshop voor een partij stickers Wat terugkwam was een platte, licht vergrijsde marine die in niets leek op het scherm Niemand had de RGB schermkleur omgezet naar CMYK, dus de printer raadde het, en de gok was verkeerd Dat was de dag dat ik stopte met het behandelen van een kleur als een enkele string en begon het te behandelen als één waarde die in meerdere talen tegelijk gesproken moet worden.
Daar is een kleurconverter precies voor Je geeft hem in één syntaxis een kleur en hij geeft je elke andere syntaxis terug, dus het blauw in je CSS, het blauw in je ontwerpbestand, en het blauw dat je printer krijgt zijn allemaal aantoonbaar dezelfde kleur Ik heb de gebouwd kleurconverter op Toolz.dev omdat ik het beu was om hex-codes op drie verschillende sites te plakken om RGB, HSL en CMYK afzonderlijk te krijgen.
tl;dr: Een kleurconverter neemt één kleur en drukt deze in één keer opnieuw uit in HEX, RGB, HSL, HWB en CMYK, plus de dichtstbijzijnde CSS-kleurnaam Gebruik RGB en HEX voor schermen, HSL of HWB wanneer u een kleur met de hand wilt indrukken, en CMYK voor afdrukken De Toolz.dev-converter draait volledig in uw browser, houdt het alfakanaal intact en uploadt nooit wat u plakt.
Wat is een kleurconverter?
Een kleurconverter parseert een kleur die in een gemeenschappelijke CSS-syntaxis is geschreven en berekent het equivalent ervan in de andere. Welke syntaxis er bestaat, en hoe elke syntaxis precies wordt geconverteerd, wordt gedefinieerd door CSS Color Module Level 4. De wiskunde is niet ingewikkeld, maar het met de hand doen is vervelend en foutgevoelig. Omzetten #4466EE naar RGB betekent het splitsen van de zes hex-cijfers in drie paren en het lezen van elk paar als een grondtal-16-getal: 44 is 68, 66 is 102, en EE is 238, geven rgb(68, 102, 238). De andere kant op gaan betekent elk kanaal verdelen in een tweecijferige hex string en ze samenvoegen, naar HSL gaan betekent normaliseren van de kanalen, het minimum en maximum vinden, en daar tint, verzadiging en lichtheid van berekenen Dat wil je niet om 2 uur 's nachts in je hoofd doen.
De waarde van een converter is niet alleen rekenkunde besparen Het is consistentie garanderen Wanneer één tool alle formaten uit één geparseerde kleur produceert, is er geen kans dat de RGB die je hebt gekopieerd en de HSL die je hebt gekopieerd iets andere kleuren beschrijven omdat je tussen stappen verschillend hebt afgerond Eén bron, één waarheid, elk formaat.
Waarom bestaan kleurformaten überhaupt?
Elk kleurformaat overleeft omdat het echt goed is in één baan.
RGB is hoe schermen werken Een display geeft rood, groen, en blauw licht, en het mengen van die drie met verschillende intensiteiten levert elke kleur op die je ziet Dat maakt RGB de moedertaal van de browser: welke syntaxis je ook schrijft in CSS, de rendering engine lost het op naar RGB voordat het een pixel oplicht.
HEX is RGB in steno. #4466EE is hetzelfde als rgb(68, 102, 238), gewoon verpakt in een compacte string die gemakkelijk in een stylesheet of een ontwerptool te plakken is Het is populair omdat het kort en ondubbelzinnig is, niet omdat het capabeler is.
HSL beschrijft een kleur op tint, verzadiging en lichtheid Het is het formaat waar ik naar reik als ik een gebruikersinterface met de hand aan het afstemmen ben Om een knop donkerder te maken bij hover laat ik de lichtheid een paar punten vallen en laat ik tint en verzadiging met rust Proberen dat te doen in rauwe RGB betekent dat alle drie de kanalen met ongelijke hoeveelheden worden veranderd en hopen dat de tint niet afdrijft.
HWB, gedefinieerd in de CSS Color Module Level 4-specificatie (https://www.w3.org/TR/css-color-4/), beschrijft dezelfde tint door hoeveel wit en hoeveel zwart er in gemengd is Het komt netjes overeen met hoe mensen daadwerkelijk over tinten en tinten denken: voeg wit toe om lichter te worden, voeg zwart toe om donkerder te worden Het is nieuwer, dus ik gebruik het vooral als de leesbaarheid van de code belangrijker is dan het bereik van de browser.
CMYK is het printmodel Printers leggen cyaan, magenta, gele, en zwarte inkt op wit papier, en elke inkt trekt licht af in plaats van het toe te voegen Daarom kan een levendige schermkleur er op papier saaier uitzien: de kleurenbereiken die de twee modellen kunnen produceren, gamuts genoemd, zijn verschillend Een converter geeft je de CMYK-benadering, maar het kan geen inkt uitvinden die niet bestaat.
Hoe converteer ik HEX naar RGB en terug?
De meest voorkomende conversie, met een ruime marge, is HEX naar RGB en RGB naar HEX. Hier is de handmatige methode, zodat u elk gereedschap, inclusief het mijne, kunt controleren.
Om HEX naar RGB om te zetten, splitsen de zes cijfers in drie paren en lees elk als een hexadecimaal getal van 0 tot 255. Driecijferige steno like #46E breidt uit door elk cijfer te verdubbelen #4466EE ten eerste. Om RGB naar HEX te converteren, neemt u elke kanaalwaarde, converteert u deze indien nodig naar een tweecijferige hex-reeks met een leidende nul, en voegt u deze samen achter een hash.
In plaats van dit herhaaldelijk te doen, plak je de waarde in de kleurconverter en lees elk formaat in één keer Als je ook visueel een kleur moet kiezen en deze live moet zien updaten, is de color picker is het betere uitgangspunt, en de twee tools delen dezelfde conversiekern, zodat hun cijfers overeenkomen.
Wanneer moet ik CMYK gebruiken in plaats van RGB?
Gebruik CMYK alleen als de uitvoer inkt op papier is Visitekaartjes, stickers, verpakkingen en elke commerciële afdruktaak verwachten CMYK-waarden, en als u RGB naar een printer verzendt, betekent dit dat de printer of de software ervan voor u wordt geconverteerd, vaak met resultaten waarop u zich niet hebt aangemeld. Dat was mijn stickerfout in een zin.
Gebruik RGB en de HEX-steno ervan voor alles wat op een scherm wordt weergegeven: websites, apps, sociale afbeeldingen, video. Als een project beide werelden omvat, bewaar dan RGB of HEX als uw bron van waarheid en genereer de CMYK-benadering met een converter op het moment dat u de overdracht uitvoert om af te drukken, zodat u de CMYK-waarden kunt bekijken en elke kleur kunt markeren die slecht zal verschuiven voordat het u een afdruk kost.
Hoe vergelijken kleurformaten?
| formaat | het beste voor | Alfa-ondersteuning | toonbeeld |
|---|---|---|---|
| hers | Compacte CSS, ontwerpoverdracht | Alleen 8-cijferig formulier | #4466EE |
| RGB/RGBA | Schermen, programmatische kleur | Ja (RGBA) | rgb(68, 102, 238) |
| HSL / HSLA | Hand-tuning tint en lichtheid | Ja (HSLA) | hsl(228, 83%, 60%) |
| HWB | Leesbare tinten en tinten | Ja (met slash alpha) | hwb(228 27% 7%) |
| cmyk | Print, inkt op papier | heel weinig | cmyk(71%, 57%, 0%, 7%) |
De tabel is de moeite waard om in gedachten te houden omdat deze netjes aansluit op een workflow: ontwerp in HEX of kies visueel, stem af in HSL of HWB, verzend naar schermen in RGB of HEX en converteer alleen naar CMYK op de printgrens.
Hoe verloopt transparantie tussen formaten?
Alfa is waar heel wat conversies stilletjes fout gaan Het alfakanaal regelt de opaciteit, van 0 (volledig transparant) tot 1 (volledig ondoorzichtig) RGBA en HSLA dragen het als vierde waarde, en een 8-cijferige HEX draagt het als vierde paar: #4466EECC is dat blauw met ongeveer 80 procent dekking, omdat CC is 204 van de 255. Effen HEX en cmyk() heb helemaal geen alfakanaal.
De Toolz.dev converter behoudt alfa door elk formaat dat het ondersteunt Als je plakt rgba(0, 0, 0, 0.5) jij krijgt #00000080 in de HEXA rij en hsla(0, 0%, 0%, 0.5) in de HSLA rij, die allemaal hetzelfde half-transparante zwart beschrijven, Wanneer je in plaats daarvan de gewone HEX of de CMYK rij kopieert, kopieer je de volledig ondoorzichtige kleur, wat een bewuste keuze is, geen bug: die formaten kunnen geen ondoorzichtigheid uitdrukken, dus ze tonen de kleur alsof het solide is Wanneer transparantie ertoe doet, kopieer dan vanuit een alfa-bewuste rij.
Kan ik een CSS-kleurnaam converteren?
Ja, en het werkt in beide richtingen Typ een trefwoord zoals tomato, rebeccapurple, of slategray en de converter lost het op naar HEX, RGB, HSL, HWB en CMYK. De volledige set van 148 benoemde kleuren komt uit de CSS Color Module Level 4-specificatie, dus de waarden komen precies overeen met wat een browser oplost.
De andere kant op gaan is waar het echt handig wordt Plak een numerieke kleur en de converter rapporteert de exacte CSS-naam als deze overeenkomt, en toont altijd de dichtstbijzijnde benoemde kleur op RGB-afstand als dat niet het geval is Die dichtstbijzijnde overeenkomst is handig voor het benoemen van variabelen en het schrijven van leesbare ontwerpdocumenten: #663399 komt terug als rebeccapurple, en iets dat er dichtbij ligt, komt terug als " Dichtstbijzijnde: rebeccapurple" zodat je weet in welke buurt je bent.
Hoe past dit bij een echte ontwerpworkflow?
Hier is hoe ik kleur daadwerkelijk gebruik in een project, en waar elk hulpmiddel past.
Ik begin met het kiezen van een primaire kleur, meestal visueel met de color picker. Zodra ik mijn merk blauw heb, loop ik het door de kleurconverter om de HEX-, RGB-, HSL- en CMYK-waarden op één plek te vergrendelen, plak ik die in het ontwerpsysteem, zodat elke teamgenoot en elke leverancier vanuit dezelfde cijfers werkt.
Dan bouw ik het palet Ondersteunende tinten komen van nudging lightness in HSL, en ik check elk tekst-op-achtergrond paar met de kleurcontrastcontrole dus het palet is toegankelijk voordat het wordt verzonden, niet na een klacht Als ik een achtergrondbloei nodig heb, voer ik twee van die kleuren in de gradiëntgenerator.
Ten slotte koppel ik voor responsieve afstand en typografie rond al die kleuren het palet aan de CSS klem generator dus maten schalen even soepel als de kleuren consistent zijn Kleur en lay-out zijn twee helften van dezelfde lak.
Als je het belangrijk vindt waar je data naartoe gaat terwijl je werkt, is het de moeite waard om te lezen hoe deze tools ermee omgaan Alles in de kleurenconverter draait client-side, een ontwerpkeuze waarover ik schreef in de gids voor gegevensprivacy in online tools, en het zit naast de rest van mijn dagelijkse uitrusting in de Webontwikkelaar Toolkit.
Is het nauwkeurig genoeg voor productie?
Voor schermwerk wel, zonder kwalificatie HEX, RGB, HSL, en HWB zijn allemaal exacte weergaven van dezelfde sRGB kleur, dus tussen hen round-trips schoon omzetten: converteer een kleur naar HSL en terug en je landt op dezelfde RGB triple, geef of neem één eenheid van afronding op een kanaal Die afronding is inherent aan het weergeven van een continue kleur in gehele kanalen, geen fout in een bepaald gereedschap.
Voor CMYK, behandel de uitvoer als een solide, standaard benadering in plaats van een kleur-beheerde bewijs Echte afdrukkleur hangt af van het specifieke papier, inkten, en ICC profiel dat uw printer gebruikt, die geen browser-based tool kan weten De converter gebruikt de standaard naïeve CMYK formule, die is precies wat de meeste ontwerptools standaard laten zien en is een betrouwbaar uitgangspunt Wanneer een taak kleur-kritisch is, krijg een fysieke bewijs van de printer voor de volledige run Dat is de les die mijn grijze-marine stickers mij geleerd, en het is goedkoper om te leren van deze paragraaf dan van een doos met verkeerde stickers.
Hoe zit het met nieuwere kleurruimten zoals LAB en OKLCH?
Als je CSS op de voet volgt heb je gezien lab(), lch(), oklab(), en oklch() verschijnen in stylesheets en ontwerptools Deze komen uit de CSS Color Module Level 4 specificatie en ze lossen een echt probleem op: RGB, HSL, en HWB zijn allemaal gebonden aan het sRGB schermmodel, dus twee kleuren die er even verschillend uitzien met het oog kunnen heel verschillende numerieke afstanden uit elkaar liggen, en een breed-gamut display kan kleuren tonen die sRGB gewoon niet kan beschrijven De OK kleurruimten zijn perceptueel uniform, wat ze uitstekend maakt voor het genereren van gelijkmatig getrapte paletten en voor het interpoleren van gradiënten die niet modderig zijn in het midden.
Ik heb deze converter bewust gefocust gehouden op de formaten die je in de dagelijkse productie-CSS plakt en met de hand naar printers: HEX, RGB, HSL, HWB en CMYK. Dat is de set die de overgrote meerderheid van de echte taken dekt, en ze worden allemaal netjes toegewezen aan dezelfde sRGB-kleur, dus conversies daartussen zijn exact en omkeerbaar. De ruimten met een groter gamma omvatten beslissingen over gamut-mapping die gemakkelijk subtiel verkeerd te krijgen zijn, en het mengen ervan in een eenvoudige converter zou duidelijkheid opleveren voor dekking die de meeste mensen niet nodig hebben.
De praktische regel die ik volg: reik naar OKLCH wanneer u algoritmisch een palet of een gradiënt genereert en u perceptueel gelijkmatige stappen wilt, en blijf bij HEX, RGB en HSL voor het dagelijkse werk van het schrijven van componenten Wanneer u ontwerpt in OKLCH, converteert u de resulterende ankerkleuren naar HEX of RGB met uw ontwerptool voordat u deze overdraagt, dus de waarden in uw stylesheet zijn dezelfde als deze converter en uw teamgenoten kunnen lezen.
Veelgestelde vragen
Hoe converteer ik HEX naar RGB?
Splits de zescijferige HEX-code in drie paren en lees elk als een hexadecimaal getal van 0 tot 255. In #4466EE, 44 is 68 (rood), 66 is 102 (groen), en EE is 238 (blauw), geven rgb(68, 102, 238). Plak de HEX-code in de converter en de RGB-waarde verschijnt onmiddellijk naast elk ander formaat.
Hoe converteer ik RGB naar HEX?
Converteer elk van de rode, groene en blauwe waarden (0 tot 255) naar een tweecijferig hexadecimaal getal en voeg ze samen na een hash. rgb(68, 102, 238) HALD #4466EE. De converter doet dit direct en geeft u ook het 8-cijferige HEXA-formulier wanneer er een alfawaarde aanwezig is.
Wat is het verschil tussen HSL en HWB?
HSL beschrijft een kleur op tint, verzadiging en lichtheid, terwijl HWB dezelfde tint beschrijft op basis van hoeveel wit en hoeveel zwart erin wordt gemengd. HWB is vaak intuïtiever voor tinten en tinten: toenemende witheid verlicht de kleur en toenemende zwartheid verduistert deze. Beide zijn exact hetzelfde RGB-waarde, zodat u er vrij tussen kunt schakelen.
Wanneer moet ik CMYK gebruiken in plaats van RGB?
Gebruik CMYK voor print en RGB voor schermen CMYK is een subtractief model gebaseerd op cyaan, magenta, gele en zwarte inkten, dus het is wat commerciële printers verwachten RGB is additief en beschrijft licht dat wordt uitgezonden door beeldschermen Een schermkleur heeft een CMYK-benadering, maar de twee gamma's verschillen, dus levendige schermkleuren kunnen er doffer uitzien in print.
Ondersteunt de converter transparantie?
Ja. Geef een alfawaarde door rgba(), hsla(), of een 8-cijferige HEX en de dekking blijft behouden in elke alfa-bewuste uitvoer Formaten zonder alfakanaal, zoals gewone HEX en cmyk(), toon de volledig ondoorzichtige kleur, dus controleer de RGBA- of HEXA-uitvoer wanneer transparantie van belang is.
Kan ik een CSS-kleurnaam converteren?
Ja. typ een CSS-trefwoord zoals tomato, rebeccapurple, of slategray en de converter lost het op naar HEX, RGB, HSL, HWB en CMYK. Het werkt ook omgekeerd: plak een numerieke kleur en het rapporteert de exacte CSS-naam als deze overeenkomt, plus de dichtstbijzijnde benoemde kleur ter referentie.
Is de kleurenomzetter gratis en privé?
Ja. De converter is volledig gratis zonder aanmelding, zonder limieten en zonder watermerken. Alle parsering en conversie worden in uw browser uitgevoerd met behulp van JavaScript aan de clientzijde, dus de kleuren die u invoert verlaten uw apparaat nooit en de tool blijft offline werken zodra de pagina is geladen.
