IBM Apptio

IBM Apptio

 View Only
  • 1.  [+] STUMPER: Exact color match in report

    Posted Thu March 26, 2015 04:23 PM

    STUMPER: Pre-solved Q&A to sharpen your TBM and Apptio skills.

    Solution posted in 7 days if nobody submits a correct answer.

    See title for rating: [+] Easy   [++] Moderate   [+++] Challenging

     

     

    I started a side business as a tour bus operator.

     

    My marketing team developed this graphic for use in website banner ads, company letterhead, and so forth:

    bus ride.jpg

    Image courtesy of Freepik

     

    I want my bar chart colors and assorted HTML component colors in my Apptio reports to use the exact same colors I see in the image above: The red and yellow of the bus, the light and dark green of the scenery, etc.

     

    My marketing team went on vacation this week, so they can't help me with this.

    Is there some way for me to transfer these exact colors into my Apptio reports?










    #CostingStandard(CT-Foundation)


  • 2.  Re: [+] STUMPER: Exact color match in report

    Posted Thu March 26, 2015 06:00 PM

    Hello,

     

    One thing you can do is right click on the picture and select "Inspect Element" and view the backing html:

     

     

    Off to the right you will see the styles or CSS and there will be a list of your colors, then you can use the hexadecimal colors in ColorSpec within Apptio.


    #CostingStandard(CT-Foundation)


  • 3.  Re: [+] STUMPER: Exact color match in report

    Posted Fri March 27, 2015 08:41 AM

    Interesting approach - I tried your method and it taught me about using the Inspect element feature. I had fun directly editing a web page's CSS and HTML to see how it changes the page. This turns out to be a nice way to try out different code and learn some HTML/CSS along the way.

     

    But it didn't reveal the exact colors used in my bus image. The only hexadecimal color codes I found were ones related to the CSS theming of the website (e.g. menubars, default font class colors).

     

    Other ideas?


    #CostingStandard(CT-Foundation)


  • 4.  Re: [+] STUMPER: Exact color match in report
    Best Answer

    Posted Mon March 30, 2015 12:17 PM

    I have maybe a partial solution, so I'll be interested to hear what others say.

     

    To get the Hex codes for your bus image, you could just dump the image into a graphics edit like Paint or GIMP and use the eyedropper to get the codes.  You'd have to be careful of what pixel you grab, though.  If your image colors start to blend or have shadows, etc., you might not get the right color.  Not sure of a way to do this in Apptio...

     

    To get the colors into Apptio, I would think you can go to your Edit Project Settings and update your Color Specs.  This would get your colors onto charts.  However, I'm not sure if you can use custom colors... Help seems to indicate that you can only use a certain set of available colors, so I'd be interested to know if you can use other colors that aren't defined here.


    #CostingStandard(CT-Foundation)


  • 5.  Re: [+] STUMPER: Exact color match in report

    Posted Mon March 30, 2015 12:57 PM

    I followed your advice and it worked.

     

    Here is one of my original reports:

    color_old.png

     

    ...and here is its new color scheme:

    color_new.png

     

     

    I noticed Paint (the free drawing program supplied with Windows) has an eyedropper tool to detect exact colors, but its color information dialog does not provide hexadecimal RRGGBB color codes:

    edit_colors.png

    ...so I searched for RGB to hex color on the web and found plenty of free color converter tools.

     

    If I were going to be matching a lot of colors, I'd probably switch to Paint.NET (free), GIMP (free), or other drawing software which shows hex color codes in its color information dialog, to speed up this process.

     

    Apptio allows hex color codes in its Color Spec field (for a report component or an entire project) if preceded with '#' character.

     

    Example:

    Color Spec: OpEx YTD=#FC2043;CapEx YTD=#FDCB5A
    

    #CostingStandard(CT-Foundation)