Ga naar inhoud
TextArray1.41.0
100% lokaal

CSS-kleurvariabele-extractor

Vind elke kleur in je CSS en zet deze om in herbruikbare aangepaste eigenschappen.

Invoer
0
Uitvoer
Gerelateerde tools
Kleur converterOntwikkelaarstools
CSS-formatterOntwikkelaarstools
ContrastcontroleOntwikkelaarstools
i18n sleutel diffOntwikkelaarstools
TOML naar JSON-converterOntwikkelaarstools
SQL naar JSONOntwikkelaarstools
CSS-kleurvariabele-extractor
Plak een stylesheet in en dit hulpmiddel scant elke verklaring naar kleurwaarden geschreven als hex, rgb()/rgba() of hsl()/hsla(), en herschrijft de regels zodat ze naar aangepaste eigenschappen verwijzen in plaats van dezelfde waarde overal te herhalen. Het is ontworpen om een stylesheet op te schonen die organisch is gegroeid – een herdesign, een samenvoeging van onderdeelenbibliotheken of CSS uit een designprogramma – waar dezelfde blauw op een dozijn iets andere manieren wordt getypt.
De naamgevingsoptie bepaalt hoe elke variabele wordt benoemd: op volgorde van eerste voorkomen (--color-1, --color-2…), op geschatte tint en helderheid (--color-dark-blue, --color-light-gray) of op de eigenschap waarop deze voor het eerst werd gevonden (--color-background, --color-border). Schakel "dezelfde kleuren die anders zijn geschreven, samenvoegen" in om #ff0000, rgb(255, 0, 0) en hsl(0, 100%, 50%) in één variabele samen te vouwen, ook al is de brontekst verschillend; identieke waarden worden altijd samengevoegd, ongeacht. De gelijkenisschuif gaat verder en voegt tinten samen die dicht bij elkaar liggen maar niet identiek zijn – handig wanneer een palet per ongeluk bijna identieke grijstinten of blauwtinten heeft opgebouwd. Kies of het gegenereerde blok onder :root of een aangepaste selector staat, kies de notatie waarin variabelen worden afgedrukt, of schakel over naar een eenvoudige kleurenlijst en tellingen wanneer je alleen een audit wilt in plaats van een herschrijving.
De scanner kijkt alleen in daadwerkelijke verklaringswaarden, dus verwart het nooit een ID-selector als #abcabc met een kleur, en het laat opmerkingen, gekwoteerde tekenreeksen en url()-inhoud volledig onverwijld. Zowel Windows als Unix-regeleindes werken, en het hulpmiddel wordt niet misleid door geneste functies zoals een kleur in een verlooplijst.
Alles werkt lokaal in je browser – je stylesheet wordt nergens geüpload, dus het is veilig om code uit een privéproject in te plakken. Kopieer het resultaat, download het als .txt-bestand of stuur de uitvoer terug naar de invoer om het met een ander doorgang te verfijnen.
FAQ
Welke kleurformaten herkent het?
Hex (#rgb, #rgba, #rrggbb, #rrggbbaa), rgb()/rgba() en hsl()/hsla(), zowel in komma- als spatiëringssyntaxis. Benoemde kleuren zoals "red" worden niet gekoppeld.
Wat telt als "dezelfde kleur" voor samenvoegen?
Byte-identieke waarden worden altijd samengevoegd. Het inschakelen van de equivalentioptie voegt ook dezelfde kleur samen die in een ander notatie is geschreven (hex vs rgb vs hsl). De gelijkenisschuif voegt bovendien tinten samen die slechts vergelijkbaar zijn, door een gemiddeld kanaaldifference dat je kunt bepalen.
Hoe worden de nieuwe variabelennamen gekozen?
Op volgorde van eerste voorkomen, op geschatte tint- en helderheidsnaam, of op de CSS-eigenschap waarop de kleur voor het eerst werd gevonden – jouw keuze. Een botsing krijgt een numeriek achtervoegsel.
Zal het iets in opmerkingen, tekenreeksen of url() aanraken?
Nee. Alleen kleuren in daadwerkelijke verklaringswaarden worden gekoppeld – tekst in opmerkingen, gekwoteerde tekenreeksen en url(...) blijft precies zoals geschreven.
Wordt mijn CSS ergens geüpload?
Nee. Extractie werkt volledig in je browser – je stylesheet verlaat nooit je apparaat.