Opgelost: javascript hex naar rgb

Het grootste probleem bij het converteren van hexadecimale kleurwaarden naar RGB is dat er geen één-op-één overeenkomst is tussen de twee formaten. De kleur #FF0000 wordt bijvoorbeeld in RGB weergegeven als 255, 0, 0, maar in hex is het gelijk aan de kleur #F0. Dit betekent dat twee verschillende kleuren dezelfde RGB-waarde kunnen hebben als ze zijn samengesteld uit verschillende hoeveelheden van elke kleurcomponent.

"use strict";

function hexToRgb(hex) {
    var result = /^#?([a-fd]{2})([a-fd]{2})([a-fd]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

"gebruik strikt";

Deze regel code maakt de strikte modus mogelijk, wat een manier is om beter JavaScript te schrijven. In de strikte modus kunt u geen niet-gedeclareerde variabelen gebruiken. Deze coderegel moet bovenaan uw JavaScript-bestand staan ​​om de strikte modus te laten werken.

functie hexToRgb(hex) {
var resultaat = /^#?([a-fd]{2})([a-fd]{2})([a-fd]{2})$/i.exec(hex);
resultaat terug? {
r: parseInt(resultaat[1], 16),
g: parseInt(resultaat[2], 16),
b: parseInt(resultaat[3], 16)
} : nul;
}

Dit is een functie die een hexadecimale kleurwaarde converteert naar een RGB-kleurwaarde. De functie neemt één parameter op, namelijk de hexadecimale kleurwaarde die u wilt converteren. De functie gebruikt een reguliere expressie om overeen te komen met het patroon van een hexadecimale kleurwaarde, en als er een overeenkomst wordt gevonden, wordt een object geretourneerd met de rode, groene en blauwe waarden. Als er geen overeenkomst wordt gevonden, wordt null geretourneerd.

Conversie tussen kleuren

Er is geen pasklaar antwoord op deze vraag, aangezien de beste manier om kleuren om te zetten tussen verschillende kleurruimten kan variëren, afhankelijk van de specifieke behoeften van uw toepassing. Hieronder vindt u echter enkele tips voor het converteren van kleuren tussen kleurruimten in JavaScript.

Om een ​​kleur van de ene kleurruimte naar de andere te converteren, kunt u de functies rgb() en hsl() gebruiken. Deze functies hebben drie argumenten: respectievelijk een rode, groene en blauwe waarde. Het eerste argument specificeert de basiskleurruimte (bijv. RGB), terwijl het tweede en derde argument de doelkleurruimte specificeren (bijv. HSL).

Om een ​​kleur van het ene pixelformaat naar het andere te converteren, kunt u de css()-functie gebruiken. Deze functie bevat twee argumenten: een tekenreeks die de naam van de CSS-eigenschap vertegenwoordigt (bijv. "kleur") en een getal dat de gewenste waarde voor die eigenschap vertegenwoordigt (bijv. "50").

Kleurformaten

Er zijn een paar verschillende kleurindelingen die u in JavaScript kunt gebruiken.

RGB – Rood, Groen, Blauw

HEX – #RRGGBB

HSL - Tint, verzadiging, lichtheid