Category scoping parent category value

I'm working on a design that needs a colour for each category in a blog post, so I've defined a content region to

<perch:category id="catColor" type="text" label="Colour" suppress="true" replace="#|" format="LC" help="The hexidecimal value of the category's colour" />

So I'm setting that colour as the background-colour on the blog listing items:

<li class="blog-list-item"<perch:categories id="categories" set="blog"><perch:if exists="catColor"> style="background-color: #<perch:category id="catColor" type="text" replace="#|" format="LC" />" <perch:else /></perch:if></perch:categories>>

So far it all works nicely.

I'm outputting the categories of each blog post in the listing too and this is where my issue lies. The background of the blog list item is, say, blue. And there are buttons linking to the categories that each post belongs to; these buttons are white and the text should be the same as the background. So blue.

<a href="/blog/category/<perch:category id="catSlug" type="slug" />" class="p-category category-link"<perch:if exists="catColor"> style="color: #<perch:category id="catColor" type="text" replace="#|" format="LC" />"<perch:else /></perch:if>>

The problem comes when there's more than one category. With that code it outputs the blue background, the first category button text in blue and the second category button text in, say pink. The designer I'm working with would like to use the same colour text on the button as the list item background. I know there's a question in there of "why would it take the colour of one category over the other?" and we're planning to 'get around this' to a certain extent by generating the category links in random order and using the colour of the first one that's output. Not perfect, but should work.

Anyway, here's what I'm running up against: I can't scope the category output of the button text to the parent element's category… I was hoping I could use something like:

<li class="blog-list-item"<perch:categories id="categories" set="blog"><perch:if exists="catColor"> style="background-color: #<perch:category id="catColor" type="text" replace="#|" format="LC" />" <perch:else /></perch:if></perch:categories>>
  <perch:categories id="categories" set="blog" scope-parent="true">
    <perch:before>
      <ul class="category-list">
    </perch:before>
        <li>
          <a href="/blog/category/<perch:category id="catSlug" type="slug" />" class="p-category category-link" style="color: #<perch:category id="parent.catColor" type="text" replace="#|" format="LC" />">

But it doesn't work. Is it something to do with the way I've written the code? Maybe just a typo or somethign? Or is is something that's just not possible. I've done it before but going from a category into its parent where the id of the item I'm calling from the parent isn't itself in a category and it works ok.

I hope that makes sense…

Thanks,

Martin.

P.S. Here're my diagnostics:

Perch Runway: 2.8.30, PHP: 5.6.10, MySQL: mysqlnd 5.0.11-dev - 20120503 - $Id: 3c688b6bbc30d36af3ac34fdd4b7b5b787fe5555 $, with PDO
Server OS: Darwin, apache2handler
Installed apps: content (2.8.30), assets (2.8.30), categories (2.8.30), perch_blog (5.0), perch_forms (1.8.3), collection_2 (2.8.30), collection_1 (2.8.30)
App runtimes: <?php $apps_list = array( 'content', 'categories', 'perch_blog', 'perch_forms', );
PERCH_LOGINPATH: /cms
PERCH_PATH: /Users/TemperTemper/Sites/Gospelware/gospelware.co.uk/web/cms
PERCH_CORE: /Users/TemperTemper/Sites/Gospelware/gospelware.co.uk/web/cms/core
PERCH_RESFILEPATH: /Users/TemperTemper/Sites/Gospelware/gospelware.co.uk/web/cms/resources
Image manipulation: GD
PHP limits: Max upload 32M, Max POST 32M, Memory: 128M, Total max file upload: 32M
F1: 2edba60ed1f613d6dd804feb202456a2
Resource folder writeable: Yes
HTTP_HOST: gospelware.local
DOCUMENT_ROOT: /Users/TemperTemper/Sites/Gospelware/gospelware.co.uk/web
REQUEST_URI: /cms/core/settings/diagnostics/
SCRIPT_NAME: /cms/core/settings/diagnostics/index.php