Ga naar inhoud
TextArray
100% lokaal

Kleur converter

Converteer kleuren tussen HEX, RGB en HSL, met alfa en een tintpalet.

Invoer
4
Uitvoer

Kleur converter

Plak een kleur in een notatie die CSS begrijpt — #3b82f6, rgb(59, 130, 246), hsl(217, 91%, 60%) — en de andere twee komen onmiddellijk terug. Korte hexadecimale getallen zoals #f00 worden uitgebreid, de leidende hash is optioneel en zowel de oude kommasyntaxis als de nieuwere spatiesyntaxis worden gelezen zonder dat wordt verteld welke u hebt gebruikt. Zet één kleur per regel en een heel palet wordt in één keer geconverteerd, en dat is precies wat u wilt als een ontwerpoverdracht arriveert als een kolom met hexadecimale codes en uw stylesheet in HSL is geschreven.

Alpha overleeft de reis, hoe je het ook schrijft: rgba(59, 130, 246, 0.5), rgb(59 130 246 / 50%) en de 8-cijferige hex #3b82f680 beschrijven allemaal hetzelfde halftransparante blauw, en elk converteert naar de anderen. Schakel 'Alfakanaal behouden' uit als u alleen de ondoorzichtige kleur wilt. Het uitvoerformaatmenu beperkt het resultaat tot alleen hex, RGB of HSL – handig voor bulklijsten – en het syntaxismenu beslist tussen rgb(255, 0, 0) en rgb(255 0 0 / 0.5), dus wat je kopieert, wordt rechtstreeks in de codebase geplakt die je al hebt. Hexuitdraai in hoofdletters is één selectievakje verwijderd.

Schakel het tintenpalet in en elke kleur krijgt een tabel met lichtere en donkerdere varianten, gelijkmatig gemengd richting wit en richting zwart. Het is een snelle manier om hoverstatussen, randen en uitgeschakelde stijlen van één merkkleur af te leiden zonder een ontwerptool te openen. Kies één tot acht stappen per kant; de basiskleur zit in het midden op 0%.

Alles draait in uw browser: geen upload, geen serverrondreis, geen account. Niet-uitgebrachte merkkleuren blijven op uw machine staan. Lijnen die geen kleuren zijn, worden op hun plaats gelaten als CSS-opmerking en meegeteld in de telling, zodat één typefout nooit de rest van een lange lijst verbergt. Benoemde CSS-kleuren zoals rebeccapurple worden niet ondersteund; converteer deze eerst naar hex.

FAQ

Welke kleurnotaties leest het?
Hexuitdraai in 3, 4, 6 en 8 cijfers, met of zonder de leidende hekje; rgb() en rgba(); hsl() en hsla(). De komma- en spatiesyntaxis werken beide, en de tint accepteert deg, rad, grad en turn. Genoemde kleuren zoals rebeccapurple worden niet ondersteund.
Hoe wordt omgegaan met het alfakanaal?
Alpha wordt gelezen vanaf het vierde argument, vanaf de schuine streep en vanaf een hexadecimaal getal van 8 cijfers, en vervolgens teruggedrukt in de door u gekozen notatie. Schakel 'Alfakanaal behouden' uit om in plaats daarvan de ondoorzichtige kleur te krijgen.
Waarom verschuift een kleur met één cijfer als ik deze terug converteer?
HSL wordt afgedrukt als hele graden en hele procenten, dus als je die afgeronde waarde opnieuw leest, kan deze op de aangrenzende 8-bits kleur terechtkomen: hsl(217, 91%, 60%) komt terug als #3c83f6, niet als #3b82f6. Browsers gaan op dezelfde manier rond. Houd hex als uw bron van waarheid wanneer de exacte byte ertoe doet.
Wat doet het tintenpalet?
Het mengt de kleur naar wit en naar zwart in gelijkmatige stappen van lichtheid en vermeldt elke variant, zodat u zweef-, rand- en uitgeschakelde tinten kunt samenstellen vanuit één basiskleur. Kies één tot acht stappen per kant.
Wordt mijn tekst ergens geüpload?
Nee. De conversie wordt volledig in uw browser uitgevoerd en niets dat u plakt, verlaat uw apparaat.