Add Colour to Cards in Kanban View

Hello there!

Is it possible to add colours to cards in the Kanban View? For example, we have added a few Leads in CRM and their status can change between Lead, Open, Replied, Opportunity, Quotation etc. Then we created a new Kanban board and changed to the Kanban View. The interface looks quite good but it is also bland with no colours. I have found a way to change the colour of the columns by clicking on the three dots for each status and choosing from limited colour choices.

So far this is good but is there a way to change the colour of the cards too? That is to display the Lead cards in different colour choices for better visibility and focus.

Thank you.


If the doctype which your kanban is based on contains a field called “color” and a image field (attach image), (and uses it as image for your doctype) …

then … magic comes:

Hope this helps.


I use tags.


Wow. That’s super nice !!!

Even you can easy automate it with a script, updating the color, the image, or the tag with after other fields content change (imagine select or link fieds …).

@TurkerTunali : how to add color to tags?

Pls guide


I think tag color is based on tag text content (with some voodoo techniques) :face_with_hand_over_mouth:, assigned by get_palette js function …

frappe.palette = [
	["--orange-avatar-bg", "--orange-avatar-color"],
	["--pink-avatar-bg", "--pink-avatar-color"],
	["--blue-avatar-bg", "--blue-avatar-color"],
	["--green-avatar-bg", "--green-avatar-color"],
	["--dark-green-avatar-bg", "--dark-green-avatar-color"],
	["--red-avatar-bg", "--red-avatar-color"],
	["--yellow-avatar-bg", "--yellow-avatar-color"],
	["--purple-avatar-bg", "--purple-avatar-color"],
	["--gray-avatar-bg", "--gray-avatar-color0"],

frappe.get_palette = function (txt) {
	var idx = cint((parseInt(md5(txt).substr(4, 2), 16) + 1) / 5.33);
	return frappe.palette[idx % 8];

So … there is not a “human” way to assign a chosen color to tags.

1 Like

One can customize the Kanban Board Column doctype to include additional colors. I’ve done this to add the standard Frappe colors that are missing (purple, I don’t remember the others).

1 Like

I did nothing special. Just added tags.

thank you :slight_smile:

1 Like