Het omzetten van Kleur Ruimtes in JavaScript

0
23

Een uitdaging die ik tegenkwam in het opbouwen van een imago “emojifier” was dat ik nodig had om de kleur te wijzigen ruimten van de waarden verkregen met behulp van getImageData() van RGB naar de HSL. Ik gebruikte matrices van emojis georganiseerd door de helderheid en verzadiging, en ze waren HSL-op basis van de beste wedstrijden van het gemiddelde pixel kleuren met het emojis.

In dit artikel zullen we bestuderen functies die nuttig zal zijn voor het omzetten van de ondoorschijnende en alpha-enabled kleur waarden. Moderne browsers ondersteunen momenteel de kleurruimte RGB(A), hex en HSL(A). De functies en notaties voor deze rgb(), rgba(), #rgb/#rrggbb, #rgba/#rrggbbaa, hsl en hsla(). Browsers hebben altijd ondersteund ingebouwde namen als aliceblue.

Langs de weg, we zullen tegenkomen gebruik van sommige van kleur syntaxis geleverd door een nieuw Niveau 4 van de CSS Module Kleuren. Bijvoorbeeld, we hebben nu hex met alpha als we genoemd (#rgba/#rrggbbaa) en RGB-en HSL-syntaxis niet meer nodig komma ‘ s (waarden als rgb(255 0 0) en hsl(240 100% 50%) werd legaal!).

Browser ondersteuning voor CSS Kleuren-Niveau 4 niet universeel is met ingang van dit schrijven, dus verwacht geen nieuwe kleur syntaxis om te werken in Microsoft browsers of Safari als u ze in CSS.

RGB naar Hex

Het omzetten van RGB naar hex is slechts een wijziging van radices. We zetten de rode, groene en blauwe waarden van decimaal naar hexadecimaal met toString(16). Na prepending 0s tot enkele cijfers en onder, we kunnen samengevoegd en # aan een enkele instructie return.

functie RGBToHex(r,g,b) {
r = r.toString(16);
g = g.toString(16);
b = b.toString(16);

als (r.lengte == 1)
r = “0” + r;
als (g.lengte == 1)
g = “0” + g;
als (b.lengte == 1)
b = “0” + b;

return “#” + r + g + b;
}
RGB-in String

Als alternatief kunnen we gebruik maken van een enkele string argument met de rode, groene en blauwe gescheiden door komma ‘ s of spaties (bijvoorbeeld “rgb(255,25,2)”, “rgb(255 25 2)”). Substring te elimineren rgb (split wat is links van de ), dan splitsen dat resultaat eerste item wat het scheidingsteken (sep) is. r, g, en b zullen worden lokale variabelen nu. Dan hebben we gebruik + vóór de split snaren om terug te converteren naar getallen voor het verkrijgen van de hex-waarden.

functie RGBToHex(rgb) {
// Kies de juiste scheidingsteken
laten sep = rgb.indexOf(“,”) > -1 ? “,” : “”;
// Zet “rgb(r,g,b)” in [r,g,b]
rgb = rgb.substr(4).split(“)”)[0].split(sep);

laat r = (+rgb – [0]).toString(16),
g = (+rgb[1]).toString(16),
b = (+rgb[2]).toString(16);

als (r.lengte == 1)
r = “0” + r;
als (g.lengte == 1)
g = “0” + g;
als (b.lengte == 1)
b = “0” + b;

return “#” + r + g + b;
}

Daarnaast kunnen we strings met kanaal waarden als percentages door het toevoegen van de lus na het herdefiniëren van de rgb. Het zal strippen van de %s en wat de links in de waarden van 255.

functie RGBToHex(rgb) {
laten sep = rgb.indexOf(“,”) > -1 ? “,” : “”;
rgb = rgb.substr(4).split(“)”)[0].split(sep);

// Converteren %s te 0-255
voor (R in rgb) {
laat r = rgb[R];
als (r.indexOf(“%”) > -1)
rgb[R] = Wiskunde.ronde(r.substr(0,r.lengte – 1) / 100 * 255);
/* Voorbeeld:
75% -> 191
75/100 = 0.75, * 255 = 191.25 -> 191
*/
}


}

Nu kunnen wij leveren waarden zoals deze:

  • rgb(255,25,2)
  • rgb(255 25 2)
  • rgb(50%,30%,10%)
  • rgb(50% 30% 10%)

RGBA te Hex (#rrggbbaa)

Het omzetten van RGBA naar hex met de #of rgba #rrggbbaa notatie volgt vrijwel hetzelfde proces als de ondoorzichtige tegenhanger. Sinds de alpha (a) is normaal gesproken een waarde in tussen 0 en 1, moeten we vermenigvuldigen met 255, ronde het resultaat, vervolgens omzetten naar hexadecimaal.

functie RGBAToHexA(r,g,b,a) {
r = r.toString(16);
g = g.toString(16);
b = b.toString(16);
a = Wiskunde.ronde(a * 255).toString(16);

als (r.lengte == 1)
r = “0” + r;
als (g.lengte == 1)
g = “0” + g;
als (b.lengte == 1)
b = “0” + b;
als (een.lengte == 1)
a = “0” + a;

return “#” + r + g + b + a;
}

Om dit te doen met een string (waaronder percentages), die we kunnen volgen wat we eerder hebben gedaan. Let ook op de extra stap van splicing een slash. Sinds CSS Kleuren Niveau 4 ondersteunt de syntaxis van rgba(r g b / a), dit is waar we het toestaan. Alpha-waarden kan nu worden de percentages! Dit verwijdert de 0-1-alleen boeien die we gebruikt hebben. Daarom is de for-lus fietsen door rgba omvat een deel voor het reinigen van de % van de alpha zonder te vermenigvuldigen met 255 (als R 3 voor alpha). Binnenkort kunnen we gebruik maken van waarden als rgba(255 128 0 / 0.8) en rgba(100% 21% 100% / 30%)!

functie RGBAToHexA(rgba) {
laten sep = rgba.indexOf(“,”) > -1 ? “,” : “”;
rgba = rgba.substr(5).split(“)”)[0].split(sep);

// Strip de slash als het gebruik spaties gescheiden syntaxis
als (rgba.indexOf(“/”) > -1)
rgba.splice(3,1);

voor (R in rgba) {
laat r = rgba[R];
als (r.indexOf(“%”) > -1) {
laat p = r.substr(0,r.lengte – 1) / 100;

als (R < 3) {
rgba[R] = Wiskunde.ronde(p * 255);
} else {
rgba[R] = p;
}
}
}
}

Dan, wanneer de kanalen zijn omgezet naar hex we pas een te gebruiken een item van rgba[].

functie RGBAToHexA(rgba) {

laat r = (+rgba[0]).toString(16),
g = (+rgba[1]).toString(16),
b = (+rgba[2]).toString(16),
a = Wiskunde.ronde(+rgba[3] * 255).toString(16);

als (r.lengte == 1)
r = “0” + r;
als (g.lengte == 1)
g = “0” + g;
als (b.lengte == 1)
b = “0” + b;
als (een.lengte == 1)
a = “0” + a;

return “#” + r + g + b + a;
}

Nu de functie ondersteunt de volgende:

  • rgba(255,25,2,0.5)
  • rgba(255 25 2 / 0.5)
  • rgba(50%,30%,10%,0.5)
  • rgba(50%,30%,10%,50%)
  • rgba(50% 30% 10% / 0.5)
  • rgba(50% 30% 10% / 50%)

Hex naar RGB

We weten dat de lengte van de hex-waarden moeten ofwel 3 of 6 (plus #). In beide gevallen beginnen we elk rood (r), groen (g) en blauw (b) – waarde met “0x” omzetten naar hex. Indien wij bieden een 3-cijferige waarde, we samenvoegen van dezelfde waarde tweemaal voor elk kanaal. Als het een 6-cijferige waarde, we samenvoegen van de eerste twee voor rood, de volgende twee voor groen en de laatste twee voor blauw. Om de waarden voor de uiteindelijke rgb() string, die we voor de variabelen met + en ze omzetten van strings terug naar de nummers, die zal leiden tot de decimalen die we nodig hebben.

functie hexToRGB(h) {
laat r = 0, g = 0, b = 0;

// 3 cijfers
als (h.lengte == 4) {
r = “0” + h[1] + h[1];
g = “0” + h[2] + h[2];
b = “0” + h[3] + h[3];

// 6 cijfers
} else if (h.lengte == 7) {
r = “0” + h[1] + h[2];
g = “0” + h[3] + h[4];
b = “0” + h[5] + h[6];
}

terug naar “rgb(“+ +r + “,” + +g + “,” + +b + “)”;
}
Uitgang RGB-met %s

Als we willen om terug te keren rgb() aan de hand van percentages, dan kunnen we wijzigen de functie om gebruik te maken van een optionele isPct parameter als volgt:

functie hexToRGB(h,isPct) {
laat r = 0, g = 0, b = 0;
isPct = isPct === true;

als (h.lengte == 4) {
r = “0” + h[1] + h[1];
g = “0” + h[2] + h[2];
b = “0” + h[3] + h[3];

} else if (h.lengte == 7) {
r = “0” + h[1] + h[2];
g = “0” + h[3] + h[4];
b = “0” + h[5] + h[6];
}

als (isPct) {
r = +(r / 255 * 100).toFixed(1);
g = +(g / 255 * 100).toFixed(1);
b = +(b / 255 * 100).toFixed(1);
}

terug naar “rgb(” + (isPct ? r + “%,” + g + “%,” + b + “%” : +r + “,” + +g + “,” + +b) + “)”;
}

Onder de laatste instructie, met behulp van +s zal zetten voor r, g en b getallen. Elke toFixed(1), samen met hen rond het resultaat naar de dichtstbijzijnde tiende. Bovendien zullen we niet hele getallen met .0 of het decennia oude bug die produceert nummers zoals 0.30000000000000004. Daarom is in de return, we weggelaten +s vlak voor de eerste r, g en b om te voorkomen dat dankzij nan ‘ s veroorzaakt door de %s. Nu kunnen we gebruik maken van hexToRGB(“#ff0”,true) rgb(100%,100%,0%)!

Hex (#rrggbbaa) RGBA

De procedure voor de hex-waarden met alpha moeten weer vergelijkbaar met de vorige. We hebben gewoon het detecteren van een 4 – of 8-cijferige waarde (plus #), dan zetten de alfa-en verdeel het met 255. Om meer nauwkeurige output, maar niet lang decimale getallen voor alpha, kunnen we gebruik maken van toFixed(3).

functie hexAToRGBA(h) {
laat r = 0, g = 0, b = 0, a = 1;

als (h.lengte == 5) {
r = “0” + h[1] + h[1];
g = “0” + h[2] + h[2];
b = “0” + h[3] + h[3];
a = “0” + h[4] + h[4];

} else if (h.lengte == 9) {
r = “0” + h[1] + h[2];
g = “0” + h[3] + h[4];
b = “0” + h[5] + h[6];
a = “0” + h[7] + h[8];
}
a = +(a / 255).toFixed(3);

return “rgba(” + +r + “,” + +g + “,” + +b + “,” + a + “)”;
}
Uitgang RGBA met %s

Voor een versie die uitgangen percentages, we kunnen doen wat we deden in hexToRGB()—schakelaar voor r, g en b te 0-100% wanneer isPct is waar.

functie hexAToRGBA(h,isPct) {
laat r = 0, g = 0, b = 0, a = 1;
isPct = isPct === true;

// Afhandeling van cijfers

als (isPct) {
r = +(r / 255 * 100).toFixed(1);
g = +(g / 255 * 100).toFixed(1);
b = +(b / 255 * 100).toFixed(1);
}
a = +(a / 255).toFixed(3);

return “rgba(” + (isPct ? r + “%,” + g + “%,” + b + “%,” + a : +r + “,” + +g + “,” + +b + “,” + a + “)”;
}

Hier is een snelle oplossing als de alpha moet een percentage, ook: het verplaatsen van de verklaring waar is opnieuw boven de laatste instructie. Dan in die verklaring, te wijzigen om te worden zoals r, g, en b. Wanneer isPct is waar, de een moet krijgen dan ook de %.

functie hexAToRGBA(h,isPct) {

a = +(a / 255).toFixed(3);
als (isPct) {
r = +(r / 255 * 100).toFixed(1);
g = +(g / 255 * 100).toFixed(1);
b = +(b / 255 * 100).toFixed(1);
a = +(a * 100).toFixed(1);
}

return “rgba(” + (isPct ? r + “%,” + g + “%,” + b + “%,” + a + “%” : +r + “,” + +g + “,” + +b + “,” + a + “)”;
}

Als we #7f7fff80 nu, krijgen we rgba(127,127,255,0.502) of rgba(49.8%,49.8%,100%,50.2%).

RGB naar HSL

Het verkrijgen van de HSL-waarden van de RGB-of hex is een beetje meer een uitdaging, want er is een grotere formule betrokken. Eerst moeten we verdelen de rood, groen en blauw door 255 te gebruiken waarden tussen 0 en 1. Dan vinden we het minimum en maximum van de waarden (cmin en cmax) en het verschil tussen hen (delta). Moeten We die als onderdeel van de berekening van de tint en de verzadiging. Direct na de delta, laten we het initialiseren van de hue (h), verzadiging (s) en helderheid (l).

functie RGBToHSL(r,g,b) {
// Maak de r, g en b fracties van 1
r /= 255;
g /= 255;
b /= 255;

// Vind de grootste en kleinste waarden kanaal
laat cmin = Wiskunde.min(r,g,b),
cmax = Wiskunde.max(r,g,b),
delta = cmax – cmin
h = 0,
s = 0,
l = 0;
}

We moeten voor het berekenen van de tint, die wordt bepaald door de grootste kanaal in cmax (of, als alle kanalen hetzelfde zijn). Als er geen verschil is tussen de kanalen, de kleurtoon 0. Als cmax is het rood, dan is de formule ((g – b) / delta) % 6. Als groen, dan (b – r) / delta + 2. Dan, als blauw, (r – g) / delta + 4. Tot slot, het resultaat vermenigvuldigen met 60 (te krijgen van de mate waarde) en de ronde. Sinds tinten mogen niet negatief zijn, voegen we 360, indien nodig.

functie RGBToHSL(r,g,b) {

// Bereken tint
// Geen verschil
als (delta == 0)
h = 0;
// Rood is max
else if (cmax == r)
h = ((g – b) / delta) % 6;
// Groen is max
else if (cmax == g)
h = (b – r) / delta + 2;
// Blue max
anders
h = (r – g) / delta + 4;

h = Wiskunde.ronde(h * 60);

// Maak een negatieve tinten positief achter 360°
if (h < 0)
h += 360;
}

Alles wat overblijft is de verzadiging en helderheid. Bereken de lichtheid voordat we de kleurverzadiging (verzadiging zal afhankelijk zijn. Het is de som van de maximale en minimale kanaal waarden gesneden in de helft ((cmax + cmin) / 2). Vervolgens delta zal bepalen wat de verzadiging zal worden. Als het 0 (geen verschil tussen de cmax en cmin), dan is de verzadiging is automatisch 0. Anders, het zal 1 minus de som van de absolute waarde van tweemaal de lichtheid min-1 (1 – Wiskunde.abs(2 * l – 1)). Zodra we deze waarden, moeten we deze om te zetten naar waarden van de 100%, dus hebben we ze vermenigvuldigen met 100 en rond aan de dichtstbijzijnde tiende. Nu kunnen we samen string onze hsl – ().

functie RGBToHSL(r,g,b) {

// Bereken lichtheid
l = (cmax + cmin) / 2;

// Bereken de verzadiging
s = delta == 0 ? 0 : delta / (1 – Wiskunde.abs(2 * l – 1));

// Vermenigvuldigen l-en s-100
s = +(s * 100).toFixed(1);
l = +(l * 100).toFixed(1);

return “hsl – (” + uur + “,” + n + “%,” + l + “%)”;
}
RGB-in String

Voor een string, splitsen het argument door een komma of spatie, strip de %s, en te lokaliseren r, g, en b, zoals we eerst deden.

functie RGBToHSL(rgb) {
laten sep = rgb.indexOf(“,”) > -1 ? “,” : “”;
rgb = rgb.substr(4).split(“)”)[0].split(sep);

voor (R in rgb) {
laat r = rgb[R];
als (r.indexOf(“%”) > -1)
rgb[R] = Wiskunde.ronde(r.substr(0,r.lengte – 1) / 100 * 255);
}

// Maak de r, g en b fracties van 1
laat r = rgb[0] / 255,
g = rgb[1] / 255,
b = rgb[2] / 255;


}

RGBA te HSLA

In vergelijking met wat we net deden om het omzetten van RGB naar de HSL, de alpha tegenhanger zal worden in principe niets! We hebben net de code opnieuw gebruiken voor RGB naar HSL (de multi-argument versie), laat staan op, en gaat een aan de geretourneerde HSLA. Houd in gedachten dat het moet worden tussen 0 en 1.

functie RGBAToHSLA(r,g,b,a) {
// Code voor RGBToHSL(r,g,b) voor de terugkeer

return “hsla(” + uur + “,” + n + “%,” +l + “%,” + a + “)”;
}
RGBA in String

Voor de string-waarden, passen we de splitsing en het strippen van de logica weer, maar gebruik het vierde item in rgba voor een. Vergeet niet de nieuwe rgba(r g b / a) syntaxis? We zijn in dienst van de aanvaarding van het zoals wij dat deden voor RGBAToHexA(). Dan de rest van de code is de normale RGB-naar-HSL-conversie.

functie RGBAToHSLA(rgba) {
laten sep = rgba.indexOf(“,”) > -1 ? “,” : “”;
rgba = rgba.substr(5).split(“)”)[0].split(sep);

// Strip de slash als het gebruik spaties gescheiden syntaxis
als (rgba.indexOf(“/”) > -1)
rgba.splice(3,1);

voor (R in rgba) {
laat r = rgba[R];
als (r.indexOf(“%”) > -1) {
laat p = r.substr(0,r.lengte – 1) / 100;

als (R < 3) {
rgba[R] = Wiskunde.ronde(p * 255);
} else {
rgba[R] = p;
}
}
}

// Maak de r, g en b fracties van 1
laat r = rgba[0] / 255,
g = rgba[1] / 255,
b = rgba[2] / 255,
a = rgba[3];

// De Rest van RGB-naar-HSL-logica

}

Wilt verlaten van de alpha? Verwijder de else-instructie van de for-lus.

voor (R in rgba) {
laat r = rgba[R];
als (r.indexOf(“%”) > -1) {
laat p = r.substr(0,r.lengte – 1) / 100;

als (R < 3) {
rgba[R] = Wiskunde.ronde(p * 255);
}
}
}

HSL naar RGB

Het duurt iets minder logica om te zetten HSL-terug-naar-RGB dan de omgekeerde weg. Sinds we gebruik maken van een bereik van 0-100 voor de verzadiging en helderheid, de eerste stap is om ze te verdelen door 100 tot waarden tussen 0 en 1. Vervolgens vinden we chroma (c), die kleur intensiteit, dat is dus (1 – Wiskunde.abs(2 * l – 1)) * s. Vervolgens gebruiken we x voor de tweede grootste component (eerste chroma), de hoeveelheid toe te voegen aan elk kanaal van de wedstrijd de lichtheid (m), en het initialiseren van r, g, b.

functie HSLToRGB(h,s,l) {
// Moet fracties van 1
s /= 100;
l /= 100;

laat c = (1 – Wiskunde.abs(2 * l – 1)) * s,
x = c * (1 – Wiskunde.abs((h / 60) % 2 – 1)),
m = l – c/2,
r = 0,
g = 0,
b = 0;
}

De hue zal bepalen wat de kleuren rood, groen en blauw moeten worden afhankelijk van 60° sector van het kleurenwiel het ligt.

De kleur wiel verdeeld in 60° segmenten

Dan is c en x zal worden toegewezen, zoals hieronder weergegeven, resulterend in een kanaal bij 0. Om de laatste RGB-waarde, voegen we m aan elk kanaal, te vermenigvuldigen door 255, en de ronde.

functie HSLToRGB(h,s,l) {

als (0 <= h && h < 60) {
r = c; g = x; b = 0;
} else if (60 <= h && h < 120) {
r = x; g = c; b = 0;
} else if (120 <= h && h < 180) {
r = 0, g = c; b = x;
} else if (180 <= h && h < 240) {
r = 0, g = x; b = c;
} else if (240 <= h && h < 300) {
r = x; g = 0; b = c;
} else if (300 <= h && h < 360) {
r = c; g = 0; b = x;
}
r = Wiskunde.round((r + m) * 255);
g = Wiskunde.round((g + m) * 255);
b = Wiskunde.round((b + m) * 255);

terug naar “rgb(” + r + “,” + g + “,” + b + “)”;
}
HSL in String

Voor de single string versie, passen we de eerste paar uitspraken in principe op dezelfde manier als voor RGBToHSL(r,g,b). Verwijder s /= 100; l /= 100; en we zullen gebruik maken van de nieuwe verklaringen te vegen van de eerste 4 letters en ) voor onze reeks van de HSL-waarden, dan de %s van s en l alvorens ze op te delen door 100.

functie HSLToRGB(hsl) {
laten sep = hsl.indexOf(“,”) > -1 ? “,” : “”;
hsl = hsl.substr(4).split(“)”)[0].split(sep);

laat h = hsl – [0],
s = hsl[1].substr(0,hsl[1].lengte – 1) / 100,
l = hsl[2].substr(0,hsl[2].lengte – 1) / 100;


}

De volgende handvol staten handvat tinten geleverd met een unit—graden, radialen of bochten. We vermenigvuldigen radialen 180/π en draait 360. Als het resultaat komt dan 360, we samengestelde modulus verdelen om het te houden binnen de scope. Dit alles zal gebeuren, voordat we gaan met c, x en m.

functie HSLToRGB(hsl) {

// Strip label en converteren naar graden (indien nodig)
als (h.indexOf(“deg”) > -1)
h = h.substr(0,h.lengte – 3);
else if (h.indexOf(“rad”) > -1)
h = Wiskunde.ronde(h.substr(0,h.lengte – 3) * (180 / Wiskunde.PI));
else if (h.indexOf (‘turn’) > -1)
h = Wiskunde.ronde(h.substr(0,h.lengte – 4) * 360);
// Houd tint fractie van 360 als eindigt over
if (uur >= 360)
h %= 360;

// De omzetting naar RGB begint

}

Na de implementatie van de bovenstaande stappen, nu de volgende veilig kan worden gebruikt:

  • hsl(180 100% 50%)
  • hsl(180deg,100%,50%)
  • hsl(180deg 100% 50%)
  • hsl(3.14 rad,100%,50%)
  • hsl(3.14 rad 100% 50%)
  • hsl(0.5 beurt 100%,50%)
  • hsl(0.5 beurt 100% 50%)

Oef, dat is wel de flexibiliteit!

Uitgang RGB-met %s

Op dezelfde manier kunnen we wijzigen deze functie om terug te keren procent waarden net zoals we dat deden in hexToRGB().

functie HSLToRGB(hsl,isPct) {
laten sep = hsl.indexOf(“,”) > -1 ? “,” : “”;
hsl = hsl.substr(4).split(“)”)[0].split(sep);
isPct = isPct === true;

als (isPct) {
r = +(r / 255 * 100).toFixed(1);
g = +(g / 255 * 100).toFixed(1);
b = +(b / 255 * 100).toFixed(1);
}

terug naar “rgb(“+ (isPct ? r + “%,” + g + “%,” + b + “%” : +r + “,” + +g + “,” + +b) + “)”;
}

HSLA te RGBA

Nogmaals, de behandeling alphas zal het een no-brainer. We kunnen opnieuw de code voor de originele HSLToRGB(h,s,l) en toevoegen aan het retour zenden.

functie HSLAToRGBA(h,s,l,a) {
// Code voor HSLToRGB(h,s,l) voor de terugkeer

return “rgba(” + r + “,” + g + “,” + b + “,” + a + “)”;
}
HSLA in String

Het te wijzigen in een argument, de manier waarop we omgaan met snaren zal hier niet te veel anders dan wat we eerder hebben gedaan. Een nieuwe HSLA syntaxis van Kleuren Niveau 4 gebruikt (waarde waarde waarde / waarde) net als RGBA, dus met de code om het te behandelen, zullen we in staat zijn om de stekker in iets als hsla(210 100% 50% / 0.5) hier.

functie HSLAToRGBA(hsla) {
laten sep = hsla.indexOf(“,”) > -1 ? “,” : “”;
hsla = hsla.substr(5).split(“)”)[0].split(sep);

als (hsla.indexOf(“/”) > -1)
hsla.splice(3,1);

laat h = hsla[0],
s = hsla[1].substr(0,hsla[1].lengte – 1) / 100,
l = hsla[2].substr(0,hsla[2].lengte – 1) / 100,
a = hsla[3];

als (h.indexOf(“deg”) > -1)
h = h.substr(0,h.lengte – 3);
else if (h.indexOf(“rad”) > -1)
h = Wiskunde.ronde(h.substr(0,h.lengte – 3) * (180 / Wiskunde.PI));
else if (h.indexOf (‘turn’) > -1)
h = Wiskunde.ronde(h.substr(0,h.lengte – 4) * 360);
if (uur >= 360)
h %= 360;


}

Bovendien zijn deze andere combinaties mogelijk zijn geworden:

  • hsla(180,100%,50%,50%)
  • hsla(180 100% 50% / 50%)
  • hsla(180deg,100%,50%,0.5)
  • hsla(3.14 rad,100%,50%,0.5)
  • hsla(0.5 beurt 100% 50% / 50%)

RGBA met %s

Dan kunnen we het repliceren van de logica voor het uitvoeren van percentages, met inbegrip van alpha. Als de alpha moet een percentage (gezocht in pctFound), hier is hoe we ermee omgaan:

  1. Als de r, g en b worden omgezet naar de percentages, dan kan een moet worden vermenigvuldigd met 100, indien niet reeds een percentage. Anders, drop %, en het zal worden toegevoegd in de return.
  2. Als r, g, en b, moeten met rust gelaten worden, verwijder dan het % van een en delen door 100.

functie HSLAToRGBA(hsla,isPct) {
// Code up-to-slash strippen

isPct = isPct === true;

// h, s, l, gedefinieerd als afronding van r, g, b

laat pctFound = een.indexOf(“%”) > -1;

als (isPct) {
r = +(r / 255 * 100).toFixed(1);
g = +(g / 255 * 100).toFixed(1);
b = +(b / 255 * 100).toFixed(1);
if (!pctFound) {
a *= 100;
} else {
a = a.substr(0,a.lengte – 1);
}

} else if (pctFound) {
a = a.substr(0,a.lengte – 1) / 100;
}

return “rgba(“+ (isPct ? r + “%,” + g + “%,” + b + “%,” + a + “%” : +r + “,”+ +g + “,” + +b + “,” + +a) + “)”;
}

Hex naar HSL

Je zou denken dit en de volgende dwazer processen dan de anderen, maar ze hebben alleen geleverd in twee delen met gerecycled logica. Ten eerste, we zetten de hex naar RGB. Dat geeft ons de basis 10s we nodig hebben om te zetten naar de HSL.

functie hexToHSL(H) {
// Converteren van hex naar RGB eerste
laat r = 0, g = 0, b = 0;
als (H. lengte == 4) {
r = “0” + H[1] + H[1];
g = “0” + H[2] + H[2];
b = “0” + H[3] + H[3];
} else if (H. lengte == 7) {
r = “0” + H[1] + H[2];
g = “0” + H[3] + H[4];
b = “0” + H[5] + H[6];
}
// En dan naar de HSL –
r /= 255;
g /= 255;
b /= 255;
laat cmin = Wiskunde.min(r,g,b),
cmax = Wiskunde.max(r,g,b),
delta = cmax – cmin
h = 0,
s = 0,
l = 0;

als (delta == 0)
h = 0;
else if (cmax == r)
h = ((g – b) / delta) % 6;
else if (cmax == g)
h = (b – r) / delta + 2;
anders
h = (r – g) / delta + 4;

h = Wiskunde.ronde(h * 60);

if (h < 0)
h += 360;

l = (cmax + cmin) / 2;
s = delta == 0 ? 0 : delta / (1 – Wiskunde.abs(2 * l – 1));
s = +(s * 100).toFixed(1);
l = +(l * 100).toFixed(1);

return “hsl – (” + uur + “,” + n + “%,” + l + “%)”;
}

Hex (#rrggbbaa) HSLA

Er zijn niet te veel regels die verandering in deze. We herhalen wat we onlangs deed om de alpha door het omzetten van de hex, maar niet te verdelen door 255 meteen. Eerst moeten we voor de tint, verzadiging en helderheid zoals we deden in de andere HSL-functies. Dan, voor het einde terug, we verdelen de alpha en stel decimalen.

functie hexAToHSLA(H) {
laat r = 0, g = 0, b = 0, a = 1;

als (H. lengte == 5) {
r = “0” + H[1] + H[1];
g = “0” + H[2] + H[2];
b = “0” + H[3] + H[3];
a = “0” + H[4] + H[4];
} else if (H. lengte == 9) {
r = “0” + H[1] + H[2];
g = “0” + H[3] + H[4];
b = “0” + H[5] + H[6];
a = “0” + H[7] + H[8];
}

/ Normaal/ conversie naar HSL

a = (a / 255).toFixed(3);

return “hsla(“+ uur + “,” + n + “%,” + l + “%,” + a + “)”;
}

HSL naar Hex

Dit begint als een omzetting naar RGB, maar er is een extra stap om de Wiskunde.ronde (s)van het omzetten van de RGB resultaten te hex.

functie HSLToHex(h,s,l) {
s /= 100;
l /= 100;

laat c = (1 – Wiskunde.abs(2 * l – 1)) * s,
x = c * (1 – Wiskunde.abs((h / 60) % 2 – 1)),
m = l – c/2,
r = 0,
g = 0,
b = 0;

als (0 <= h && h < 60) {
r = c; g = x; b = 0;
} else if (60 <= h && h < 120) {
r = x; g = c; b = 0;
} else if (120 <= h && h < 180) {
r = 0, g = c; b = x;
} else if (180 <= h && h < 240) {
r = 0, g = x; b = c;
} else if (240 <= h && h < 300) {
r = x; g = 0; b = c;
} else if (300 <= h && h < 360) {
r = c; g = 0; b = x;
}
// Na het behalen van RGB, zetten de kanalen naar hex
r = Wiskunde.round((r + m) * 255).toString(16);
g = Wiskunde.round((g + m) * 255).toString(16);
b = Wiskunde.round((b + m) * 255).toString(16);

// Voeg 0s, indien nodig
als (r.lengte == 1)
r = “0” + r;
als (g.lengte == 1)
g = “0” + g;
als (b.lengte == 1)
b = “0” + b;

return “#” + r + g + b;
}
HSL in String

Zelfs de eerste paar regels van deze functie zal zijn als die in HSLToRGB() als we veranderden het accepteren van een enkele snaar. Dit is hoe we zijn het verkrijgen van de tint, verzadiging en helderheid apart in de eerste plaats. Laten we niet vergeten dat de stap naar het verwijderen van de tint label en converteren naar graden, ook. Dit alles zal worden in plaats van s /= 100; l /= 100;.

functie HSLToHex(hsl) {
laten sep = hsl.indexOf(“,”) > -1 ? “,” : “”;
hsl = hsl.substr(4).split(“)”)[0].split(sep);

laat h = hsl – [0],
s = hsl[1].substr(0,hsl[1].lengte – 1) / 100,
l = hsl[2].substr(0,hsl[2].lengte – 1) / 100;

// Strip label en converteren naar graden (indien nodig)
als (h.indexOf(“deg”) > -1)
h = h.substr(0,h.lengte – 3);
else if (h.indexOf(“rad”) > -1)
h = Wiskunde.ronde(h.substr(0,h.lengte – 3) * (180 / Wiskunde.PI));
else if (h.indexOf (‘turn’) > -1)
h = Wiskunde.ronde(h.substr(0,h.lengte – 4) * 360);
if (uur >= 360)
h %= 360;


}

HSLA te Hex (#rrggbbaa)

Het toevoegen van alpha naar de mix, we zetten een hex en een vierde als om vooraan een 0, als dat nodig is. Het is je waarschijnlijk al bekend met dit logisch omdat we voor het laatst gebruikt in RGBAToHexA().

functie HSLAToHexA(h,s,l,a) {
// Herhaal de code van HSLToHex(h,s,l) tot 3 `toString(16)`s

a = Wiskunde.ronde(a * 255).toString(16);

als (r.lengte == 1)
r = “0” + r;
als (g.lengte == 1)
g = “0” + g;
als (b.lengte == 1)
b = “0” + b;
als (een.lengte == 1)
a = “0” + a;

return “#” + r + g + b + a;
}
HSLA in String

Tot slot, de lijnen van de enkel argument versie up-to-a = hsla[3] zijn niet anders dan die van HSLAToRGBA().

functie HSLAToHexA(hsla) {
laten sep = hsla.indexOf(“,”) > -1 ? “,” : “”;
hsla = hsla.substr(5).split(“)”)[0].split(sep);

// Strip de slash
als (hsla.indexOf(“/”) > -1)
hsla.splice(3,1);

laat h = hsla[0],
s = hsla[1].substr(0,hsla[1].lengte – 1) / 100,
l = hsla[2].substr(0,hsla[2].lengte – 1) / 100,
a = hsla[3];


}

Ingebouwde Namen

Om te zetten in een named color RGB hex, of HSL, zou u kunnen overwegen om deze tafel van 140+ namen en hex-waarden in een massief object aan de start. De waarheid is dat we echt niet nodig, want hier is wat we kunnen doen:

  1. Het maken van een element
  2. Geef het een kleur van de tekst
  3. Het verkrijgen van de waarde van de woning
  4. Verwijder het element
  5. De terugkeer van de opgeslagen kleur waarde, die zal worden in de RGB-standaard

Dus is het onze taak om RGB zal alleen worden zeven uitspraken!

functie nameToRGB(naam) {
// Maak een nep-div
laat fakeDiv = document.createElement(“div”);
fakeDiv.stijl.kleur = naam;
document.lichaam.appendChild(fakeDiv);

// De kleur van de div
laat cs = venster.getComputedStyle(fakeDiv),
pv = cs.getPropertyValue(“kleur”);

// Div verwijderen na het verkrijgen van de gewenste kleurwaarde
document.lichaam.removeChild(fakeDiv);

terug pv;
}

Laten we zelfs verder gaan. Hoe veranderen we de uitgang naar hex plaats?

functie nameToHex(naam) {
// RGB met de naam van de kleur in de tijdelijke div
laat fakeDiv = document.createElement(“div”);
fakeDiv.stijl.kleur = naam;
document.lichaam.appendChild(fakeDiv);

laat cs = venster.getComputedStyle(fakeDiv),
pv = cs.getPropertyValue(“kleur”);

document.lichaam.removeChild(fakeDiv);

// Code geript van RGBToHex() (behalve pv is substringed)
laat rgb = pv.substr(4).split(“)”)[0].split(“,”),
r = (+rgb – [0]).toString(16),
g = (+rgb[1]).toString(16),
b = (+rgb[2]).toString(16);

als (r.lengte == 1)
r = “0” + r;
als (g.lengte == 1)
g = “0” + g;
als (b.lengte == 1)
b = “0” + b;

return “#” + r + g + b;
}

Of, waarom niet HSL? 😉

functie nameToHSL(naam) {
laat fakeDiv = document.createElement(“div”);
fakeDiv.stijl.kleur = naam;
document.lichaam.appendChild(fakeDiv);

laat cs = venster.getComputedStyle(fakeDiv),
pv = cs.getPropertyValue(“kleur”);

document.lichaam.removeChild(fakeDiv);

// Code geript van RGBToHSL() (behalve pv is substringed)
laat rgb = pv.substr(4).split(“)”)[0].split(“,”),
r = rgb[0] / 255,
g = rgb[1] / 255,
b = rgb[2] / 255,
cmin = Wiskunde.min(r,g,b),
cmax = Wiskunde.max(r,g,b),
delta = cmax – cmin
h = 0,
s = 0,
l = 0;

als (delta == 0)
h = 0;
else if (cmax == r)
h = ((g – b) / delta) % 6;
else if (cmax == g)
h = (b – r) / delta + 2;
anders
h = (r – g) / delta + 4;

h = Wiskunde.ronde(h * 60);

if (h < 0)
h += 360;

l = (cmax + cmin) / 2;
s = delta == 0 ? 0 : delta / (1 – Wiskunde.abs(2 * l – 1));
s = +(s * 100).toFixed(1);
l = +(l * 100).toFixed(1);

return “hsl – (” + uur + “,” + n + “%,” + l + “%)”;
}

Op de lange termijn, elke omzetting van een naam wordt een conversie van RGB na het kraken van de naam.

Het Valideren Van Kleuren

In al deze functies is er nog niet zijn geweest maatregelen te voorkomen of te corrigeren belachelijk ingang (zeggen tinten meer dan 360 of percentages meer dan 100). Als we alleen het manipuleren van pixels op een <canvas> – opgehaald met behulp van getImageData(), validatie van de kleur van waarden is niet nodig voor het omzetten van, omdat ze juist niet uit wat. Als we het creëren van een kleur conversie tool waar gebruikers leveren de kleur, vervolgens de validatie zou veel nodig.

Het is gemakkelijk te hanteren onjuiste invoer voor kanalen als afzonderlijke argumenten, zoals deze voor RGB:

// Corrigeren van de rode
if (r > 255)
r = 255;
else if (o < 0)
r = 0;

Als de validatie van een hele reeks, dan is een reguliere expressie nodig is. Bijvoorbeeld, dit is de RGBToHex() functie die een validatie stap met een uitdrukking:

functie RGBToHex(rgb) {
// Expressie voor rgb() syntaxis
laat ex = /^rgb((((((((1?[1-9]?d)|10d|(2[0-4]d)|25[0-5]),s?)){2}|((((1?[1-9]?d)|10d|(2[0-4]d)|25[0-5])s)){2})((1?[1-9]?d)|10d|(2[0-4]d)|25[0-5]))|((((([1-9]?d(.d+)?)|100|(.d+))%,s?){2}|((([1-9]?d(.d+)?)|100|(.d+))%s){2})(([1-9]?d(.d+)?)|100|(.d+))%)))$/i;

als (ex.test(rgb)) {
// Logica voor het omzetten van RGB naar hex

} else {
// Wat te doen als de kleur is ongeldig
}
}

Testen van andere soorten waarden, hieronder is een tabel van uitdrukkingen te dekken ondoorschijnende en alpha-ingeschakeld:

Kleur Waarde
RegEx
RGB /^rgb((((((((1?[1-9]?d)|10d|(2[0-4]d)|25[0-5]),s?)){2}|((((1?[1-9]?d)|10d|(2[0-4]d)|25[0-5])s)){2})((1?[1-9]?d)|10d|(2[0-4]d)|25[0-5]))|((((([1-9]?d(.d+)?)|100|(.d+))%,s?){2}|((([1-9]?d(.d+)?)|100|(.d+))%s){2})(([1-9]?d(.d+)?)|100|(.d+))%)))$/i
RGBA /^rgba((((((((1?[1-9]?d)|10d|(2[0-4]d)|25[0-5]),s?)){3})|(((([1-9]?d(.d+)?)|100|(.d+))%,s?){3}))|(((((1?[1-9]?d)|10d|(2[0-4]d)|25[0-5])s){3})|(((([1-9]?d(.d+)?)|100|(.d+))%s){3}))/s)((0?.d+)|[01]|(([1-9]?d(.d+)?)|100|(.d+))%))$/i
Hex /^#([da-f]{3}){1,2}$/ik
Hex (met Alpha) /^#([da-f]{4}){1,2}$/ik
HSL /^hsl(((((([12]?[1-9]?d)|[12]0d|(3[0-5]d))(.d+)?)|(.d+))(deg)?|(0/0?.d+)turn|(([0-6](.d+)?)|(.d+))rad)((,s?(([1-9]?d(.d+)?)|100|(.d+))%){2}|(s(([1-9]?d(.d+)?)|100|(.d+))%){2}))$/i
HSLA /^hsla(((((([12]?[1-9]?d)|[12]0d|(3[0-5]d))(.d+)?)|(.d+))(deg)?|(0/0?.d+)turn|(([0-6](.d+)?)|(.d+))rad)(((,s?(([1-9]?d(.d+)?)|100|(.d+))%){2},s?)|((s(([1-9]?d(.d+)?)|100|(.d+))%){2}s/s))((0?.d+)|[01]|(([1-9]?d(.d+)?)|100|(.d+))%))$/i

Kijkend naar de uitdrukkingen voor RGB(A) en HSL(A), waarschijnlijk heb je grote ogen nu; deze werden gemaakt uitgebreide genoeg om de meeste van de nieuwe syntaxis van CSS Kleuren Niveau 4. Hex, aan de andere kant, hoeft niet expressies zo lang als de anderen, omdat enkel cijfer telt. In een moment, we analyseren deze en ontcijferen van de onderdelen. Merk op dat niet hoofdlettergevoelig waarden (/i) laat alle deze.

RGB
/^rgb((((((((1?[1-9]?d)|10d|(2[0-4]d)|25[0-5]),s?)){2}|((((1?[1-9]?d)|10d|(2[0-4]d)|25[0-5])s)){2})((1?[1-9]?d)|10d|(2[0-4]d)|25[0-5]))|((((([1-9]?d(.d+)?)|100|(.d+))%,s?){2}|((([1-9]?d(.d+)?)|100|(.d+))%s){2})(([1-9]?d(.d+)?)|100|(.d+))%)))$/i

Omdat rgb() accepteert alle gehele getallen of alle percentages, beide gevallen zijn gedekt. In de grootste groep, tussen de ^rgb( en )$, er zijn binnenste groepen voor zowel de gehele getallen en percentages, alle komma ‘ s of spaties spaties alleen als scheidingstekens:

  1. (((((1?[1-9]?d)|10d|(2[0-4]d)|25[0-5]),s?){2}|(((1?[1-9]?d)|10d|(2[0-4]d)|25[0-5])s){2})((1?[1-9]?d)|10d|(2[0-4]d)|25[0-5]))
  2. ((((([1-9]?d(.d+)?)|100|(.d+))%,s?){2}|((([1-9]?d(.d+)?)|100|(.d+))%s){2})(([1-9]?d(.d+)?)|100|(.d+))%)

In de eerste helft, accepteren wij twee exemplaren van gehele getallen voor rood en groen van 0-99 of 111-199 ((1?[1-9]?d)), 100-109 (10d), 200-249 ((2[0-4]d)), of 250-255 (25[0-5]). We konden niet gewoon doen d{1,3} omdat de waarden zoals 03 of 017 en die groter is dan 255 moet niet worden toegestaan. Daarna gaat de komma en optioneel ruimte (,s?). Aan de andere kant van de |, na de eerste {2} (geeft twee exemplaren van gehele getallen), controleren we voor het zelfde ding met spaties als de linker kant is vals. Dan voor blauw, hetzelfde moet worden geaccepteerd, maar zonder een scheidingsteken.

In de andere helft van het aanvaardbare waarden voor percentages, drijft, moet worden 0-99, expliciet 100 en niet een float, of zweeft onder 1 met de 0 gedaald. Daarom is het segment hier: (([1-9]?d(.d+)?)|100|(.d+)), en het verschijnt drie keer; twee keer met een scheidingsteken (,s?){2}, %s){2}), één keer zonder.

Het is legaal om gebruik te maken van percentages zonder spaties (rgb(100%50%10%), bijvoorbeeld) in CSS, maar de functies schreven we niet ondersteunen. Hetzelfde geldt voor rgba(100%50%10%/50%), hsl(40 100%50%), en hsla(40 100%50%/0.5). Dit zou heel goed een plus voor de code golfen en minification!

RGBA
/^rgba((((((((1?[1-9]?d)|10d|(2[0-4]d)|25[0-5]),s?)){3})|(((([1-9]?d(.d+)?)|100|(.d+))%,s?){3}))|(((((1?[1-9]?d)|10d|(2[0-4]d)|25[0-5])s){3})|(((([1-9]?d(.d+)?)|100|(.d+))%s){3}))/s)((0?.d+)|[01]|(([1-9]?d(.d+)?)|100|(.d+))%))$/i

De volgende expressie is zeer vergelijkbaar met de vorige, maar drie exemplaren van gehele getallen (((((1?[1-9]?d)|10o|(2[0-4]d)|25[0-5]),n?){3})) of percentages ((((([1-9]?d(.d+)?)|100|(.d+))%,s?){3})), plus komma optioneel ruimte worden gecontroleerd. Anders ziet het er voor hetzelfde, maar met ruimte scheidingstekens, plus een slash en ruimte (/s), na de blauwe. Naast dat is ((0?.d+)|[01]|(([1-9]?d(.d+)?)|100|(.d+))%) waar wij accepteren drijft met of zonder de eerste 0 ((0?.d+)), 0 of 1 ([01]) op de stip, of 0-100% ((([1-9]?d(.d+)?)|100|(.d+))%).

Hex met Alpha
// #rgb/#rrggbb
/^#([da-f]{3}){1,2}$/ik
// #rgba/#rrggbbaa
/^#([da-f]{4}){1,2}$/ik

Voor zowel de hex—met en zonder alpha—exemplaren van cijfers en / of letters a–f ([da-f]) worden geaccepteerd. Vervolgens één of twee exemplaren van deze zijn meegeteld voor een korte of longhand worden de geleverde waarden (#rgb of #rrggbb). Ter illustratie, we hebben deze dezelfde korte patroon: /^#([da-f]{n}){1,2}$/i. Wijzig n 3 of 4.

HSL en HSLA
// HSL
/^hsl(((((([12]?[1-9]?d)|[12]0d|(3[0-5]d))(.d+)?)|(.d+))(deg)?|(0/0?.d+)turn|(([0-6\.d+)?)|(.d+))rad)((,s?(([1-9]?d(.d+)?)|100|(.d+))%){2}|(s(([1-9]?d(.d+)?)|100|(.d+))%){2}))$/ik
// HSLA
/^hsla(((((([12]?[1-9]?d)|[12]0d|(3[0-5]d))(.d+)?)|(.d+))(deg)?|(0/0?.d+)turn|(([0-6\.d+)?)|(.d+))rad)(((,s?(([1-9]?d(.d+)?)|100|(.d+))%){2},s?)|((s(([1-9]?d(.d+)?)|100|(.d+))%){2}s/s))((0?.d+)|[01]|(([1-9]?d(.d+)?)|100|(.d+))%))$/i

Na de ( in beide uitdrukkingen voor de HSL en HSLA, deze brok is voor de hue:

((((([12]?[1-9]?d)|[12]0d|(3[0-5]d))(.d+)?)|(.d+))(deg)?|(0/0?.d+)turn|(([0-6\.d+)?)|(.d+))rad)

([12]?[1-9]?d) heeft betrekking op 0-99, 110-199, en 210-299. [12]0d heeft betrekking op 110-109 en 200-209. Vervolgens (3[0-5]d) neemt de zorg van 300-359. De reden voor deze verdeling van ranges is vergelijkbaar met die van gehele getallen in het rgb() syntaxis: uitspraak uit nullen voorop en waarden die groter zijn dan het maximum. Sinds tinten kan worden getallen met drijvende komma, de eerste (.d+)? is voor dat.

Naast de | na de genoemde segment van de code, de tweede (.d+) is voor drijft zonder een voorloopnul.

Laten we nu een niveau omhoog gaan en het ontcijferen van de volgende kleine brok:

(deg)?|(0/0?.d+)draai|(([0-6\.d+)?)|(.d+))rad

Deze bevat de labels die we kunnen gebruiken voor de hue—graden draait, of radialen. We kunnen alle of geen van deg. Waarden zijn beurt moet worden onder 1. Voor de radialen, kunnen wij aanvaarden geen enkele zweven tussen de 0-7. We weten echter wel, dat een 360° draai is 2π, en stopt ongeveer bij 6.28. Je denkt misschien 6.3 en dan moet er niet worden geaccepteerd. Omdat 2π is een irrationeel getal is, zou het te rommelig voor dit voorbeeld om te proberen te voldoen aan elke decimaal verstrekt door de JavaScript-console. Trouwens, we hebben dit fragment in onze HSLTo_() functies als een tweede laag van beveiliging als tinten 360° of meer zou gebeuren:

// Houd tint fractie van 360 als eindigt over
if (uur >= 360)
h %= 360;

Laten we nu een niveau omhoog gaan en het ontcijferen van het tweede deel:

(,s?(([1-9]?d(.d+)?)|100|(.d+))%){2}

We tellen twee exemplaren van een komma-spatie-percentages voor de verzadiging en helderheid (ruimte optioneel). In de groep na de ,s?, wij testen voor waarden 0-99 met of zonder decimale komma (([1-9]?d(.d+)?)), precies 100, of zweeft onder 1 zonder de eerste 0 ((.d+)).

Het laatste deel van de HSL-expressie, voordat het einde ()$/i), is een soortgelijke uitdrukking als ruimten zijn de enige scheidingsteken:

(s(([1-9]?d(.d+)?)|100|(.d+))%){2}

s is in het begin in plaats van ,s?. Vervolgens in de HSLA expressie is, is dit hetzelfde stuk in een andere groep ,s? na zijn {2}.

((,s?(([1-9]?d(.d+)?)|100|(.d+))%){2},s?)

Die telt de komma-spatie tussen de lichtheid en de alpha. Dan als we ruimtes als scheidingstekens, moeten we controleren voor een ruimte-slash-ruimte (s/s) na het tellen van de twee exemplaren van de ruimte en een percentage.

((s(([1-9]?d(.d+)?)|100|(.d+))%){2}s/s))

Daarna hebben we deze links om te controleren de alpha-waarde:

(((0?.d+)|[01])|(([1-9]?d(.d+)?)|100|(.d+))%)

Overeenkomsten voor (0?.d+) zijn drijvers onder 1 met of zonder de eerste 0, 0 of 1 voor [01], en 0-100%.

Conclusie

Als uw huidige uitdaging is het omzetten van de ene kleurruimte naar de andere, je hebt nu een aantal ideeën over hoe het te benaderen. Omdat het vermoeiend om te lopen door het omzetten van elke kleur de ruimte die ooit is uitgevonden in één post bespraken we de meest praktische en de browser wordt ondersteund. Als u wilt om verder te gaan dan ondersteund kleur ruimtes (zeg CMYK, XYZ, of CIE L*a*b*), EasyRGB) biedt een geweldige set van de code-ready formules.

Om alle conversies hier wordt getoond, ik heb het opzetten van een CodePen demo die laat zien ingangen en uitgangen in een tabel. U kunt proberen verschillende kleuren in lijnen 2-10 en zie de volledige functies in de JavaScript-paneel.

Zie de Pen Kleur Conversie door Jon Kantner (@jkantner) op CodePen.