Gibt es eine integrierte Funktion, die eine Farbe nach Namen in ihre Hex-Darstellung konvertiert? Als ob ich 'weiß' übergeben und '#FFFFFF' erhalten möchte. Ich möchte wirklich vermeiden, alle hundert zu codieren, wenn ich selbst bin :)
Antworten:
Nein, aber mit der Liste hier können Sie eine erstellen. Etwas wie das:
function colourNameToHex(colour)
{
var colours = {"aliceblue":"#f0f8ff","antiquewhite":"#faebd7","aqua":"#00ffff","aquamarine":"#7fffd4","azure":"#f0ffff",
"beige":"#f5f5dc","bisque":"#ffe4c4","black":"#000000","blanchedalmond":"#ffebcd","blue":"#0000ff","blueviolet":"#8a2be2","brown":"#a52a2a","burlywood":"#deb887",
"cadetblue":"#5f9ea0","chartreuse":"#7fff00","chocolate":"#d2691e","coral":"#ff7f50","cornflowerblue":"#6495ed","cornsilk":"#fff8dc","crimson":"#dc143c","cyan":"#00ffff",
"darkblue":"#00008b","darkcyan":"#008b8b","darkgoldenrod":"#b8860b","darkgray":"#a9a9a9","darkgreen":"#006400","darkkhaki":"#bdb76b","darkmagenta":"#8b008b","darkolivegreen":"#556b2f",
"darkorange":"#ff8c00","darkorchid":"#9932cc","darkred":"#8b0000","darksalmon":"#e9967a","darkseagreen":"#8fbc8f","darkslateblue":"#483d8b","darkslategray":"#2f4f4f","darkturquoise":"#00ced1",
"darkviolet":"#9400d3","deeppink":"#ff1493","deepskyblue":"#00bfff","dimgray":"#696969","dodgerblue":"#1e90ff",
"firebrick":"#b22222","floralwhite":"#fffaf0","forestgreen":"#228b22","fuchsia":"#ff00ff",
"gainsboro":"#dcdcdc","ghostwhite":"#f8f8ff","gold":"#ffd700","goldenrod":"#daa520","gray":"#808080","green":"#008000","greenyellow":"#adff2f",
"honeydew":"#f0fff0","hotpink":"#ff69b4",
"indianred ":"#cd5c5c","indigo":"#4b0082","ivory":"#fffff0","khaki":"#f0e68c",
"lavender":"#e6e6fa","lavenderblush":"#fff0f5","lawngreen":"#7cfc00","lemonchiffon":"#fffacd","lightblue":"#add8e6","lightcoral":"#f08080","lightcyan":"#e0ffff","lightgoldenrodyellow":"#fafad2",
"lightgrey":"#d3d3d3","lightgreen":"#90ee90","lightpink":"#ffb6c1","lightsalmon":"#ffa07a","lightseagreen":"#20b2aa","lightskyblue":"#87cefa","lightslategray":"#778899","lightsteelblue":"#b0c4de",
"lightyellow":"#ffffe0","lime":"#00ff00","limegreen":"#32cd32","linen":"#faf0e6",
"magenta":"#ff00ff","maroon":"#800000","mediumaquamarine":"#66cdaa","mediumblue":"#0000cd","mediumorchid":"#ba55d3","mediumpurple":"#9370d8","mediumseagreen":"#3cb371","mediumslateblue":"#7b68ee",
"mediumspringgreen":"#00fa9a","mediumturquoise":"#48d1cc","mediumvioletred":"#c71585","midnightblue":"#191970","mintcream":"#f5fffa","mistyrose":"#ffe4e1","moccasin":"#ffe4b5",
"navajowhite":"#ffdead","navy":"#000080",
"oldlace":"#fdf5e6","olive":"#808000","olivedrab":"#6b8e23","orange":"#ffa500","orangered":"#ff4500","orchid":"#da70d6",
"palegoldenrod":"#eee8aa","palegreen":"#98fb98","paleturquoise":"#afeeee","palevioletred":"#d87093","papayawhip":"#ffefd5","peachpuff":"#ffdab9","peru":"#cd853f","pink":"#ffc0cb","plum":"#dda0dd","powderblue":"#b0e0e6","purple":"#800080",
"rebeccapurple":"#663399","red":"#ff0000","rosybrown":"#bc8f8f","royalblue":"#4169e1",
"saddlebrown":"#8b4513","salmon":"#fa8072","sandybrown":"#f4a460","seagreen":"#2e8b57","seashell":"#fff5ee","sienna":"#a0522d","silver":"#c0c0c0","skyblue":"#87ceeb","slateblue":"#6a5acd","slategray":"#708090","snow":"#fffafa","springgreen":"#00ff7f","steelblue":"#4682b4",
"tan":"#d2b48c","teal":"#008080","thistle":"#d8bfd8","tomato":"#ff6347","turquoise":"#40e0d0",
"violet":"#ee82ee",
"wheat":"#f5deb3","white":"#ffffff","whitesmoke":"#f5f5f5",
"yellow":"#ffff00","yellowgreen":"#9acd32"};
if (typeof colours[colour.toLowerCase()] != 'undefined')
return colours[colour.toLowerCase()];
return false;
}
colourNameToHex('constructor')
Dies gibt es Ihnen in RGB - Sie sollten in der Lage sein, die Hex-Konvertierung ziemlich einfach durchzuführen.
d = document.createElement("div");
d.style.color = "white";
document.body.appendChild(d)
//Color in RGB
window.getComputedStyle(d).color
Get Computed Style wird nicht in allen Browsern unterstützt.
<body>; Sie sollten es entfernen, nachdem Sie seine Farbe überprüft haben.
getCompuedStyle. Ansonsten ist das Farbattribut "".
Der Ansatz "Dem DOM ein Element hinzufügen und seinen ComputedStyle überprüfen" erscheint mir etwas komplex - Sie müssen es hinzufügen und überprüfen und daran denken, es zu entfernen, und Sie ändern das DOM nur, um eine Farbe zu berechnen, und verursacht dies Reflow? Hier ist eine Lösung, die auf einer temporären (und nie gerenderten) Lösung basiert <canvas>:
function colorToRGBA(color) {
// Returns the color as an array of [r, g, b, a] -- all range from 0 - 255
// color must be a valid canvas fillStyle. This will cover most anything
// you'd want to use.
// Examples:
// colorToRGBA('red') # [255, 0, 0, 255]
// colorToRGBA('#f00') # [255, 0, 0, 255]
var cvs, ctx;
cvs = document.createElement('canvas');
cvs.height = 1;
cvs.width = 1;
ctx = cvs.getContext('2d');
ctx.fillStyle = color;
ctx.fillRect(0, 0, 1, 1);
return ctx.getImageData(0, 0, 1, 1).data;
}
function byteToHex(num) {
// Turns a number (0-255) into a 2-character hex number (00-ff)
return ('0'+num.toString(16)).slice(-2);
}
function colorToHex(color) {
// Convert any CSS color to a hex representation
// Examples:
// colorToHex('red') # '#ff0000'
// colorToHex('rgb(255, 0, 0)') # '#ff0000'
var rgba, hex;
rgba = colorToRGBA(color);
hex = [0,1,2].map(
function(idx) { return byteToHex(rgba[idx]); }
).join('');
return "#"+hex;
}
Beachten Sie, dass Sie auf diese Weise alles verwenden können, was ein gültiger Canvas-FillStyle ist. Wenn Sie also ein 1-Pixel-Muster aus einem Bild erstellen möchten, wird Ihnen auch die Farbe dieses Bilds angezeigt.
Ich habe dies in einigermaßen modernen Versionen von IE, Chrome, Safari und Firefox getestet.
@dlauzon schlug vor, meinen Kommentar in eine Antwort umzuwandeln. Vielen Dank für den Vorschlag! Hier ist es :)
function standardize_color(str){
var ctx = document.createElement('canvas').getContext('2d');
ctx.fillStyle = str;
return ctx.fillStyle;
}
function standardize_color(str){
var ctx = document.createElement("canvas").getContext("2d");
ctx.fillStyle = str;
return ctx.fillStyle;
}
document.getElementById("myspan1").innerHTML = standardize_color("red");
document.getElementById("myspan2").innerHTML = standardize_color("PeachPuff");
document.getElementById("myspan3").innerHTML = standardize_color("PaleGoldenRod");
document.getElementById("myspan4").innerHTML = standardize_color("RGB(123,234,142)");
document.getElementById("myspan5").innerHTML = standardize_color("HSL(284,6%,49%)");span { font-weight:800; }The color named "Red" has a code of: <span id="myspan1">(requires js)</span>.<br>
...and color "PeachPuff"'s code is: <span id="myspan2">(requires js)</span>.<br>
...and "PaleGoldenRod" is: <span id="myspan3">(requires js)</span>.<br><br>
It works with "RGB(123,234,142)" too: <span id="myspan4">(needs js)</span>
and therefore with: "HSL(284,6%,49%)", which is: <span id="myspan5">(requires js)
</span>. Handy!Hier funktioniert, wo Sie den Browser verwenden, um es für Sie zu berechnen
function getHexColor(colorStr) {
var a = document.createElement('div');
a.style.color = colorStr;
var colors = window.getComputedStyle( document.body.appendChild(a) ).color.match(/\d+/g).map(function(a){ return parseInt(a,10); });
document.body.removeChild(a);
return (colors.length >= 3) ? '#' + (((1 << 24) + (colors[0] << 16) + (colors[1] << 8) + colors[2]).toString(16).substr(1)) : false;
}
getHexColor('teal') // returns #008080
Erklärung durch Zeile:
Credits an Zyklus für seinen RGB-Hex-Code
var colors = '#'+window.getComputedStyle(document.body.appendChild(a)).color.match(/\d+/g).map(function(a,i){ return i>2 ? '' : ('0'+parseInt(a,10).toString(16)).substr(-2); }).join('');
Hier ist eine Allzwecklösung, die genau das tut, was Sie in jedem Browser wollen, der zu 100% programmatisch ist. Auf Wiedersehen, riesige statische Tabelle mit Namen und Hex-Werten!:
// Here is the solution tied together as a native String native extension using
// MooTools, though you can implement the same thing in whatever framework you prefer:
(function(String){
var valueMatch = {
'rgb(0,0,0)': { 'black': ' ', 'rgb(0,0,0)': ' ' },
'rgba(0,0,0,0)': { 'transparent': ' ', 'rgba(0,0,0,0)': ' ' },
'#ffffff': { 'transparent': ' ' },
'transparent': { 'transparent': ' ' }
},
colorFromProbe = function(color){
color = color.toString();
if(!color.match(/^#.+$|^[^0-9]+$/)) return color;
var probe = ($('moo_color_probe') || new Element('textarea', {
'id': 'moo_color_probe',
'styles': {
'display': 'none',
'color': 'transparent'
}
}).inject(document.body, 'after'));
try{ probe.setStyle('color', color) } catch(e){ return color } //IE throws an error instead of defaulting the style to some color or transparent when the value is unrecognized
var computed = (Browser.ie) ? ieColorToHex(probe) : (Browser.opera) ? probe.style.color : probe.getComputedStyle('color'),
match = valueMatch[computed.replace(/ /g, '')];
probe.setStyle('color', 'transparent');
if((!Browser.ie || Browser.ie9) && color == 'transparent' && (match && match['transparent'])) return 'rgba(0, 0, 0, 0)';
return (computed == 'transparent' || match && !match[color.replace(/ /g, '')]) ? color : computed;
},
ieColorToHex = function(probe){ // Special IE mojo, thanks to Dean Edwards for the inspiration, his code used a pop-up window to test the color, I found you can simply use a textarea instead ;)
var value = probe.set('value', '').createTextRange().queryCommandValue("ForeColor");
value = (((value & 0x0000ff) << 16) | (value & 0x00ff00) | ((value & 0xff0000) >>> 16)).toString(16);
return "#000000".slice(0, 7 - value.length) + value;
};
String.implement({
colorToRgb: function(){
var color = colorFromProbe(this);
return (color.charAt(0) == '#') ? color.hexToRgb() : color;
},
colorToHex: function(){
var color = colorFromProbe(this);
return (color.test('rgb')) ? color.rgbToHex() : color;
}
});
})(String);
Eine ausführlichere Erklärung und ein Live-Beispiel finden Sie hier: http://www.backalleycoder.com/2010/10/05/converting-css-named-colors-to-rgb-and-hex/
TextRangeund zu benutzen queryCommandValue().
Sie müssen sich darauf verlassen getComputedStyle(...).
Anwendungsbeispiel getComputedStyle:
function convertToHexColor(englishColor) {
// create a temporary div.
var div = $('<div></div>').appendTo("body").css('background-color', englishColor);
var computedStyle = window.getComputedStyle(div[0]);
// get computed color.
var computedColor = computedStyle.backgroundColor;
// cleanup temporary div.
div.remove();
// done.
return computedColor;
// The above returns "rgb(R, G, B)" on IE9/Chrome20/Firefox13.
};
Und um "rgb (R, G, B)" in #RRGGBB zu konvertieren, können Sie Folgendes verwenden:
function convertRGBDecimalToHex(rgb)
{
var regex = /rgb *\( *([0-9]{1,3}) *, *([0-9]{1,3}) *, *([0-9]{1,3}) *\)/;
var values = regex.exec(rgb);
if(values.length != 4)
{
return rgb; // fall back to what was given.
}
var r = Math.round(parseFloat(values[1]));
var g = Math.round(parseFloat(values[2]));
var b = Math.round(parseFloat(values[3]));
return "#"
+ (r + 0x10000).toString(16).substring(3).toUpperCase()
+ (g + 0x10000).toString(16).substring(3).toUpperCase()
+ (b + 0x10000).toString(16).substring(3).toUpperCase();
}
cssAnrufe (von denen einer wahrscheinlich auf einen berechneten Aufruf zurückgreift).
Aufbauend auf Gregs Antwort einschließlich der grau / grauen Version
hinzugefügt: Flag zum Durchlaufen nicht aufgelöster Zeichenfolgen
verfügbar als gist colorhelpersforcanvas.js
String.prototype.colorNameToHex = function (returnUnresolved) { // color list from https://stackoverflow.com/q/1573053/731179 with added gray/gray
var hexRGB, definedColorNames = {"aliceblue": "#f0f8ff", "antiquewhite": "#faebd7", "aqua": "#00ffff", "aquamarine": "#7fffd4", "azure": "#f0ffff", "beige": "#f5f5dc", "bisque": "#ffe4c4", "black": "#000000", "blanchedalmond": "#ffebcd", "blue": "#0000ff", "blueviolet": "#8a2be2", "brown": "#a52a2a", "burlywood": "#deb887", "cadetblue": "#5f9ea0", "chartreuse": "#7fff00", "chocolate": "#d2691e", "coral": "#ff7f50", "cornflowerblue": "#6495ed", "cornsilk": "#fff8dc", "crimson": "#dc143c", "cyan": "#00ffff", "darkblue": "#00008b", "darkcyan": "#008b8b", "darkgoldenrod": "#b8860b", "darkgray": "#a9a9a9", "darkgreen": "#006400", "darkkhaki": "#bdb76b", "darkmagenta": "#8b008b", "darkolivegreen": "#556b2f", "darkorange": "#ff8c00", "darkorchid": "#9932cc", "darkred": "#8b0000", "darksalmon": "#e9967a", "darkseagreen": "#8fbc8f", "darkslateblue": "#483d8b", "darkslategray": "#2f4f4f", "darkturquoise": "#00ced1", "darkviolet": "#9400d3", "deeppink": "#ff1493", "deepskyblue": "#00bfff", "dimgray": "#696969", "dodgerblue": "#1e90ff", "firebrick": "#b22222", "floralwhite": "#fffaf0", "forestgreen": "#228b22", "fuchsia": "#ff00ff", "gainsboro": "#dcdcdc", "ghostwhite": "#f8f8ff", "gold": "#ffd700", "goldenrod": "#daa520", "gray": "#808080", "green": "#008000", "greenyellow": "#adff2f", "honeydew": "#f0fff0", "hotpink": "#ff69b4", "indianred ": "#cd5c5c", "indigo ": "#4b0082", "ivory": "#fffff0", "khaki": "#f0e68c", "lavender": "#e6e6fa", "lavenderblush": "#fff0f5", "lawngreen": "#7cfc00", "lemonchiffon": "#fffacd", "lightblue": "#add8e6", "lightcoral": "#f08080", "lightcyan": "#e0ffff", "lightgoldenrodyellow": "#fafad2", "lightgrey": "#d3d3d3", "lightgreen": "#90ee90", "lightpink": "#ffb6c1", "lightsalmon": "#ffa07a", "lightseagreen": "#20b2aa", "lightskyblue": "#87cefa", "lightslategray": "#778899", "lightsteelblue": "#b0c4de", "lightyellow": "#ffffe0", "lime": "#00ff00", "limegreen": "#32cd32", "linen": "#faf0e6", "magenta": "#ff00ff", "maroon": "#800000", "mediumaquamarine": "#66cdaa", "mediumblue": "#0000cd", "mediumorchid": "#ba55d3", "mediumpurple": "#9370d8", "mediumseagreen": "#3cb371", "mediumslateblue": "#7b68ee", "mediumspringgreen": "#00fa9a", "mediumturquoise": "#48d1cc", "mediumvioletred": "#c71585", "midnightblue": "#191970", "mintcream": "#f5fffa", "mistyrose": "#ffe4e1", "moccasin": "#ffe4b5", "navajowhite": "#ffdead", "navy": "#000080", "oldlace": "#fdf5e6", "olive": "#808000", "olivedrab": "#6b8e23", "orange": "#ffa500", "orangered": "#ff4500", "orchid": "#da70d6", "palegoldenrod": "#eee8aa", "palegreen": "#98fb98", "paleturquoise": "#afeeee", "palevioletred": "#d87093", "papayawhip": "#ffefd5", "peachpuff": "#ffdab9", "peru": "#cd853f", "pink": "#ffc0cb", "plum": "#dda0dd", "powderblue": "#b0e0e6", "purple": "#800080", "red": "#ff0000", "rosybrown": "#bc8f8f", "royalblue": "#4169e1", "saddlebrown": "#8b4513", "salmon": "#fa8072", "sandybrown": "#f4a460", "seagreen": "#2e8b57", "seashell": "#fff5ee", "sienna": "#a0522d", "silver": "#c0c0c0", "skyblue": "#87ceeb", "slateblue": "#6a5acd", "slategray": "#708090", "snow": "#fffafa", "springgreen": "#00ff7f", "steelblue": "#4682b4", "tan": "#d2b48c", "teal": "#008080", "thistle": "#d8bfd8", "tomato": "#ff6347", "turquoise": "#40e0d0", "violet": "#ee82ee", "wheat": "#f5deb3", "white": "#ffffff", "whitesmoke": "#f5f5f5", "yellow": "#ffff00", "yellowgreen": "#9acd32", "darkgrey": "#a9a9a9", "darkslategrey": "#2f4f4f", "dimgrey": "#696969", "grey": "#808080", "lightgray": "#d3d3d3", "lightslategrey": "#778899", "slategrey": "#708090"};
if (definedColorNames[this.toLowerCase()] !== undefined) {
hexRGB = definedColorNames[this.toLowerCase()];
// to keep unresolved strings set flag returnUnresolved to true
} else {if (returnUnresolved) {hexRGB = this; } else {hexRGB = undefined; } }
return hexRGB;
};
Einige Testfälle:
console.log("black".colorNameToHex()); //returns #000000
console.log("rgba(100,100,0,0.7)".colorNameToHex()); //returns undefined
console.log("rgba(100,100,0,0.7)".colorNameToHex(1)); //returns rgba(100,100,0,0.7)
als Bonus hier mein Anwendungsfall dafür bei einer Konvertierung von Farbstring in Farbstring mit Alpha:
funktioniert mit jeder CSS-definierten Farbe, einschließlich: rgba, rgb, r% g% b%, #rgb, #rrggbb, hsl, hsla
Dies ist besonders nützlich beim Zeichnen mit Alpha / Deckkraft / Transparenz auf ein HTML5-Canvas-Element mit übergebenen Farbzeichenfolgen
String.prototype.setAlpha = function (alpha) {
// change alpha of color string in any css color space
// intended for use in canvas/svg
// currently implemented:
// css defined colors > rgba
// rgba, rgb, r%g%b%, #rgb, #rrggbb > rgba
// hsl, hsla > hsla
// unresolved > as is
//
// If no alpha is passed its is set to 1 or keeps the value in rgba/hsla
// kill whitespace split at "(", ")", ","
var i, hex, c = this.replace(/\s/g, '').split(/[\(\),]/);
function extractHex(string) {
if (string.charAt(0) === "#") { // detect hex strings
hex = string.replace(/#/g, '');
string = "hex";
} else {hex = undefined; }
return string;
}
extractHex(c[0]);
if (["rgba", "rgb", "hsla", "hsl", "hex"].indexOf(c[0]) === -1) {
c[0] = extractHex(c[0].colorNameToHex(1)); // detect defined color names
}
switch (c[0]) {
case "rgba":
if (alpha === undefined) {alpha = c[4]; }
c = "rgba(" + c[1] + ", " + c[2] + ", " + c[3] + ", " + alpha + ")";
break;
case "rgb":
if (alpha === undefined) {alpha = 1; }
// if colors are in percentage values
for (i = 1; i <= 3; i = i + 1) {
if (c[i].charAt(c[i].length - 1) === "%") {
c[i] = Math.round(c[i].replace(/%/g, '') * 2.55);
}
}
c = "rgba(" + c[1] + ", " + c[2] + ", " + c[3] + ", " + alpha + ")";
break;
case "hsl":
if (alpha === undefined) {alpha = 1; }
c = "hsla(" + c[1] + ", " + c[2] + ", " + c[3] + ", " + alpha + ")";
break;
case "hsla":
if (alpha === undefined) {alpha = c[4]; }
c = "hsla(" + c[1] + ", " + c[2] + ", " + c[3] + ", " + alpha + ")";
break;
case "hex":
if (alpha === undefined) {alpha = 1; }
if (hex.length === 3) {
c[1] = parseInt(hex.charAt(0) + hex.charAt(0), 16);
c[2] = parseInt(hex.charAt(1) + hex.charAt(1), 16);
c[3] = parseInt(hex.charAt(2) + hex.charAt(2), 16);
} else if (hex.length === 6) {
c[1] = parseInt(hex.charAt(0) + hex.charAt(1), 16);
c[2] = parseInt(hex.charAt(2) + hex.charAt(3), 16);
c[3] = parseInt(hex.charAt(4) + hex.charAt(5), 16);
} else {break; }
c = "rgba(" + c[1] + ", " + c[2] + ", " + c[3] + ", " + alpha + ")";
break;
default: c = this; break;
}
return c;
};
Prüfung:
console.log("orange".setAlpha(0.3));
Führen Sie das Snippet aus, um zu sehen, wie einfach "jede" gültige CSS-Farbe (HSL, Namen, Hex, Systemfarben * usw.) mit jedem Element, das Sie herumliegen, in R / G / B-Werte konvertiert werden kann.
* Geben Sie einen Wert von ein und Sie erhalten Ihre Windows Desktop-Hintergrundfarbe (jedenfalls in Firefox).background
IE8 getComputedStyle Polyfill bei Bedarf
var rgbToHex = function(r, g, b) {
return "#" + (16777216 | b | (g << 8) | (r << 16)).toString(16).slice(1);
};
var d = document.createElement('div');
d.style.color = 'white';
window.document.body.appendChild(d);
var parts = (window.getComputedStyle(d).color || '').match(/\d+/g);
var f = function(n) { return parseInt(n, 10); };
window.document.body.removeChild(d);
var hex = rgbToHex(f(parts[0]), f(parts[1]), f(parts[2]));
//"#ffffff"
Diese Funktion fordert eine benannte Farbe an und sendet einen hexadezimalen Farbwert. Wenn die benannte Farbe nicht unterstützt wird (Beispiel "whyte"), senden Sie standardmäßig schwarze Farbe zurück, aber auf der Konsole wird eine Warnung angezeigt: Nicht unterstützte benannte Farbe: $ {namedColor}
const namedColorToHex = namedColor => {
const html = document.querySelector("html");
const originalColor = html.style.color;
html.style.color = namedColor;
const rgbFormatBgColor = window.getComputedStyle(html).color;
if (namedColor !== "black" && rgbFormatBgColor === "rgb(0, 0, 0)") {
console.warn(`Not supported named color: ${namedColor}`);
}
html.style.color = originalColor;
const regEx = /(\d+)/g;
const result = rgbFormatBgColor.match(regEx);
let hexColor = `#`;
result.forEach(value => {
let hex = Number(value).toString(16);
if (hex.length === 1) {
hex = `0${hex}`;
}
hexColor += hex;
});
return hexColor;
};
Laden Sie die Datei w3color.js von w3school herunter und fügen Sie sie hinzu .
Dann können Sie in Ihrem Skript eine der folgenden Funktionen verwenden:
let c = w3color("violet");
c.darker(n)
c.desaturate(n)
c.isDark(n)
c.lighter(n)
c.saturate(n)
c.toCmyk()
c.toCmykString()
c.toCmykStringDecimal()
c.toHexString()
c.toHsl()
c.toHslString()
c.toHslStringDecimal()
c.toHslaString()
c.toHwb()
c.toHwbString()
c.toHwbStringDecimal()
c.toHwbaString()
c.toName()
c.toNcol()
c.toNcolString()
c.toNcolStringDecimal()
c.toNcolaString()
c.toRgb()
c.toRgbString()
c.toRgbaString()
Soweit ich weiß, ist das nicht eingebaut. Es wäre eine Art Hack, aber ich denke, Sie könnten ein unsichtbares Div erstellen, seine CSS-Hintergrundeigenschaft auf die benannte Farbe setzen, dann JS verwenden, um die Hintergrundfarbe des Div zu erhalten, und dann das Div löschen.
Der Schnellcode nur für HEX / RGB-Werte kann für jemanden nützlich sein und kann so angepasst werden, dass er Namen enthält: Ziehen Sie das gesamte Objekt in die for-Schleife, überprüfen Sie den Namen, und wenn er übereinstimmt, haben Sie Ihr hex / rbg. Sie stammen von hier: http://www.colourlovers.com/web/blog/2008/04/22/all-120-crayon-names-color-codes-and-fun-facts
Beachten Sie vor allem die korrekte Schreibweise von "Farbe": P.
/*COLOURS*/
function loadColourPalette() {
$("#colourPalette").empty();
//load them animated
for (var t = 0; t<120; t++){
var c = returnColourForIndex(t);
console.log("c is " + c);
var div = '<div class="colourBox" id="cb'+t+'" style="background:'+c+'"></div>';
$("#colourPalette").append(div);
}
}
function returnColourForIndex(i){
var colours = [ {hex:"CD4A4A",rgb:"205,74,74"},
{hex:"CC6666",rgb:"204,102,102"},
{hex:"BC5D58",rgb:"188,93,88"},
{hex:"FF5349",rgb:"255,83,73"},
{hex:"FD5E53",rgb:"253,94,83"},
{hex:"FD7C6E",rgb:"253,124,110"},
{hex:"FDBCB4",rgb:"253,188,180"},
{hex:"FF6E4A",rgb:"255,110,74"},
{hex:"FFA089",rgb:"255,160,137"},
{hex:"EA7E5D",rgb:"234,126,93"},
{hex:"B4674D",rgb:"180,103,77"},
{hex:"A5694F",rgb:"165,105,79"},
{hex:"FF7538",rgb:"255,117,56"},
{hex:"FF7F49",rgb:"255,127,73"},
{hex:"DD9475",rgb:"221,148,117"},
{hex:"FF8243",rgb:"255,130,67"},
{hex:"FFA474",rgb:"255,164,116"},
{hex:"9F8170",rgb:"159,129,112"},
{hex:"CD9575",rgb:"205,149,117"},
{hex:"EFCDB8",rgb:"239,205,184"},
{hex:"D68A59",rgb:"214,138,89"},
{hex:"DEAA88",rgb:"222,170,136"},
{hex:"FAA76C",rgb:"250,167,108"},
{hex:"FFCFAB",rgb:"255,207,171"},
{hex:"FFBD88",rgb:"255,189,136"},
{hex:"FDD9B5",rgb:"253,217,181"},
{hex:"FFA343",rgb:"255,163,67"},
{hex:"EFDBC5",rgb:"239,219,197"},
{hex:"FFB653",rgb:"255,182,83"},
{hex:"E7C697",rgb:"231,198,151"},
{hex:"8A795D",rgb:"138,121,93"},
{hex:"FAE7B5",rgb:"250,231,181"},
{hex:"FFCF48",rgb:"255,207,72"},
{hex:"FCD975",rgb:"252,217,117"},
{hex:"FDDB6D",rgb:"253,219,109"},
{hex:"FCE883",rgb:"252,232,131"},
{hex:"F0E891",rgb:"240,232,145"},
{hex:"ECEABE",rgb:"236,234,190"},
{hex:"BAB86C",rgb:"186,184,108"},
{hex:"FDFC74",rgb:"253,252,116"},
{hex:"FFFF99",rgb:"255,255,153"},
{hex:"C5E384",rgb:"197,227,132"},
{hex:"B2EC5D",rgb:"178,236,93"},
{hex:"87A96B",rgb:"135,169,107"},
{hex:"A8E4A0",rgb:"168,228,160"},
{hex:"1DF914",rgb:"29,249,20"},
{hex:"76FF7A",rgb:"118,255,122"},
{hex:"71BC78",rgb:"113,188,120"},
{hex:"6DAE81",rgb:"109,174,129"},
{hex:"9FE2BF",rgb:"159,226,191"},
{hex:"1CAC78",rgb:"28,172,120"},
{hex:"30BA8F",rgb:"48,186,143"},
{hex:"45CEA2",rgb:"69,206,162"},
{hex:"3BB08F",rgb:"59,176,143"},
{hex:"1CD3A2",rgb:"28,211,162"},
{hex:"17806D",rgb:"23,128,109"},
{hex:"158078",rgb:"21,128,120"},
{hex:"1FCECB",rgb:"31,206,203"},
{hex:"78DBE2",rgb:"120,219,226"},
{hex:"77DDE7",rgb:"119,221,231"},
{hex:"80DAEB",rgb:"128,218,235"},
{hex:"199EBD",rgb:"251,58,189"},
{hex:"1CA9C9",rgb:"28,169,201"},
{hex:"1DACD6",rgb:"291,72,214"},
{hex:"9ACEEB",rgb:"154,206,235"},
{hex:"1A4876",rgb:"26,72,118"},
{hex:"1974D2",rgb:"25,116,210"},
{hex:"2B6CC4",rgb:"43,108,196"},
{hex:"1F75FE",rgb:"31,117,254"},
{hex:"C5D0E6",rgb:"197,208,230"},
{hex:"B0B7C6",rgb:"176,183,198"},
{hex:"5D76CB",rgb:"93,118,203"},
{hex:"A2ADD0",rgb:"162,173,208"},
{hex:"979AAA",rgb:"151,154,170"},
{hex:"ADADD6",rgb:"173,173,214"},
{hex:"7366BD",rgb:"115,102,189"},
{hex:"7442C8",rgb:"116,66,200"},
{hex:"7851A9",rgb:"120,81,169"},
{hex:"9D81BA",rgb:"157,129,186"},
{hex:"926EAE",rgb:"146,110,174"},
{hex:"CDA4DE",rgb:"205,164,222"},
{hex:"8F509D",rgb:"143,80,157"},
{hex:"C364C5",rgb:"195,100,197"},
{hex:"FB7EFD",rgb:"251,126,253"},
{hex:"FC74FD",rgb:"252,116,253"},
{hex:"8E4585",rgb:"142,69,133"},
{hex:"FF1DCE",rgb:"255,29,206"},
{hex:"FF48D0",rgb:"255,72,208"},
{hex:"E6A8D7",rgb:"230,168,215"},
{hex:"C0448F",rgb:"192,68,143"},
{hex:"6E5160",rgb:"110,81,96"},
{hex:"DD4492",rgb:"221,68,146"},
{hex:"FF43A4",rgb:"255,67,164"},
{hex:"F664AF",rgb:"246,100,175"},
{hex:"FCB4D5",rgb:"252,180,213"},
{hex:"FFBCD9",rgb:"255,188,217"},
{hex:"F75394",rgb:"247,83,148"},
{hex:"FFAACC",rgb:"255,170,204"},
{hex:"E3256B",rgb:"227,37,107"},
{hex:"FDD7E4",rgb:"253,215,228"},
{hex:"CA3767",rgb:"202,55,103"},
{hex:"DE5D83",rgb:"222,93,131"},
{hex:"FC89AC",rgb:"252,137,172"},
{hex:"F780A1",rgb:"247,128,161"},
{hex:"C8385A",rgb:"200,56,90"},
{hex:"EE204D",rgb:"238,32,77"},
{hex:"FF496C",rgb:"255,73,108"},
{hex:"EF98AA",rgb:"239,152,170"},
{hex:"FC6C85",rgb:"252,108,133"},
{hex:"FC2847",rgb:"252,40,71"},
{hex:"FF9BAA",rgb:"255,155,170"},
{hex:"CB4154",rgb:"203,65,84"},
{hex:"FFFFFF",rgb:"255,255,255"},
{hex:"EDEDED",rgb:"237,237,237"},
{hex:"DBD7D2",rgb:"219,215,210"},
{hex:"CDC5C2",rgb:"205,197,194"},
{hex:"95918C",rgb:"149,145,140"},
{hex:"414A4C",rgb:"65,74,76"},
{hex:"232323",rgb:"35,35,35"},
{hex:"000000",rgb:"0,0,0"}];
return "#"+colours[i].hex;
}
function hexToRGB(hex){return hex.split(/(?=(?:..)*$)/g).map(function(x){return parseInt(x,16)}).join(",")}