Convert Hex colour format to actual colour

[Collector8992 (David Whatfor)]

First apologies if in wrong category.

I’m working on a picture element for BamBu Labs AMS 2 Pro. I know there are prebuilt elements which I have tried but I want to create my own. I’ve created one for the Bambu Labs X1 Carbon using a photo and then jus using the HACS intergration to put the elements wanted. But I’m struggling creating a picture element on the AMS 2 Pro because the colour is only presented in Hex where as I want a more descriptive/friendly format. Is there a way I can convert the hex format colour to a predifined name i.e. like a filter, helper, etc? (detailed instructions if possible as a noob when it comes to things like templating)

Below is the picture element I created for the X1C if anyone is interested. It is quite busy but has all the info I need in a small footprint.

Below is the HACS intergration that I found for an AMS and along the lines of what I’d be looking at for a picture elements card but with extra info like drying times, how much filament left, etc.

[Ildar_Gabdullin]

In general, there are thousands of colors. There are no names for EVERY color, just for some of them.

[Collector8992 (David Whatfor)]

As it is filaments I can create a filter or something, I’m not going all colours lol. I guess a basic form would be just see a hex and convert it to a friendly name in a manual filter. It is going to be a max of 10-20 colours. Something like if ##0000FF = Black then use that as an element in the picture.

[LiQuid_cOOled]

You can covert RGB to HEX and vice versa. If you are only going to have 20 colors, then you could use a template sensor where the specific hex value = your designated color.

HEX to RGB

{% set hx = '#ff6347' %}
{% set r = hx [1:3] | int(base=16) %}
{% set g = hx [3:5] | int(base=16) %}
{% set b = hx [5:7] | int(base=16) %}
rgb({{r}},{{g}},{{b}})

RGB to HEX

{{"#%02x%02x%02x" % (255,71,86) }}

[Ildar_Gabdullin]

Then you can create a jinja macro for most popular colors like red, green, blue.

[Troon]

Here’s a solution using the standard 140 CSS colour names with the JSON dict taken straight from the Code Golf game. It finds the closest defined colour in 3D RGB space to the hex code you supply.

Put this in custom_templates/cols.jinja:

{% macro hex2name(hex,name_only=True) -%}
{% set cols = {
    "IndianRed":            "#cd5c5c", "LightCoral":      "#f08080",
    "Salmon":               "#fa8072", "DarkSalmon":      "#e9967a",
    "LightSalmon":          "#ffa07a", "Red":             "#ff0000",
    "Crimson":              "#dc143c", "FireBrick":       "#b22222",
    "DarkRed":              "#8b0000", "Pink":            "#ffc0cb",
    "LightPink":            "#ffb6c1", "HotPink":         "#ff69b4",
    "DeepPink":             "#ff1493", "MediumVioletRed": "#c71585",
    "PaleVioletRed":        "#db7093", "Coral":           "#ff7f50",
    "Tomato":               "#ff6347", "OrangeRed":       "#ff4500",
    "DarkOrange":           "#ff8c00", "Orange":          "#ffa500",
    "Gold":                 "#ffd700", "Yellow":          "#ffff00",
    "LightYellow":          "#ffffe0", "LemonChiffon":    "#fffacd",
    "LightGoldenRodYellow": "#fafad2", "PapayaWhip":      "#ffefd5",
    "Moccasin":             "#ffe4b5", "PeachPuff":       "#ffdab9",
    "PaleGoldenRod":        "#eee8aa", "Khaki":           "#f0e68c",
    "DarkKhaki":            "#bdb76b", "Lavender":        "#e6e6fa",
    "Thistle":              "#d8bfd8", "Plum":            "#dda0dd",
    "Violet":               "#ee82ee", "Orchid":          "#da70d6",
    "Fuchsia":              "#ff00ff", "Magenta":         "#ff00ff",
    "MediumOrchid":         "#ba55d3", "MediumPurple":    "#9370db",
    "BlueViolet":           "#8a2be2", "DarkViolet":      "#9400d3",
    "DarkOrchid":           "#9932cc", "DarkMagenta":     "#8b008b",
    "Purple":               "#800080", "Indigo":          "#4b0082",
    "DarkSlateBlue":        "#483d8b", "SlateBlue":       "#6a5acd",
    "MediumSlateBlue":      "#7b68ee", "RebeccaPurple":   "#663399",
    "GreenYellow":          "#adff2f", "Chartreuse":      "#7fff00",
    "LawnGreen":            "#7cfc00", "Lime":            "#00ff00",
    "LimeGreen":            "#32cd32", "PaleGreen":       "#98fb98",
    "LightGreen":           "#90ee90", "SpringGreen":     "#00ff7f",
    "MediumSpringGreen":    "#00fa9a", "MediumSeaGreen":  "#3cb371",
    "SeaGreen":             "#2e8b57", "ForestGreen":     "#228b22",
    "Green":                "#008000", "DarkGreen":       "#006400",
    "YellowGreen":          "#9acd32", "OliveDrab":       "#6b8e23",
    "Olive":                "#808000", "DarkOliveGreen":  "#556b2f",
    "MediumAquamarine":     "#66cdaa", "DarkSeaGreen":    "#8fbc8f",
    "LightSeaGreen":        "#20b2aa", "DarkCyan":        "#008b8b",
    "Teal":                 "#008080", "Aqua":            "#00ffff",
    "Cyan":                 "#00ffff", "LightCyan":       "#e0ffff",
    "PaleTurquoise":        "#afeeee", "Aquamarine":      "#7fffd4",
    "Turquoise":            "#40e0d0", "MediumTurquoise": "#48d1cc",
    "DarkTurquoise":        "#00ced1", "CadetBlue":       "#5f9ea0",
    "SteelBlue":            "#4682b4", "LightSteelBlue":  "#b0c4de",
    "PowderBlue":           "#b0e0e6", "LightBlue":       "#add8e6",
    "SkyBlue":              "#87ceeb", "LightSkyBlue":    "#87cefa",
    "DeepSkyBlue":          "#00bfff", "DodgerBlue":      "#1e90ff",
    "CornflowerBlue":       "#6495ed", "RoyalBlue":       "#4169e1",
    "Blue":                 "#0000ff", "MediumBlue":      "#0000cd",
    "DarkBlue":             "#00008b", "Navy":            "#000080",
    "MidnightBlue":         "#191970", "Cornsilk":        "#fff8dc",
    "BlanchedAlmond":       "#ffebcd", "Bisque":          "#ffe4c4",
    "NavajoWhite":          "#ffdead", "Wheat":           "#f5deb3",
    "Burlywood":            "#deb887", "Tan":             "#d2b48c",
    "RosyBrown":            "#bc8f8f", "SandyBrown":      "#f4a460",
    "GoldenRod":            "#daa520", "DarkGoldenRod":   "#b8860b",
    "Peru":                 "#cd853f", "Chocolate":       "#d2691e",
    "SaddleBrown":          "#8b4513", "Sienna":          "#a0522d",
    "Brown":                "#a52a2a", "Maroon":          "#800000",
    "White":                "#ffffff", "Snow":            "#fffafa",
    "Honeydew":             "#f0fff0", "MintCream":       "#f5fffa",
    "Azure":                "#f0ffff", "AliceBlue":       "#f0f8ff",
    "GhostWhite":           "#f8f8ff", "WhiteSmoke":      "#f5f5f5",
    "SeaShell":             "#fff5ee", "Beige":           "#f5f5dc",
    "OldLace":              "#fdf5e6", "FloralWhite":     "#fffaf0",
    "Ivory":                "#fffff0", "AntiqueWhite":    "#faebd7",
    "Linen":                "#faf0e6", "LavenderBlush":   "#fff0f5",
    "MistyRose":            "#ffe4e1", "Gainsboro":       "#dcdcdc",
    "LightGray":            "#d3d3d3", "LightGrey":       "#d3d3d3",
    "Silver":               "#c0c0c0", "DarkGray":        "#a9a9a9",
    "DarkGrey":             "#a9a9a9", "Gray":            "#808080",
    "Grey":                 "#808080", "DimGray":         "#696969",
    "DimGrey":              "#696969", "LightSlateGray":  "#778899",
    "LightSlateGrey":       "#778899", "SlateGray":       "#708090",
    "SlateGrey":            "#708090", "DarkSlateGray":   "#2f4f4f",
    "DarkSlateGrey":        "#2f4f4f", "Black":           "#000000"
} -%}
{% set ns = namespace(distance=0,name="") -%}
{% set hex = hex|lower|select('in','0123456789abcdef')|join -%}
{% if hex|length == 3 -%}
{% set hex = hex[0]*2~hex[1]*2~hex[2]*2 -%}
{% endif -%}
{% if hex|length != 6 -%}
{% else -%}
{% set rgb = {'r':hex[0:2]|int(base=16),'g':hex[2:4]|int(base=16),'b':hex[4:6]|int(base=16)} -%}
{% for c in cols -%}
{% set crgb = {'r':cols[c][1:3]|int(base=16),'g':cols[c][3:5]|int(base=16),'b':cols[c][5:7]|int(base=16)} -%}
{% set cdist = sqrt((rgb['r']-crgb['r'])**2 + (rgb['g']-crgb['g'])**2 + (rgb['b']-crgb['b'])**2) -%}
{% if ns.name == "" or ns.distance > cdist -%}
{% set ns.name, ns.distance = c, cdist -%}
{% endif -%}
{% endfor -%}
{% if name_only -%}
{{ ns.name -}}
{% else -%}
{{ {"name": ns.name, "distance": ns.distance}|to_json -}}
{% endif -%}
{% endif -%}
{% endmacro -%}

Reload custom templates (docs), then call it like this:

{% from 'cols.jinja' import hex2name %}
Just the name: {{ hex2name('fe6247') }}
Distance: {{ (hex2name('fe6247',false)|from_json)['distance'] }}

It handles: a leading octothorp (#) by ignoring anything that’s not a hex digit; upper / lower case hex digits A–F; and it supports 3-digit hex codes.

If you want to use a different set of colours, just change the cols dictionary to the set you want to use, or just delete the more “esoteric” ones. You could even pinch the 273 Crayola colours from here!

After a lot of computation (comparing all 16,777,216 6-digit codes against the list of 140 colours), the hex code furthest from any defined colour in the list above is #40012f, which is equidistant between Black #000000, MidnightBlue #191970 and Maroon #800000. It’s the centre of this image and my macro identifies it as Maroon:

[BalooDK]

Thanks. This is great !!

Now I just need to work a little on the layout