Hi
I’d like to fetch the hex value from a website e.g.: https://rgb.to/save/json/ral/9001
Nothing I’ve tried is working so far…
Could you please help me to set it up correctly?
Thank’s
Alex
Hi
I’d like to fetch the hex value from a website e.g.: https://rgb.to/save/json/ral/9001
Nothing I’ve tried is working so far…
Could you please help me to set it up correctly?
Thank’s
Alex
Fetch the JSON using Call API or JavaScript, and then extract the Hex value with a Query JSON column:
Hi Darren,
thank’s for quick reply.
I have the free plan so I guess API won’t work out.
all js attempts were failing so far.
const response = await fetch(p1);
const data = await response.json();
const jsonData = JSON.stringify(data);
return jsonData;
Hi Eric,
I guess it’s not plain JSON because it shows me this syntax error.
Is there a way to fetch the JSON “inbetween the lines”?
Thank’s
Alex
does this work in the freeplan? To fetch data from an external source?
JavaScript works on all plans
yes i know but for this use case?
If it returns a value, then it works.
However, the question is about security and rate limits.
In comparison to Glide’s Call API functionality, the Call API runs server side to secure your API key, and also caches responses to reduce the risk of rate limiting.
PS, I did ask ChatGPT for code to mimic this same functionally instead of relying on an external API. Haven’t had a chance to play around with it much, but it wasn’t quite working yet. I would definitely encourage considering that path, because I think the code is pretty simple and shouldn’t rely on an API.
wow I didn’t know this was possible - coool
This in a javascript column should give the same or similar result.
Just pass your hex code as the p1 parameter. No need for calling an API.
function hexToColorData(hex) {
// Ensure the hex code is valid and clean it up
const cleanHex = hex.replace('#', '').toUpperCase();
if (cleanHex.length !== 6) {
throw new Error('Invalid hex code');
}
// Convert hex to RGB
const r = parseInt(cleanHex.substring(0, 2), 16);
const g = parseInt(cleanHex.substring(2, 4), 16);
const b = parseInt(cleanHex.substring(4, 6), 16);
// Convert RGB to HSL
const { h: hslH, s: hslS, l: hslL } = rgbToHsl(r, g, b);
// Convert RGB to HSB (also known as HSV)
const { h: hsbH, s: hsbS, b: hsbB } = rgbToHsb(r, g, b);
// Convert RGB to CMYK
const { c, m, y, k } = rgbToCmyk(r, g, b);
// Calculate the closest web-safe color
const webSafe = toWebSafe(r, g, b);
return {
hex: `#${cleanHex}`,
websafe: webSafe,
rgb: { r, g, b },
hsl: { h: Math.round(hslH), s: Math.round(hslS), l: Math.round(hslL) },
hsb: { h: Math.round(hsbH), s: Math.round(hsbS), b: Math.round(hsbB) },
cmyk: { c: Math.round(c), m: Math.round(m), y: Math.round(y), k: Math.round(k) }
};
}
function rgbToHsl(r, g, b) {
r /= 255;
g /= 255;
b /= 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max === min) {
h = s = 0;
} else {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return { h: h * 360, s: s * 100, l: l * 100 };
}
function rgbToHsb(r, g, b) {
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const delta = max - min;
const brightness = max / 255;
const saturation = max === 0 ? 0 : (delta / max);
let hue = 0;
if (delta !== 0) {
switch (max) {
case r: hue = ((g - b) / delta) % 6; break;
case g: hue = (b - r) / delta + 2; break;
case b: hue = (r - g) / delta + 4; break;
}
hue *= 60;
if (hue < 0) hue += 360;
}
return { h: hue, s: saturation * 100, b: brightness * 100 };
}
function rgbToCmyk(r, g, b) {
const rPrime = r / 255;
const gPrime = g / 255;
const bPrime = b / 255;
const k = 1 - Math.max(rPrime, gPrime, bPrime);
const c = (1 - rPrime - k) / (1 - k) || 0;
const m = (1 - gPrime - k) / (1 - k) || 0;
const y = (1 - bPrime - k) / (1 - k) || 0;
return { c: c * 100, m: m * 100, y: y * 100, k: k * 100 };
}
function toWebSafe(r, g, b) {
const safeR = Math.round(r / 51) * 51;
const safeG = Math.round(g / 51) * 51;
const safeB = Math.round(b / 51) * 51;
return `#${((1 << 24) | (safeR << 16) | (safeG << 8) | safeB).toString(16).slice(1)}`;
}
// Example usage:
return JSON.stringify(hexToColorData(p1));
I seem to get all the same results with the exception of cmyk, which appears to be different. Not sure if that matters or not.
{
"hex":"#E9E0D2",
"websafe":"#ffcccc",
"rgb":{
"r":233,
"g":224,
"b":210
},
"hsl":{
"h":37,
"s":34,
"l":87
},
"hsb":{
"h":37,
"s":10,
"b":91
},
"cmyk":{
"c":0,
"m":4,
"y":10,
"k":9
}
}
Hi Jeff,
nice work but in my case it wouldn’t help me because I need RAL , Pantone and hks converted to hex.
Thank’s
Alex
Yeah, I think I’m coming to that conclusion. I missed the part about RAL.
Doing some quick reading, it appears that RAL to HEX requires a conversion chart.
So let me ask this. Is your only goal to get a Hex value, given a RAL value? I think a simple conversion chart in some javascript will work.
This is long, so apologies, but paste this in a javascript column.
const ralColors = {
"1000":{
"code":"1000",
"name":"Green beige",
"rgb":"205-186-136",
"hex":"#CDBA88"
},
"1001":{
"code":"1001",
"name":"Beige",
"rgb":"208-176-132",
"hex":"#D0B084"
},
"1002":{
"code":"1002",
"name":"Sand yellow",
"rgb":"210-170-109",
"hex":"#D2AA6D"
},
"1003":{
"code":"1003",
"name":"Signal yellow",
"rgb":"249-168-0",
"hex":"#F9A800"
},
"1004":{
"code":"1004",
"name":"Golden yellow",
"rgb":"228-158-0",
"hex":"#E49E00"
},
"1005":{
"code":"1005",
"name":"Honey yellow",
"rgb":"203-142-0",
"hex":"#CB8E00"
},
"1006":{
"code":"1006",
"name":"Maize yellow",
"rgb":"226-144-0",
"hex":"#E29000"
},
"1007":{
"code":"1007",
"name":"Daffodil yellow",
"rgb":"232-140-0",
"hex":"#E88C00"
},
"1011":{
"code":"1011",
"name":"Brown beige",
"rgb":"175-128-79",
"hex":"#AF804F"
},
"1012":{
"code":"1012",
"name":"Lemon yellow",
"rgb":"221-175-39",
"hex":"#DDAF27"
},
"1013":{
"code":"1013",
"name":"Oyster white",
"rgb":"227-217-198",
"hex":"#E3D9C6"
},
"1014":{
"code":"1014",
"name":"Ivory",
"rgb":"221-196-154",
"hex":"#DDC49A"
},
"1015":{
"code":"1015",
"name":"Light ivory",
"rgb":"230-210-181",
"hex":"#E6D2B5"
},
"1016":{
"code":"1016",
"name":"Sulfur yellow",
"rgb":"241-221-56",
"hex":"#F1DD38"
},
"1017":{
"code":"1017",
"name":"Saffron yellow",
"rgb":"246-169-80",
"hex":"#F6A950"
},
"1018":{
"code":"1018",
"name":"Zinc yellow",
"rgb":"250-202-48",
"hex":"#FACA30"
},
"1019":{
"code":"1019",
"name":"Grey beige",
"rgb":"164-143-122",
"hex":"#A48F7A"
},
"1020":{
"code":"1020",
"name":"Olive yellow",
"rgb":"160-143-101",
"hex":"#A08F65"
},
"1021":{
"code":"1021",
"name":"Colza yellow",
"rgb":"246-182-0",
"hex":"#F6B600"
},
"1023":{
"code":"1023",
"name":"Traffic yellow",
"rgb":"247-181-0",
"hex":"#F7B500"
},
"1024":{
"code":"1024",
"name":"Ochre yellow",
"rgb":"186-143-76",
"hex":"#BA8F4C"
},
"1026":{
"code":"1026",
"name":"Luminous yellow",
"rgb":"255-255-0",
"hex":"#FFFF00"
},
"1027":{
"code":"1027",
"name":"Curry",
"rgb":"167-127-14",
"hex":"#A77F0E"
},
"1028":{
"code":"1028",
"name":"Melon yellow",
"rgb":"255-155-0",
"hex":"#FF9B00"
},
"1032":{
"code":"1032",
"name":"Broom yellow",
"rgb":"226-163-0",
"hex":"#E2A300"
},
"1033":{
"code":"1033",
"name":"Dahlia yellow",
"rgb":"249-154-28",
"hex":"#F99A1C"
},
"1034":{
"code":"1034",
"name":"Pastel yellow",
"rgb":"235-156-82",
"hex":"#EB9C52"
},
"1035":{
"code":"1035",
"name":"Pearl beige",
"rgb":"144-131-112",
"hex":"#908370"
},
"1036":{
"code":"1036",
"name":"Pearl gold",
"rgb":"128-100-63",
"hex":"#80643F"
},
"1037":{
"code":"1037",
"name":"Sun yellow",
"rgb":"240-146-0",
"hex":"#F09200"
},
"2000":{
"code":"2000",
"name":"Yellow orange",
"rgb":"218-110-0",
"hex":"#DA6E00"
},
"2001":{
"code":"2001",
"name":"Red orange",
"rgb":"186-72-27",
"hex":"#BA481B"
},
"2002":{
"code":"2002",
"name":"Vermilion",
"rgb":"191-57-34",
"hex":"#BF3922"
},
"2003":{
"code":"2003",
"name":"Pastel orange",
"rgb":"246-120-40",
"hex":"#F67828"
},
"2004":{
"code":"2004",
"name":"Pure orange",
"rgb":"226-83-3",
"hex":"#E25303"
},
"2005":{
"code":"2005",
"name":"Luminous orange",
"rgb":"255-77-6",
"hex":"#FF4D06"
},
"2007":{
"code":"2007",
"name":"Luminous bright orange",
"rgb":"255-178-0",
"hex":"#FFB200"
},
"2008":{
"code":"2008",
"name":"Bright red orange",
"rgb":"237-107-33",
"hex":"#ED6B21"
},
"2009":{
"code":"2009",
"name":"Traffic orange",
"rgb":"222-83-7",
"hex":"#DE5307"
},
"2010":{
"code":"2010",
"name":"Signal orange",
"rgb":"208-93-40",
"hex":"#D05D28"
},
"2011":{
"code":"2011",
"name":"Deep orange",
"rgb":"226-110-14",
"hex":"#E26E0E"
},
"2012":{
"code":"2012",
"name":"Salmon orange",
"rgb":"213-101-77",
"hex":"#D5654D"
},
"2013":{
"code":"2013",
"name":"Pearl orange",
"rgb":"146-62-37",
"hex":"#923E25"
},
"3000":{
"code":"3000",
"name":"Flame red",
"rgb":"167-41-32",
"hex":"#A72920"
},
"3001":{
"code":"3001",
"name":"Signal red",
"rgb":"155-36-35",
"hex":"#9B2423"
},
"3002":{
"code":"3002",
"name":"Carmine red",
"rgb":"155-35-33",
"hex":"#9B2321"
},
"3003":{
"code":"3003",
"name":"Ruby red",
"rgb":"134-26-34",
"hex":"#861A22"
},
"3004":{
"code":"3004",
"name":"Purple red",
"rgb":"107-28-35",
"hex":"#6B1C23"
},
"3005":{
"code":"3005",
"name":"Wine red",
"rgb":"89-25-31",
"hex":"#59191F"
},
"3007":{
"code":"3007",
"name":"Black red",
"rgb":"62-32-34",
"hex":"#3E2022"
},
"3009":{
"code":"3009",
"name":"Oxide red",
"rgb":"109-52-45",
"hex":"#6D342D"
},
"3011":{
"code":"3011",
"name":"Brown red",
"rgb":"121-36-35",
"hex":"#792423"
},
"3012":{
"code":"3012",
"name":"Beige red",
"rgb":"198-132-109",
"hex":"#C6846D"
},
"3013":{
"code":"3013",
"name":"Tomato red",
"rgb":"151-46-37",
"hex":"#972E25"
},
"3014":{
"code":"3014",
"name":"Antique pink",
"rgb":"203-115-117",
"hex":"#CB7375"
},
"3015":{
"code":"3015",
"name":"Light pink",
"rgb":"216-160-166",
"hex":"#D8A0A6"
},
"3016":{
"code":"3016",
"name":"Coral red",
"rgb":"166-61-47",
"hex":"#A63D2F"
},
"3017":{
"code":"3017",
"name":"Rose",
"rgb":"203-85-93",
"hex":"#CB555D"
},
"3018":{
"code":"3018",
"name":"Strawberry red",
"rgb":"199-63-74",
"hex":"#C73F4A"
},
"3020":{
"code":"3020",
"name":"Traffic red",
"rgb":"187-30-16",
"hex":"#BB1E10"
},
"3022":{
"code":"3022",
"name":"Salmon pink",
"rgb":"207-105-85",
"hex":"#CF6955"
},
"3024":{
"code":"3024",
"name":"Luminous red",
"rgb":"255-45-33",
"hex":"#FF2D21"
},
"3026":{
"code":"3026",
"name":"Luminous bright red",
"rgb":"255-42-27",
"hex":"#FF2A1B"
},
"3027":{
"code":"3027",
"name":"Raspberry red",
"rgb":"171-39-60",
"hex":"#AB273C"
},
"3028":{
"code":"3028",
"name":"Pure red",
"rgb":"204-44-36",
"hex":"#CC2C24"
},
"3031":{
"code":"3031",
"name":"Orient red",
"rgb":"166-52-55",
"hex":"#A63437"
},
"3032":{
"code":"3032",
"name":"Pearl ruby red",
"rgb":"112-29-35",
"hex":"#701D23"
},
"3033":{
"code":"3033",
"name":"Pearl pink",
"rgb":"165-58-45",
"hex":"#A53A2D"
},
"4001":{
"code":"4001",
"name":"Red lilac",
"rgb":"129-97-131",
"hex":"#816183"
},
"4002":{
"code":"4002",
"name":"Red violet",
"rgb":"141-60-75",
"hex":"#8D3C4B"
},
"4003":{
"code":"4003",
"name":"Heather violet",
"rgb":"196-97-140",
"hex":"#C4618C"
},
"4004":{
"code":"4004",
"name":"Claret violet",
"rgb":"101-30-56",
"hex":"#651E38"
},
"4005":{
"code":"4005",
"name":"Blue lilac",
"rgb":"118-104-154",
"hex":"#76689A"
},
"4006":{
"code":"4006",
"name":"Traffic purple",
"rgb":"144-51-115",
"hex":"#903373"
},
"4007":{
"code":"4007",
"name":"Purple violet",
"rgb":"71-36-60",
"hex":"#47243C"
},
"4008":{
"code":"4008",
"name":"Signal violet",
"rgb":"132-76-130",
"hex":"#844C82"
},
"4009":{
"code":"4009",
"name":"Pastel violet",
"rgb":"157-134-146",
"hex":"#9D8692"
},
"4010":{
"code":"4010",
"name":"Telemagenta",
"rgb":"188-64-119",
"hex":"#BC4077"
},
"4011":{
"code":"4011",
"name":"Pearl violet",
"rgb":"110-99-135",
"hex":"#6E6387"
},
"4012":{
"code":"4012",
"name":"Pearl blackberry",
"rgb":"107-107-127",
"hex":"#6B6B7F"
},
"5000":{
"code":"5000",
"name":"Violet blue",
"rgb":"49-79-111",
"hex":"#314F6F"
},
"5001":{
"code":"5001",
"name":"Green blue",
"rgb":"15-76-100",
"hex":"#0F4C64"
},
"5002":{
"code":"5002",
"name":"Ultramarine blue",
"rgb":"0-56-123",
"hex":"#00387B"
},
"5003":{
"code":"5003",
"name":"Sapphire blue",
"rgb":"31-56-85",
"hex":"#1F3855"
},
"5004":{
"code":"5004",
"name":"Black blue",
"rgb":"25-30-40",
"hex":"#191E28"
},
"5005":{
"code":"5005",
"name":"Signal blue",
"rgb":"0-83-135",
"hex":"#005387"
},
"5007":{
"code":"5007",
"name":"Brilliant blue",
"rgb":"55-107-140",
"hex":"#376B8C"
},
"5008":{
"code":"5008",
"name":"Grey blue",
"rgb":"43-58-68",
"hex":"#2B3A44"
},
"5009":{
"code":"5009",
"name":"Azure blue",
"rgb":"34-95-120",
"hex":"#225F78"
},
"5010":{
"code":"5010",
"name":"Gentian blue",
"rgb":"0-79-124",
"hex":"#004F7C"
},
"5011":{
"code":"5011",
"name":"Steel blue",
"rgb":"26-43-60",
"hex":"#1A2B3C"
},
"5012":{
"code":"5012",
"name":"Light blue",
"rgb":"0-137-182",
"hex":"#0089B6"
},
"5013":{
"code":"5013",
"name":"Cobalt blue",
"rgb":"25-49-83",
"hex":"#193153"
},
"5014":{
"code":"5014",
"name":"Pigeon blue",
"rgb":"99-125-150",
"hex":"#637D96"
},
"5015":{
"code":"5015",
"name":"Sky blue",
"rgb":"0-124-176",
"hex":"#007CB0"
},
"5017":{
"code":"5017",
"name":"Traffic blue",
"rgb":"0-91-140",
"hex":"#005B8C"
},
"5018":{
"code":"5018",
"name":"Turquoise blue",
"rgb":"5-139-140",
"hex":"#058B8C"
},
"5019":{
"code":"5019",
"name":"Capri blue",
"rgb":"0-94-131",
"hex":"#005E83"
},
"5020":{
"code":"5020",
"name":"Ocean blue",
"rgb":"0-65-75",
"hex":"#00414B"
},
"5021":{
"code":"5021",
"name":"Water blue",
"rgb":"0-117-119",
"hex":"#007577"
},
"5022":{
"code":"5022",
"name":"Night blue",
"rgb":"34-45-90",
"hex":"#222D5A"
},
"5023":{
"code":"5023",
"name":"Distant blue",
"rgb":"66-105-140",
"hex":"#42698C"
},
"5024":{
"code":"5024",
"name":"Pastel blue",
"rgb":"96-147-172",
"hex":"#6093AC"
},
"5025":{
"code":"5025",
"name":"Pearl gentian blue",
"rgb":"33-105-124",
"hex":"#21697C"
},
"5026":{
"code":"5026",
"name":"Pearl night blue",
"rgb":"15-48-82",
"hex":"#0F3052"
},
"6000":{
"code":"6000",
"name":"Patina green",
"rgb":"60-116-96",
"hex":"#3C7460"
},
"6001":{
"code":"6001",
"name":"Emerald green",
"rgb":"54-103-53",
"hex":"#366735"
},
"6002":{
"code":"6002",
"name":"Leaf green",
"rgb":"50-89-40",
"hex":"#325928"
},
"6003":{
"code":"6003",
"name":"Olive green",
"rgb":"80-83-60",
"hex":"#50533C"
},
"6004":{
"code":"6004",
"name":"Blue green",
"rgb":"2-68-66",
"hex":"#024442"
},
"6005":{
"code":"6005",
"name":"Moss green",
"rgb":"17-66-50",
"hex":"#114232"
},
"6006":{
"code":"6006",
"name":"Grey olive",
"rgb":"60-57-46",
"hex":"#3C392E"
},
"6007":{
"code":"6007",
"name":"Bottle green",
"rgb":"44-50-34",
"hex":"#2C3222"
},
"6008":{
"code":"6008",
"name":"Brown green",
"rgb":"55-52-42",
"hex":"#37342A"
},
"6009":{
"code":"6009",
"name":"Fir green",
"rgb":"39-53-42",
"hex":"#27352A"
},
"6010":{
"code":"6010",
"name":"Grass green",
"rgb":"77-111-57",
"hex":"#4D6F39"
},
"6011":{
"code":"6011",
"name":"Reseda green",
"rgb":"108-124-89",
"hex":"#6C7C59"
},
"6012":{
"code":"6012",
"name":"Black green",
"rgb":"48-61-58",
"hex":"#303D3A"
},
"6013":{
"code":"6013",
"name":"Reed green",
"rgb":"125-118-90",
"hex":"#7D765A"
},
"6014":{
"code":"6014",
"name":"Yellow olive",
"rgb":"71-65-53",
"hex":"#474135"
},
"6015":{
"code":"6015",
"name":"Black olive",
"rgb":"61-61-54",
"hex":"#3D3D36"
},
"6016":{
"code":"6016",
"name":"Turquoise green",
"rgb":"0-105-76",
"hex":"#00694C"
},
"6017":{
"code":"6017",
"name":"May green",
"rgb":"88-127-64",
"hex":"#587F40"
},
"6018":{
"code":"6018",
"name":"Yellow green",
"rgb":"97-153-59",
"hex":"#61993B"
},
"6019":{
"code":"6019",
"name":"Pastel green",
"rgb":"185-206-172",
"hex":"#B9CEAC"
},
"6020":{
"code":"6020",
"name":"Chrome green",
"rgb":"55-66-47",
"hex":"#37422F"
},
"6021":{
"code":"6021",
"name":"Pale green",
"rgb":"138-153-119",
"hex":"#8A9977"
},
"6022":{
"code":"6022",
"name":"Olive drab",
"rgb":"58-51-39",
"hex":"#3A3327"
},
"6024":{
"code":"6024",
"name":"Traffic green",
"rgb":"0-131-81",
"hex":"#008351"
},
"6025":{
"code":"6025",
"name":"Fern green",
"rgb":"94-110-59",
"hex":"#5E6E3B"
},
"6026":{
"code":"6026",
"name":"Opal green",
"rgb":"0-95-78",
"hex":"#005F4E"
},
"6027":{
"code":"6027",
"name":"Light green",
"rgb":"126-186-181",
"hex":"#7EBAB5"
},
"6028":{
"code":"6028",
"name":"Pine green",
"rgb":"49-84-66",
"hex":"#315442"
},
"6029":{
"code":"6029",
"name":"Mint green",
"rgb":"0-111-61",
"hex":"#006F3D"
},
"6032":{
"code":"6032",
"name":"Signal green",
"rgb":"35-127-82",
"hex":"#237F52"
},
"6033":{
"code":"6033",
"name":"Mint turquoise",
"rgb":"70-135-127",
"hex":"#46877F"
},
"6034":{
"code":"6034",
"name":"Pastel turquoise",
"rgb":"122-172-172",
"hex":"#7AACAC"
},
"6035":{
"code":"6035",
"name":"Pearl green",
"rgb":"25-77-37",
"hex":"#194D25"
},
"6036":{
"code":"6036",
"name":"Pearl opal green",
"rgb":"4-87-75",
"hex":"#04574B"
},
"6037":{
"code":"6037",
"name":"Pure green",
"rgb":"0-139-41",
"hex":"#008B29"
},
"6038":{
"code":"6038",
"name":"Luminous green",
"rgb":"0-181-26",
"hex":"#00B51A"
},
"7000":{
"code":"7000",
"name":"Squirrel grey",
"rgb":"122-136-142",
"hex":"#7A888E"
},
"7001":{
"code":"7001",
"name":"Silver grey",
"rgb":"140-150-157",
"hex":"#8C969D"
},
"7002":{
"code":"7002",
"name":"Olive grey",
"rgb":"129-120-99",
"hex":"#817863"
},
"7003":{
"code":"7003",
"name":"Moss grey",
"rgb":"122-118-105",
"hex":"#7A7669"
},
"7004":{
"code":"7004",
"name":"Signal grey",
"rgb":"155-155-155",
"hex":"#9B9B9B"
},
"7005":{
"code":"7005",
"name":"Mouse grey",
"rgb":"108-110-107",
"hex":"#6C6E6B"
},
"7006":{
"code":"7006",
"name":"Beige grey",
"rgb":"118-106-94",
"hex":"#766A5E"
},
"7008":{
"code":"7008",
"name":"Khaki grey",
"rgb":"116-94-61",
"hex":"#745E3D"
},
"7009":{
"code":"7009",
"name":"Green grey",
"rgb":"93-96-88",
"hex":"#5D6058"
},
"7010":{
"code":"7010",
"name":"Tarpaulin grey",
"rgb":"88-92-86",
"hex":"#585C56"
},
"7011":{
"code":"7011",
"name":"Iron grey",
"rgb":"82-89-93",
"hex":"#52595D"
},
"7012":{
"code":"7012",
"name":"Basalt grey",
"rgb":"87-93-94",
"hex":"#575D5E"
},
"7013":{
"code":"7013",
"name":"Brown grey",
"rgb":"87-80-68",
"hex":"#575044"
},
"7015":{
"code":"7015",
"name":"Slate grey",
"rgb":"79-83-88",
"hex":"#4F5358"
},
"7016":{
"code":"7016",
"name":"Anthracite grey",
"rgb":"56-62-66",
"hex":"#383E42"
},
"7021":{
"code":"7021",
"name":"Black grey",
"rgb":"47-50-52",
"hex":"#2F3234"
},
"7022":{
"code":"7022",
"name":"Umbra grey",
"rgb":"76-74-68",
"hex":"#4C4A44"
},
"7023":{
"code":"7023",
"name":"Concrete grey",
"rgb":"128-128-118",
"hex":"#808076"
},
"7024":{
"code":"7024",
"name":"Graphite grey",
"rgb":"69-73-78",
"hex":"#45494E"
},
"7026":{
"code":"7026",
"name":"Granite grey",
"rgb":"55-67-69",
"hex":"#374345"
},
"7030":{
"code":"7030",
"name":"Stone grey",
"rgb":"146-142-133",
"hex":"#928E85"
},
"7031":{
"code":"7031",
"name":"Blue grey",
"rgb":"91-104-109",
"hex":"#5B686D"
},
"7032":{
"code":"7032",
"name":"Pebble grey",
"rgb":"181-176-161",
"hex":"#B5B0A1"
},
"7033":{
"code":"7033",
"name":"Cement grey",
"rgb":"127-130-116",
"hex":"#7F8274"
},
"7034":{
"code":"7034",
"name":"Yellow grey",
"rgb":"146-136-111",
"hex":"#92886F"
},
"7035":{
"code":"7035",
"name":"Light grey",
"rgb":"197-199-196",
"hex":"#C5C7C4"
},
"7036":{
"code":"7036",
"name":"Platinum grey",
"rgb":"151-147-146",
"hex":"#979392"
},
"7037":{
"code":"7037",
"name":"Dusty grey",
"rgb":"122-123-122",
"hex":"#7A7B7A"
},
"7038":{
"code":"7038",
"name":"Agate grey",
"rgb":"176-176-169",
"hex":"#B0B0A9"
},
"7039":{
"code":"7039",
"name":"Quartz grey",
"rgb":"107-102-94",
"hex":"#6B665E"
},
"7040":{
"code":"7040",
"name":"Window grey",
"rgb":"152-158-161",
"hex":"#989EA1"
},
"7042":{
"code":"7042",
"name":"Traffic grey A",
"rgb":"142-146-145",
"hex":"#8E9291"
},
"7043":{
"code":"7043",
"name":"Traffic grey B",
"rgb":"79-82-80",
"hex":"#4F5250"
},
"7044":{
"code":"7044",
"name":"Silk grey",
"rgb":"183-179-168",
"hex":"#B7B3A8"
},
"7045":{
"code":"7045",
"name":"Telegrey 1",
"rgb":"141-146-149",
"hex":"#8D9295"
},
"7046":{
"code":"7046",
"name":"Telegrey 2",
"rgb":"127-134-138",
"hex":"#7F868A"
},
"7047":{
"code":"7047",
"name":"Telegrey 4",
"rgb":"200-200-199",
"hex":"#C8C8C7"
},
"7048":{
"code":"7048",
"name":"Pearl mouse grey",
"rgb":"129-123-115",
"hex":"#817B73"
},
"8000":{
"code":"8000",
"name":"Green brown",
"rgb":"137-105-62",
"hex":"#89693E"
},
"8001":{
"code":"8001",
"name":"Ochre brown",
"rgb":"157-98-43",
"hex":"#9D622B"
},
"8002":{
"code":"8002",
"name":"Signal brown",
"rgb":"121-77-62",
"hex":"#794D3E"
},
"8003":{
"code":"8003",
"name":"Clay brown",
"rgb":"126-75-38",
"hex":"#7E4B26"
},
"8004":{
"code":"8004",
"name":"Copper brown",
"rgb":"141-73-49",
"hex":"#8D4931"
},
"8007":{
"code":"8007",
"name":"Fawn brown",
"rgb":"112-69-42",
"hex":"#70452A"
},
"8008":{
"code":"8008",
"name":"Olive brown",
"rgb":"114-74-37",
"hex":"#724A25"
},
"8011":{
"code":"8011",
"name":"Nut brown",
"rgb":"90-56-38",
"hex":"#5A3826"
},
"8012":{
"code":"8012",
"name":"Red brown",
"rgb":"102-51-43",
"hex":"#66332B"
},
"8014":{
"code":"8014",
"name":"Sepia brown",
"rgb":"74-53-38",
"hex":"#4A3526"
},
"8015":{
"code":"8015",
"name":"Chestnut brown",
"rgb":"94-47-38",
"hex":"#5E2F26"
},
"8016":{
"code":"8016",
"name":"Mahogany brown",
"rgb":"76-43-32",
"hex":"#4C2B20"
},
"8017":{
"code":"8017",
"name":"Chocolate brown",
"rgb":"68-47-41",
"hex":"#442F29"
},
"8019":{
"code":"8019",
"name":"Grey brown",
"rgb":"61-54-53",
"hex":"#3D3635"
},
"8022":{
"code":"8022",
"name":"Black brown",
"rgb":"26-23-24",
"hex":"#1A1718"
},
"8023":{
"code":"8023",
"name":"Orange brown",
"rgb":"164-87-41",
"hex":"#A45729"
},
"8024":{
"code":"8024",
"name":"Beige brown",
"rgb":"121-80-56",
"hex":"#795038"
},
"8025":{
"code":"8025",
"name":"Pale brown",
"rgb":"117-88-71",
"hex":"#755847"
},
"8028":{
"code":"8028",
"name":"Terra brown",
"rgb":"81-58-42",
"hex":"#513A2A"
},
"8029":{
"code":"8029",
"name":"Pearl copper",
"rgb":"127-64-49",
"hex":"#7F4031"
},
"9001":{
"code":"9001",
"name":"Cream",
"rgb":"233-224-210",
"hex":"#E9E0D2"
},
"9002":{
"code":"9002",
"name":"Grey white",
"rgb":"215-213-203",
"hex":"#D7D5CB"
},
"9003":{
"code":"9003",
"name":"Signal white",
"rgb":"236-236-231",
"hex":"#ECECE7"
},
"9004":{
"code":"9004",
"name":"Signal black",
"rgb":"43-43-44",
"hex":"#2B2B2C"
},
"9005":{
"code":"9005",
"name":"Jet black",
"rgb":"14-14-16",
"hex":"#0E0E10"
},
"9006":{
"code":"9006",
"name":"White aluminium",
"rgb":"161-161-160",
"hex":"#A1A1A0"
},
"9007":{
"code":"9007",
"name":"Grey aluminium",
"rgb":"135-133-129",
"hex":"#878581"
},
"9010":{
"code":"9010",
"name":"Pure white",
"rgb":"241-236-225",
"hex":"#F1ECE1"
},
"9011":{
"code":"9011",
"name":"Graphite black",
"rgb":"39-41-43",
"hex":"#27292B"
},
"9016":{
"code":"9016",
"name":"Traffic white",
"rgb":"241-240-234",
"hex":"#F1F0EA"
},
"9017":{
"code":"9017",
"name":"Traffic black",
"rgb":"42-41-42",
"hex":"#2A292A"
},
"9018":{
"code":"9018",
"name":"Papyrus white",
"rgb":"200-203-196",
"hex":"#C8CBC4"
},
"9022":{
"code":"9022",
"name":"Pearl light grey",
"rgb":"133-133-131",
"hex":"#858583"
},
"9023":{
"code":"9023",
"name":"Pearl dark grey",
"rgb":"121-123-122",
"hex":"#797B7A"
}
};
// Function to convert RAL code to hex
function getHexFromRAL(ralCode) {
// Check if the RAL code exists in the JSON data
const colorData = ralColors[ralCode];
if (colorData) {
return colorData.hex; // Return the hex code
} else {
return null; // Return null if RAL code not found
}
}
return getHexFromRAL(p1);
Good morning
It‘s 3am🤣 and my remote pc @work is going through updates😅
I‘ll check the codes „tomorrow“ / later.
I‘ve found an other website which offers more color spaces also in JSON formatting.
Pantone
blob:https://hex-to-rgb.com/afed0c2b-cdd0-4556-b0cb-a069f760b403
Ral Classic
blob:https://hex-to-rgb.com/fd489aec-f539-4e44-af38-a53697799fcf
Back to your question
Yes
Thank you all so far
Alex
Looks like RAL Classic returns different Hex values compared to what rgb.to was returning, and Pantone is different altogether.
Just let me know if you need a different palette or need help incorporating it into the javascript. Should be pretty straightforward though.
Hi Jeff,
I tested a bit and was able to fetch the JSON you’ve found on github with @Eric_Penn JS code.
how would the JSON query look like?
${code=“1000”}.hex is wrong…
Yes I know, it’s only an approach caused by an input device such as a colorscanner.
“This conversion is a challenge because of the different approaches to color between monitors and printers. Because monitors use light to display color, they use additive colors—when you add them together, they produce white. Conversely, when you remove all monitor colors you produce black. Because printers use ink to display color, they use subtractive colors—when you remove colors, you produce white, and when you add all printer colors you produce black. As a result, monitors and printers have different color gamuts. Although they share many of the same colors, there are some colors a monitor can display that a printer can’t print and some colors a printer can print that a monitor can’t display.”
I’ve found a better Pantone JSON palette.
How can I adapt your Javascript solution to this new JSON layout?
I decided to store your code in a template column and trigger it when the colorsystem matches RAL with an if then else. the resulting hexcode will render an image.
Thank’s
Alex
I’ve found a way:
function findHexByCode(Code) {
const colors = [
{
“Code”:“Process Yellow”,
“C”:“0”,
“M”:“0”,
“Y”:“100”,
“K”:“0”,
“R”:“255”,
“G”:“255”,
“B”:“0”,
“Hex”:“#FFFF00”
},
…
{
“Code”:“100”,
“C”:“0”,
“M”:“0”,
“Y”:“51”,
“K”:“0”,
“R”:“255”,
“G”:“255”,
“B”:“125”,
“Hex”:“#FFFF7D”
}
];
const color = colors.find(item => item.Code === Code);
return color ? color.Hex : null;
}const hexValue = findHexByCode(p1);
return hexValue;
But I’m burning to know how to read from the fetched json.
Thank’s
Alex
Hey again,
woohoo fetching from external Website is working now for me.
What I did…
const response = await fetch(p1);
const data = await response.json();
const jsonData = JSON.stringify(data);
return jsonData;
Now hopefuly the last question…
what is faster and uses less resources, Jeffs or Erics method?
Thank’s
Alex