Color codes in API

Can’t find a list of possible color codes in the API…

It would be nice to have this information (something like ‘yellow-green’, ‘dark-orange’, etc.) in the documentation.

Thanks!

That is exactly why I created GitHub - siebmanb/asanacolors: Asana API color mapping :slight_smile:
GitHub & BitBucket HTML Preview
Please note that the colors might have changed since I created this…

Bastien
Asana consultant, author and developer

1 Like

Nice job!
I hope this page will be added to the official documentation.

@Bastien_Siebman, I think that page is perhaps from before the redesign, because some of the colors look different to me (look at our modern definition of “dark brown” in our projects view, which I would argue is strictly “yellow” :grinning:)

We do have an older action item to update these, but we’re kind of indecided on whether we should attempt to deprecate what I’ll talk about below or just go ahead and document them.

The trick is that projects existed and had to be backwards-compatible, so we have special-case code for those. Nobody thought or noticed at the time that custom fields would also need to use this translator to stay consistent, so the underlying names poke through there.

So we’re at a point where the same colors are called different things depending on where you are in our API :cry: but such is probably the case with our API until some future version bump when we can fix it.

The community seems like a fine place to do this, however, because I can write this long expansive history of the colors in Asana and it doesn’t feel out of place :slight_smile: Besides, it’s Pride month and we’re located in San Francisco, so let’s get some rainbows in here.

In any case, here are screenshots of the color names in the API and the associated Asana colors (note that the project list is part of an A/B test that’s currently happening, so your project list in Asana might look a bit different, but the colors should be the same.

4 Likes

@Matt_Bramlage I would be more than happy to update the page if you give me the heads up. Or simply redirect to this post! What do you think?

@Bastien_Siebman Either one is fine, whichever you prefer! :slight_smile:

I added a link back to this thread :+1:

1 Like

I can confirm the list given by Matt is incomplete, one of my user had a tag with a dark-blue color that does not exist in the new referential.

My new list is Matt’s list + dark-blue + dark-warm-gray + light-yellow

Hex codes from @Matt_Bramlage’s post, just to save anyone else the hassle of extracting color codes from a .png

dark-red: #E53B52;
dark-orange: #F96237;
light-orange: #FA9A27;
dark-brown: #ECC42C;
light-green: #A5CF3F;
dark-green: #66D273;
light-teal: #42C4AB;
dark-teal: #32A9E8;
light-blue: #4886DD;
dark-purple: #7B6FED;
light-purple: #A962E0;
light-pink: #E163E1;
dark-pink: #E84F9C;
light-red: #FA91AE;
light-warm-gray: #8DA3A6;

2 Likes

Thanks so much

The colors have all changed from these. This is a serious PITA.

yellow-orange
yellow-green
blue-green
red
orange
etc.

Why not pick CSS colors?

here’s an extension of the CSS in an answer above with some more new colors - unfortunately not complete.

/* Asana Colors */

.red {
background-color: #e9445a; color: rgb(244, 182, 219);
}
.orange {
background-color:#fd612c; color: black;
}
.yellow-orange {
background-color:#fd9a00; color: black;
}
.yellow {
background-color:#eec300; color: black;
}
.yellow-green {
background-color:#a4cf30; color: black;
}
.green {
background-color:#62d26f; color: black;
}
.blue-green {
background-color:#37c5ab; color: black;
}
.dark-pink {
background-color: rgb(177, 63, 148); color: rgb(244, 182, 219);
}
.dark-green {
background-color: rgb(66, 126, 83); color: rgb(183, 208, 134);
}
.dark-blue {
background-color: rgb(60, 104, 187); color: rgb(182, 195, 219);
}
.dark-red {
background-color: rgb(199, 63, 39); color: rgb(239, 189, 189);
}
.dark-teal {
background-color: rgb(0, 142, 170); color: rgb(170, 209, 235);
}
.dark-brown {
background-color: rgb(144, 100, 97); color: rgb(255, 237, 164);
}
.dark-orange {
background-color: rgb(225, 112, 0); color: rgb(250, 205, 170);
}
.dark-purple {
background-color: rgb(103, 67, 179); color: rgb(215, 190, 228);
}
.dark-warm-gray {
background-color: rgb(73, 60, 61); color: rgb(206, 197, 198);
}
.light-pink {
background-color: rgb(244, 182, 219); color: rgb(177, 63, 148);
}
.light-green {
background-color: rgb(183, 208, 134); color: rgb(66, 126, 83);
}
.light-blue {
background-color: rgb(182, 195, 219); color: rgb(60, 104, 187);
}
.light-red {
background-color: rgb(239, 189, 189); color: rgb(199, 63, 39);
}
.light-teal {
background-color: rgb(170, 209, 235); color: rgb(0, 142, 170);
}
.light-yellow {
background-color: rgb(255, 237, 164); color: rgb(144, 100, 97);
}
.light-orange {
background-color: rgb(250, 205, 170); color: rgb(225, 112, 0);
}
.light-purple {
background-color: rgb(215, 190, 228); color: rgb(103, 67, 179);
}
.light-warm-gray {
background-color: rgb(206, 197, 198); color: rgb(73, 60, 61);
}

here are the current custom field colors. for now anyways. Hopefully this will save someone some pain.

.red {
background-color: #e9445a; color: white;
}
.orange {
background-color:#fd612c; color: black;
}
.yellow-orange {
background-color:#fd9a00; color: black;
}
.yellow {
background-color:#eec300; color: black;
}
.yellow-green {
background-color:#a4cf30; color: black;
}
.green {
background-color:#62d26f; color: black;
}
.blue-green {
background-color:#37c5ab; color: black;
}
.aqua {
background-color:#20aaea; color: black;
}
.blue {
background-color:#4186e0; color: white;
}
.indigo {
background-color:#7a6ff0; color: black;
}
.purple {
background-color:#aa62e3; color: black;
}
.magenta {
background-color:#e56ce5; color: black;
}
.hot-pink {
background-color:#eb59a3; color: black;
}
.pink {
background-color:#fc91ad; color: black;
}
.cool-gray {
background-color:#8da3a6; color: black;
}
.none {
background-color:#ffffff; color: black;
}

2 Likes

Thanks!

1 Like

It would be nice if the API documentation has a full list of available colors. I’m looking to set project colors based on certain criteria, but would like to work from an official list somewhere.

1 Like

I tried adding purple to the project color data, but I got this response:

message: color: Must be one of {dark-blue, dark-brown, dark-green, dark-orange, dark-pink, dark-purple, dark-red, dark-teal, dark-warm-gray, light-blue, light-green, light-orange, light-pink, light-purple, light-red, light-teal, light-warm-gray, light-yellow, none}, not: purple

So at least I know what colors I can use now.

2 Likes

Thanks for posting the list!

Welcome to February 2023! The color lists posted by the valiant heroes above are now outdated. “Invalid enum option color: dark-brown” Is there a way to get all the possible asana colors via api now?

Here is the list of new color codes as of Feb 2023:

color_options = ['red', 'orange', 'yellow', 'yellow-orange', 'yellow-green', 'green', 'blue-green', 'aqua', 'blue', 'indigo', 'purple', 'magenta', 'hot-pink', 'pink', 'cool-gray', 'none']

Enjoy!

3 Likes

I just created a new task with 16 new tags, with the 16 possible colors that are available on screen today (2023-02-09)

(edit, these informations are for tags, not for projects…)

Then, I called the API to get the list of these 16 new tags colors.

These are:

(null), dark-red, dark-orange, light-orange, dark-brown, light-green, dark-green, light-teal, dark-teal, light-blue, dark-purple, light-purple, light-pink, dark-pink, light-red, light-warm-gray.

These colors are, for NEW tags.

But, it’s possible that, if you query your old data, you will get values that are no longer available for new tags.

Example: in my workspace, I get colors named “none”, instead of null.

So, I think you can still get these colors in some old tasks:
light-yellow, dark-blue, dark-warm-gray
I am not sure that they changed the old data to make them fit with the new colors.

Also, in their UI, the name of the colors is not the same as in the API.

Example, I just looked at 3 samples:
api VS css (ui)
dark-red VS Red
light-pink VS Magenta
etc.

Then, I tried to create a new tag with an invalid color, to see if the error message has changed since @FreshyJon tried it.
I get that list of available colors:
light-orange, dark-orange, dark-red, light-pink, dark-pink, light-green, dark-green, light-warm-gray, dark-brown, light-teal, dark-teal, dark-purple, light-purple, light-red, light-blue
PLUS
dark-blue, dark-warm-gray, light-yellow, none

I was curious about dark-blue, dark-warm-gray, and light-yellow, because we can’t use them in the UI.

So, I created new tags, using the API, with these 3 colors.
The API does not returns error, but it changes the color.
dark-blue becomes light-blue
dark-warm-gray becomes light-warm-gray
light-yellow becomes dark-brown

So, these last 3 colors are still accepted by the API, but be warned that they are changed to other new colors.

2 Likes