All the colors!

ConnetIq folks. Free free to steal this or it's idea as a sample in the SDK. The 920 and f3, are only 16 color and it's not an issue, but the vivoactive and soon to be available Epix are 64 color. It might be easier than having "COLOR_*" names for the missing 48! :)

With only a small number of "COLOR_*" colors defined, and 64 colors on the vivoactive, I wanted to see ALL the colors looked like on the vivoactive. So here are the two source files I used. The second contains the smarts as to size of increment, and timer speed, etc. It's an app, and when it's started, it cycles trough all the colors each filling the top half of the screen, and shows you the hex version of the color, so you can use it in your code. The "start" button is used to start/stop the changes, so you can write down a color you like.

forgive any typos in words or styles!

ColorPaleteApp.mc
----------------------

using Toybox.Application as App;
using Toybox.WatchUi as Ui;

class ColorPaleteApp extends App.AppBase {

//! onStart() is called on application start up
function onStart() {
}

//! onStop() is called when your application is exiting
function onStop() {
}

//! Return the initial view of your application here
function getInitialView() {
return [ new ColorPaleteView(), new ColorPaleteDelegate() ];
}
}



ColorPaleteView.mc
-----------------------

using Toybox.WatchUi as Ui;
using Toybox.Graphics as Gfx;
using Toybox.System as Sys;

var running=true;

class ColorPaleteView extends Ui.View {

var timer;
var cColor=0;
var cColorNum=0;

//you can set colors start here
var r=0;
var g=0;
var b=0;

function initialize()
{
timer = new Timer.Timer();

//set timer value here

timer.start( method(:onTimer), 750, true );
Sys.println((Gfx.COLOR_YELLOW).format("%06X"));
}

function onTimer()
{
//change to the next color.
if(running)
{
b=b+3;
if(b>15)
{
b=0;
g=g+3;
if(g>15)
{
g=0;
r=r+3;
if(r>15)
{
r=0;
g=0;
b=0;
}
}
}
}
Ui.requestUpdate();
}

//! Load your resources here
function onLayout(dc) {
//setLayout(Rez.Layouts.MainLayout(dc));
}

//! Restore the state of the app and prepare the view to be shown
function onShow() {
}

//! Update the view
function onUpdate(dc) {
dc.setColor(Gfx.COLOR_BLACK, Gfx.COLOR_BLACK);
dc.clear();

dc.setColor(Gfx.COLOR_WHITE, Gfx.COLOR_TRANSPARENT);

cColor="0x"+r.format("%X")+r.format("%X")+g.format("%X")+g.format("%X")+b.format("%X")+b.format("%X");
cColorNum=(r*16+r)*(256*256)+(g*16+g)*256+(b*16+b);

dc.drawText( dc.getWidth() / 2, dc.getHeight()-65, Gfx.FONT_SMALL,"Start/enter to pause/continue!",Gfx.TEXT_JUSTIFY_CENTER);
dc.drawText( dc.getWidth() / 2, dc.getHeight()-40, Gfx.FONT_MEDIUM,"Color=0x"+cColorNum.format("%06X"),Gfx.TEXT_JUSTIFY_CENTER);

dc.setColor(Gfx.COLOR_WHITE,Gfx.COLOR_TRANSPARENT);
dc.drawRectangle(5, 5, dc.getWidth()-10, dc.getHeight()/2);
dc.setColor(cColorNum,Gfx.COLOR_TRANSPARENT);
dc.fillRectangle(6, 6, dc.getWidth()-12, dc.getHeight()/2-2);
}

//! Called when this View is removed from the screen. Save the
//! state of your app here.
function onHide() {
}

}

class ColorPaleteDelegate extends Ui.BehaviorDelegate {

function onMenuItem(item) {
}

function onKey(evt) {

if(evt.getKey()==Ui.KEY_ENTER)
{
running=!running;
return true;
}
else
{
return false;
}
}
}
  • How would this look / work for RGB565?

  • Thanks. This produces 216 colors. I'm not sure how many of those are valid for 64 color devices? There used to be a spreadsheet on an old post, but it's not available anymore.

    I used it to produce this html to view the colors.

    <html>
      <table>
        <tr>
          <td style="background-color: 000000">     </td>
          <td>000000</td>
        </tr>
        <tr>
          <td style="background-color: 000033">     </td>
          <td>000033</td>
        </tr>
        <tr>
          <td style="background-color: 000066">     </td>
          <td>000066</td>
        </tr>
        <tr>
          <td style="background-color: 000099">     </td>
          <td>000099</td>
        </tr>
        <tr>
          <td style="background-color: 0000CC">     </td>
          <td>0000CC</td>
        </tr>
        <tr>
          <td style="background-color: 0000FF">     </td>
          <td>0000FF</td>
        </tr>
        <tr>
          <td style="background-color: 003300">     </td>
          <td>003300</td>
        </tr>
        <tr>
          <td style="background-color: 003333">     </td>
          <td>003333</td>
        </tr>
        <tr>
          <td style="background-color: 003366">     </td>
          <td>003366</td>
        </tr>
        <tr>
          <td style="background-color: 003399">     </td>
          <td>003399</td>
        </tr>
        <tr>
          <td style="background-color: 0033CC">     </td>
          <td>0033CC</td>
        </tr>
        <tr>
          <td style="background-color: 0033FF">     </td>
          <td>0033FF</td>
        </tr>
        <tr>
          <td style="background-color: 006600">     </td>
          <td>006600</td>
        </tr>
        <tr>
          <td style="background-color: 006633">     </td>
          <td>006633</td>
        </tr>
        <tr>
          <td style="background-color: 006666">     </td>
          <td>006666</td>
        </tr>
        <tr>
          <td style="background-color: 006699">     </td>
          <td>006699</td>
        </tr>
        <tr>
          <td style="background-color: 0066CC">     </td>
          <td>0066CC</td>
        </tr>
        <tr>
          <td style="background-color: 0066FF">     </td>
          <td>0066FF</td>
        </tr>
        <tr>
          <td style="background-color: 009900">     </td>
          <td>009900</td>
        </tr>
        <tr>
          <td style="background-color: 009933">     </td>
          <td>009933</td>
        </tr>
        <tr>
          <td style="background-color: 009966">     </td>
          <td>009966</td>
        </tr>
        <tr>
          <td style="background-color: 009999">     </td>
          <td>009999</td>
        </tr>
        <tr>
          <td style="background-color: 0099CC">     </td>
          <td>0099CC</td>
        </tr>
        <tr>
          <td style="background-color: 0099FF">     </td>
          <td>0099FF</td>
        </tr>
        <tr>
          <td style="background-color: 00CC00">     </td>
          <td>00CC00</td>
        </tr>
        <tr>
          <td style="background-color: 00CC33">     </td>
          <td>00CC33</td>
        </tr>
        <tr>
          <td style="background-color: 00CC66">     </td>
          <td>00CC66</td>
        </tr>
        <tr>
          <td style="background-color: 00CC99">     </td>
          <td>00CC99</td>
        </tr>
        <tr>
          <td style="background-color: 00CCCC">     </td>
          <td>00CCCC</td>
        </tr>
        <tr>
          <td style="background-color: 00CCFF">     </td>
          <td>00CCFF</td>
        </tr>
        <tr>
          <td style="background-color: 00FF00">     </td>
          <td>00FF00</td>
        </tr>
        <tr>
          <td style="background-color: 00FF33">     </td>
          <td>00FF33</td>
        </tr>
        <tr>
          <td style="background-color: 00FF66">     </td>
          <td>00FF66</td>
        </tr>
        <tr>
          <td style="background-color: 00FF99">     </td>
          <td>00FF99</td>
        </tr>
        <tr>
          <td style="background-color: 00FFCC">     </td>
          <td>00FFCC</td>
        </tr>
        <tr>
          <td style="background-color: 00FFFF">     </td>
          <td>00FFFF</td>
        </tr>
        <tr>
          <td style="background-color: 330000">     </td>
          <td>330000</td>
        </tr>
        <tr>
          <td style="background-color: 330033">     </td>
          <td>330033</td>
        </tr>
        <tr>
          <td style="background-color: 330066">     </td>
          <td>330066</td>
        </tr>
        <tr>
          <td style="background-color: 330099">     </td>
          <td>330099</td>
        </tr>
        <tr>
          <td style="background-color: 3300CC">     </td>
          <td>3300CC</td>
        </tr>
        <tr>
          <td style="background-color: 3300FF">     </td>
          <td>3300FF</td>
        </tr>
        <tr>
          <td style="background-color: 333300">     </td>
          <td>333300</td>
        </tr>
        <tr>
          <td style="background-color: 333333">     </td>
          <td>333333</td>
        </tr>
        <tr>
          <td style="background-color: 333366">     </td>
          <td>333366</td>
        </tr>
        <tr>
          <td style="background-color: 333399">     </td>
          <td>333399</td>
        </tr>
        <tr>
          <td style="background-color: 3333CC">     </td>
          <td>3333CC</td>
        </tr>
        <tr>
          <td style="background-color: 3333FF">     </td>
          <td>3333FF</td>
        </tr>
        <tr>
          <td style="background-color: 336600">     </td>
          <td>336600</td>
        </tr>
        <tr>
          <td style="background-color: 336633">     </td>
          <td>336633</td>
        </tr>
        <tr>
          <td style="background-color: 336666">     </td>
          <td>336666</td>
        </tr>
        <tr>
          <td style="background-color: 336699">     </td>
          <td>336699</td>
        </tr>
        <tr>
          <td style="background-color: 3366CC">     </td>
          <td>3366CC</td>
        </tr>
        <tr>
          <td style="background-color: 3366FF">     </td>
          <td>3366FF</td>
        </tr>
        <tr>
          <td style="background-color: 339900">     </td>
          <td>339900</td>
        </tr>
        <tr>
          <td style="background-color: 339933">     </td>
          <td>339933</td>
        </tr>
        <tr>
          <td style="background-color: 339966">     </td>
          <td>339966</td>
        </tr>
        <tr>
          <td style="background-color: 339999">     </td>
          <td>339999</td>
        </tr>
        <tr>
          <td style="background-color: 3399CC">     </td>
          <td>3399CC</td>
        </tr>
        <tr>
          <td style="background-color: 3399FF">     </td>
          <td>3399FF</td>
        </tr>
        <tr>
          <td style="background-color: 33CC00">     </td>
          <td>33CC00</td>
        </tr>
        <tr>
          <td style="background-color: 33CC33">     </td>
          <td>33CC33</td>
        </tr>
        <tr>
          <td style="background-color: 33CC66">     </td>
          <td>33CC66</td>
        </tr>
        <tr>
          <td style="background-color: 33CC99">     </td>
          <td>33CC99</td>
        </tr>
        <tr>
          <td style="background-color: 33CCCC">     </td>
          <td>33CCCC</td>
        </tr>
        <tr>
          <td style="background-color: 33CCFF">     </td>
          <td>33CCFF</td>
        </tr>
        <tr>
          <td style="background-color: 33FF00">     </td>
          <td>33FF00</td>
        </tr>
        <tr>
          <td style="background-color: 33FF33">     </td>
          <td>33FF33</td>
        </tr>
        <tr>
          <td style="background-color: 33FF66">     </td>
          <td>33FF66</td>
        </tr>
        <tr>
          <td style="background-color: 33FF99">     </td>
          <td>33FF99</td>
        </tr>
        <tr>
          <td style="background-color: 33FFCC">     </td>
          <td>33FFCC</td>
        </tr>
        <tr>
          <td style="background-color: 33FFFF">     </td>
          <td>33FFFF</td>
        </tr>
        <tr>
          <td style="background-color: 660000">     </td>
          <td>660000</td>
        </tr>
        <tr>
          <td style="background-color: 660033">     </td>
          <td>660033</td>
        </tr>
        <tr>
          <td style="background-color: 660066">     </td>
          <td>660066</td>
        </tr>
        <tr>
          <td style="background-color: 660099">     </td>
          <td>660099</td>
        </tr>
        <tr>
          <td style="background-color: 6600CC">     </td>
          <td>6600CC</td>
        </tr>
        <tr>
          <td style="background-color: 6600FF">     </td>
          <td>6600FF</td>
        </tr>
        <tr>
          <td style="background-color: 663300">     </td>
          <td>663300</td>
        </tr>
        <tr>
          <td style="background-color: 663333">     </td>
          <td>663333</td>
        </tr>
        <tr>
          <td style="background-color: 663366">     </td>
          <td>663366</td>
        </tr>
        <tr>
          <td style="background-color: 663399">     </td>
          <td>663399</td>
        </tr>
        <tr>
          <td style="background-color: 6633CC">     </td>
          <td>6633CC</td>
        </tr>
        <tr>
          <td style="background-color: 6633FF">     </td>
          <td>6633FF</td>
        </tr>
        <tr>
          <td style="background-color: 666600">     </td>
          <td>666600</td>
        </tr>
        <tr>
          <td style="background-color: 666633">     </td>
          <td>666633</td>
        </tr>
        <tr>
          <td style="background-color: 666666">     </td>
          <td>666666</td>
        </tr>
        <tr>
          <td style="background-color: 666699">     </td>
          <td>666699</td>
        </tr>
        <tr>
          <td style="background-color: 6666CC">     </td>
          <td>6666CC</td>
        </tr>
        <tr>
          <td style="background-color: 6666FF">     </td>
          <td>6666FF</td>
        </tr>
        <tr>
          <td style="background-color: 669900">     </td>
          <td>669900</td>
        </tr>
        <tr>
          <td style="background-color: 669933">     </td>
          <td>669933</td>
        </tr>
        <tr>
          <td style="background-color: 669966">     </td>
          <td>669966</td>
        </tr>
        <tr>
          <td style="background-color: 669999">     </td>
          <td>669999</td>
        </tr>
        <tr>
          <td style="background-color: 6699CC">     </td>
          <td>6699CC</td>
        </tr>
        <tr>
          <td style="background-color: 6699FF">     </td>
          <td>6699FF</td>
        </tr>
        <tr>
          <td style="background-color: 66CC00">     </td>
          <td>66CC00</td>
        </tr>
        <tr>
          <td style="background-color: 66CC33">     </td>
          <td>66CC33</td>
        </tr>
        <tr>
          <td style="background-color: 66CC66">     </td>
          <td>66CC66</td>
        </tr>
        <tr>
          <td style="background-color: 66CC99">     </td>
          <td>66CC99</td>
        </tr>
        <tr>
          <td style="background-color: 66CCCC">     </td>
          <td>66CCCC</td>
        </tr>
        <tr>
          <td style="background-color: 66CCFF">     </td>
          <td>66CCFF</td>
        </tr>
        <tr>
          <td style="background-color: 66FF00">     </td>
          <td>66FF00</td>
        </tr>
        <tr>
          <td style="background-color: 66FF33">     </td>
          <td>66FF33</td>
        </tr>
        <tr>
          <td style="background-color: 66FF66">     </td>
          <td>66FF66</td>
        </tr>
        <tr>
          <td style="background-color: 66FF99">     </td>
          <td>66FF99</td>
        </tr>
        <tr>
          <td style="background-color: 66FFCC">     </td>
          <td>66FFCC</td>
        </tr>
        <tr>
          <td style="background-color: 66FFFF">     </td>
          <td>66FFFF</td>
        </tr>
        <tr>
          <td style="background-color: 990000">     </td>
          <td>990000</td>
        </tr>
        <tr>
          <td style="background-color: 990033">     </td>
          <td>990033</td>
        </tr>
        <tr>
          <td style="background-color: 990066">     </td>
          <td>990066</td>
        </tr>
        <tr>
          <td style="background-color: 990099">     </td>
          <td>990099</td>
        </tr>
        <tr>
          <td style="background-color: 9900CC">     </td>
          <td>9900CC</td>
        </tr>
        <tr>
          <td style="background-color: 9900FF">     </td>
          <td>9900FF</td>
        </tr>
        <tr>
          <td style="background-color: 993300">     </td>
          <td>993300</td>
        </tr>
        <tr>
          <td style="background-color: 993333">     </td>
          <td>993333</td>
        </tr>
        <tr>
          <td style="background-color: 993366">     </td>
          <td>993366</td>
        </tr>
        <tr>
          <td style="background-color: 993399">     </td>
          <td>993399</td>
        </tr>
        <tr>
          <td style="background-color: 9933CC">     </td>
          <td>9933CC</td>
        </tr>
        <tr>
          <td style="background-color: 9933FF">     </td>
          <td>9933FF</td>
        </tr>
        <tr>
          <td style="background-color: 996600">     </td>
          <td>996600</td>
        </tr>
        <tr>
          <td style="background-color: 996633">     </td>
          <td>996633</td>
        </tr>
        <tr>
          <td style="background-color: 996666">     </td>
          <td>996666</td>
        </tr>
        <tr>
          <td style="background-color: 996699">     </td>
          <td>996699</td>
        </tr>
        <tr>
          <td style="background-color: 9966CC">     </td>
          <td>9966CC</td>
        </tr>
        <tr>
          <td style="background-color: 9966FF">     </td>
          <td>9966FF</td>
        </tr>
        <tr>
          <td style="background-color: 999900">     </td>
          <td>999900</td>
        </tr>
        <tr>
          <td style="background-color: 999933">     </td>
          <td>999933</td>
        </tr>
        <tr>
          <td style="background-color: 999966">     </td>
          <td>999966</td>
        </tr>
        <tr>
          <td style="background-color: 999999">     </td>
          <td>999999</td>
        </tr>
        <tr>
          <td style="background-color: 9999CC">     </td>
          <td>9999CC</td>
        </tr>
        <tr>
          <td style="background-color: 9999FF">     </td>
          <td>9999FF</td>
        </tr>
        <tr>
          <td style="background-color: 99CC00">     </td>
          <td>99CC00</td>
        </tr>
        <tr>
          <td style="background-color: 99CC33">     </td>
          <td>99CC33</td>
        </tr>
        <tr>
          <td style="background-color: 99CC66">     </td>
          <td>99CC66</td>
        </tr>
        <tr>
          <td style="background-color: 99CC99">     </td>
          <td>99CC99</td>
        </tr>
        <tr>
          <td style="background-color: 99CCCC">     </td>
          <td>99CCCC</td>
        </tr>
        <tr>
          <td style="background-color: 99CCFF">     </td>
          <td>99CCFF</td>
        </tr>
        <tr>
          <td style="background-color: 99FF00">     </td>
          <td>99FF00</td>
        </tr>
        <tr>
          <td style="background-color: 99FF33">     </td>
          <td>99FF33</td>
        </tr>
        <tr>
          <td style="background-color: 99FF66">     </td>
          <td>99FF66</td>
        </tr>
        <tr>
          <td style="background-color: 99FF99">     </td>
          <td>99FF99</td>
        </tr>
        <tr>
          <td style="background-color: 99FFCC">     </td>
          <td>99FFCC</td>
        </tr>
        <tr>
          <td style="background-color: 99FFFF">     </td>
          <td>99FFFF</td>
        </tr>
        <tr>
          <td style="background-color: CC0000">     </td>
          <td>CC0000</td>
        </tr>
        <tr>
          <td style="background-color: CC0033">     </td>
          <td>CC0033</td>
        </tr>
        <tr>
          <td style="background-color: CC0066">     </td>
          <td>CC0066</td>
        </tr>
        <tr>
          <td style="background-color: CC0099">     </td>
          <td>CC0099</td>
        </tr>
        <tr>
          <td style="background-color: CC00CC">     </td>
          <td>CC00CC</td>
        </tr>
        <tr>
          <td style="background-color: CC00FF">     </td>
          <td>CC00FF</td>
        </tr>
        <tr>
          <td style="background-color: CC3300">     </td>
          <td>CC3300</td>
        </tr>
        <tr>
          <td style="background-color: CC3333">     </td>
          <td>CC3333</td>
        </tr>
        <tr>
          <td style="background-color: CC3366">     </td>
          <td>CC3366</td>
        </tr>
        <tr>
          <td style="background-color: CC3399">     </td>
          <td>CC3399</td>
        </tr>
        <tr>
          <td style="background-color: CC33CC">     </td>
          <td>CC33CC</td>
        </tr>
        <tr>
          <td style="background-color: CC33FF">     </td>
          <td>CC33FF</td>
        </tr>
        <tr>
          <td style="background-color: CC6600">     </td>
          <td>CC6600</td>
        </tr>
        <tr>
          <td style="background-color: CC6633">     </td>
          <td>CC6633</td>
        </tr>
        <tr>
          <td style="background-color: CC6666">     </td>
          <td>CC6666</td>
        </tr>
        <tr>
          <td style="background-color: CC6699">     </td>
          <td>CC6699</td>
        </tr>
        <tr>
          <td style="background-color: CC66CC">     </td>
          <td>CC66CC</td>
        </tr>
        <tr>
          <td style="background-color: CC66FF">     </td>
          <td>CC66FF</td>
        </tr>
        <tr>
          <td style="background-color: CC9900">     </td>
          <td>CC9900</td>
        </tr>
        <tr>
          <td style="background-color: CC9933">     </td>
          <td>CC9933</td>
        </tr>
        <tr>
          <td style="background-color: CC9966">     </td>
          <td>CC9966</td>
        </tr>
        <tr>
          <td style="background-color: CC9999">     </td>
          <td>CC9999</td>
        </tr>
        <tr>
          <td style="background-color: CC99CC">     </td>
          <td>CC99CC</td>
        </tr>
        <tr>
          <td style="background-color: CC99FF">     </td>
          <td>CC99FF</td>
        </tr>
        <tr>
          <td style="background-color: CCCC00">     </td>
          <td>CCCC00</td>
        </tr>
        <tr>
          <td style="background-color: CCCC33">     </td>
          <td>CCCC33</td>
        </tr>
        <tr>
          <td style="background-color: CCCC66">     </td>
          <td>CCCC66</td>
        </tr>
        <tr>
          <td style="background-color: CCCC99">     </td>
          <td>CCCC99</td>
        </tr>
        <tr>
          <td style="background-color: CCCCCC">     </td>
          <td>CCCCCC</td>
        </tr>
        <tr>
          <td style="background-color: CCCCFF">     </td>
          <td>CCCCFF</td>
        </tr>
        <tr>
          <td style="background-color: CCFF00">     </td>
          <td>CCFF00</td>
        </tr>
        <tr>
          <td style="background-color: CCFF33">     </td>
          <td>CCFF33</td>
        </tr>
        <tr>
          <td style="background-color: CCFF66">     </td>
          <td>CCFF66</td>
        </tr>
        <tr>
          <td style="background-color: CCFF99">     </td>
          <td>CCFF99</td>
        </tr>
        <tr>
          <td style="background-color: CCFFCC">     </td>
          <td>CCFFCC</td>
        </tr>
        <tr>
          <td style="background-color: CCFFFF">     </td>
          <td>CCFFFF</td>
        </tr>
        <tr>
          <td style="background-color: FF0000">     </td>
          <td>FF0000</td>
        </tr>
        <tr>
          <td style="background-color: FF0033">     </td>
          <td>FF0033</td>
        </tr>
        <tr>
          <td style="background-color: FF0066">     </td>
          <td>FF0066</td>
        </tr>
        <tr>
          <td style="background-color: FF0099">     </td>
          <td>FF0099</td>
        </tr>
        <tr>
          <td style="background-color: FF00CC">     </td>
          <td>FF00CC</td>
        </tr>
        <tr>
          <td style="background-color: FF00FF">     </td>
          <td>FF00FF</td>
        </tr>
        <tr>
          <td style="background-color: FF3300">     </td>
          <td>FF3300</td>
        </tr>
        <tr>
          <td style="background-color: FF3333">     </td>
          <td>FF3333</td>
        </tr>
        <tr>
          <td style="background-color: FF3366">     </td>
          <td>FF3366</td>
        </tr>
        <tr>
          <td style="background-color: FF3399">     </td>
          <td>FF3399</td>
        </tr>
        <tr>
          <td style="background-color: FF33CC">     </td>
          <td>FF33CC</td>
        </tr>
        <tr>
          <td style="background-color: FF33FF">     </td>
          <td>FF33FF</td>
        </tr>
        <tr>
          <td style="background-color: FF6600">     </td>
          <td>FF6600</td>
        </tr>
        <tr>
          <td style="background-color: FF6633">     </td>
          <td>FF6633</td>
        </tr>
        <tr>
          <td style="background-color: FF6666">     </td>
          <td>FF6666</td>
        </tr>
        <tr>
          <td style="background-color: FF6699">     </td>
          <td>FF6699</td>
        </tr>
        <tr>
          <td style="background-color: FF66CC">     </td>
          <td>FF66CC</td>
        </tr>
        <tr>
          <td style="background-color: FF66FF">     </td>
          <td>FF66FF</td>
        </tr>
        <tr>
          <td style="background-color: FF9900">     </td>
          <td>FF9900</td>
        </tr>
        <tr>
          <td style="background-color: FF9933">     </td>
          <td>FF9933</td>
        </tr>
        <tr>
          <td style="background-color: FF9966">     </td>
          <td>FF9966</td>
        </tr>
        <tr>
          <td style="background-color: FF9999">     </td>
          <td>FF9999</td>
        </tr>
        <tr>
          <td style="background-color: FF99CC">     </td>
          <td>FF99CC</td>
        </tr>
        <tr>
          <td style="background-color: FF99FF">     </td>
          <td>FF99FF</td>
        </tr>
        <tr>
          <td style="background-color: FFCC00">     </td>
          <td>FFCC00</td>
        </tr>
        <tr>
          <td style="background-color: FFCC33">     </td>
          <td>FFCC33</td>
        </tr>
        <tr>
          <td style="background-color: FFCC66">     </td>
          <td>FFCC66</td>
        </tr>
        <tr>
          <td style="background-color: FFCC99">     </td>
          <td>FFCC99</td>
        </tr>
        <tr>
          <td style="background-color: FFCCCC">     </td>
          <td>FFCCCC</td>
        </tr>
        <tr>
          <td style="background-color: FFCCFF">     </td>
          <td>FFCCFF</td>
        </tr>
        <tr>
          <td style="background-color: FFFF00">     </td>
          <td>FFFF00</td>
        </tr>
        <tr>
          <td style="background-color: FFFF33">     </td>
          <td>FFFF33</td>
        </tr>
        <tr>
          <td style="background-color: FFFF66">     </td>
          <td>FFFF66</td>
        </tr>
        <tr>
          <td style="background-color: FFFF99">     </td>
          <td>FFFF99</td>
        </tr>
        <tr>
          <td style="background-color: FFFFCC">     </td>
          <td>FFFFCC</td>
        </tr>
        <tr>
          <td style="background-color: FFFFFF">     </td>
          <td>FFFFFF</td>
        </tr>
      </table>
    </html>
    



  • While I used these RGB colors, I was surprised to see very different colors on the few real devices I own. I had to change the 8 colors I use from what looks ideal on my desktop monitor to what looks reasonable on the fenix6. On the fr965 that is AMOLED the differences are not that big.

    For devices that you own this is a useful tool: apps.garmin.com/.../44cb7384-f0d2-4ea3-8c73-750ede036c8c

  • This has always been the case with MIP displays.  They don't look the same on a real device as they do in the sim.  One I've known for years red text on a black background might look fine in the sim, but not so great on a real MIP display.

    So, instead of red, I'll use pink for a default color, as that looks fine on both MIP and AMOLED displays.  If a user really wants red, they can change the color and see how that looks on their device.

  • Yes, tuning colors from 64 palette for MIP devices is a lot of pain. But as a user I prefer MIP over AMOLED for battery life.

  • While I used these RGB colors, I was surprised to see very different colors on the few real devices I own. I had to change the 8 colors I use from what looks ideal on my desktop monitor to what looks reasonable on the fenix6. On the fr965 that is AMOLED the differences are not that big.

    The MIP displays are not very color accurate. Basically, they distort the color because they can't reproduce them accurately. Pretty much every display distorts colors (but it's hard to tell). Displaying color on a monochrome screen is an extreme example of the distortion.

  • I don't really know how to put this:

    it's one thing that the input to a MIP display is in RGB, and it's another thing that it's output could be measured and given in ANOTHER RGB value. Now I know not all monitors are accurate (I guess none are, but there are better and worse), and I know the issue with perfect colors apply even on desktop monitors, and even more when one edits some picture for printing, BUT I don't think there's a big difference in the perceived colors (at least in my experience) between most "new" (last 10 years) monitors. At least not in the way that looking at one you would call a certain "RGB value" color red, and the same "RGB value" as color pink.

    So while I can understand that from Garmin's point of view it's easier to stick to whatever the input is (so to call #FF0000 red), but if that looks like "i don't know what, but not red" then call it something else. I saw differences in what I would call yellow, green, brown in many of the 64 colors. Do you know what I mean? And then the developer who wants the user to experience a yellow color, that on MOST modern monitors look close to #FFFF00 would use FFFF00, and the watch would DISPLAY a color that looks to the human eye close to that yellow, even if under the hood the hardware "thinks" it's displaying some green color.

    This kind of reminds me my childhood philosophic questions about colors: How do I know that what my brain learned to call red is similar experience to what you see when you look at the same color? I don't. Maybe today some fMRI research could even scientifically prove that some people "see" the same color differently, but (and now I'm not talking about color blindness) they both learned to call it "red". Or to give another "example" 2 people could look at a girl, one can see her as a nice girl, the other as ugly, but both could agree she has red hair :) 

  • BUT I don't think there's a big difference in the perceived colors (at least in my experience) between most "new" (last 10 years) monitors.

    Monitors have had, what?, 90% or better color accuracy for many years now. MIP displays are more like (worse than) old CRTs, which had much worse color accuracy.

  • probably, but again, I'm not complaining about the accuracy of the MIP displays (especially that I brag a lot about my bad experience of switching from fenix6 to fr965, because of the bad battery life), what I am hoping for is better "predictability" from the developer point of view. And this might depend on the way the developer uses the display. I guess if I was one of the guys who's filling the store with garbage watch faces with pictures as background image, then I would less be happy with even the following solution, but as a developer who creates apps that only use 8-16 colors from a palette that I as a developer chose (based on what I want to see) I'd be happy if the RGB palette that is the input is reflected as closely as possible. So what I see in the simulator is as close as possible to what the user will see on the real device.