Tutorial – What to do about colors in the new Corona SDK Graphics 2.0 public release

posted in: CoronaSDK, Learning, Mobile | 16

A collective moan went around when we found that the way we have been handling colors in our Corona apps, using the standard RGB decimal format we have gotten used to, has been changed in the new build. Going forward, we need to set our colors using RGB percent. The reasons why this change was made is explained here: http://forums.coronalabs.com/topic/40216-why-change-the-color-parameter-values/?hl=%2Bgraphics+%2B2.0+%2Bcolors

TL;DR – I explain it all here: http://www.coronalabs.com/blog/coronageek/converting-color-codes-corona-sdk/

Several solutions have been proposed to use this new build and its color handling. You can:

- create a function to convert your colors

- divide each element by 255 like this: local back:setStrokeColor(25/255, 25/255, 25/255)

- throw up your hands and run your app in compatibility mode

The first two introduce overhead in terms of processing, which we really don’t need if we want to optimize our app’s speed. Using compatibility mode isn’t a great idea either as eventually it’s sure to be deprecated.

So I have a solution that is pretty fast and usable going forward. First I grab my color palette from Kuler, making note of the HEX color in the palette: https://kuler.adobe.com/create/color-wheel/

Then, go to this great website, http://www.colorhexa.com. Append your color’s HEX code into the url like this: http://www.colorhexa.com/2980b9 (that’s the blue I use for my background’s stroke in SevenMinutes).

Take a look at the different ways colors are listed. All these choices!

#2980b9 Color Conversion

The hexadecimal color #2980b9 has RGB values of R:41, G:128, B:185 and CMYK values of C:0.78, M:0.31, Y:0, K:0.27. Its decimal value is 2719929.

  • Hex triplet 2980b9
    #2980b9
  • RGB Decimal 41, 128, 185
    rgb(41,128,185)
  • RGB Percent 16.1, 50.2, 72.5
    rgb(16.1%,50.2%,72.5%)

What we care about is the RGB Percent.

Grab those numbers and plonk them into your RGB color value settings, after moving the decimal point two places to the left.

So what used to be

back:setStrokeColor(41, 128, 185)

is now

back:setStrokeColor(.161, .502, .725)

So you now have your app looking decent again. Mischief managed!

Screenshot 2013-11-21 09.15.06

 

Like my tutorials? You’ll love my apps. Please download, rate and review!

16 Responses

  1. Or take the RGB values from Kuler, using a calculator divide each by 255 and use those values in your code. No need to visit websites, move decimal places, etc

    • Sure, there are many ways to do it. I wanted to make it as easy as possible for myself and prefer a copy/paste method if I can get away with it. But your method of course works as well. Thanks!

  2. Gfx2 is essentially pushing us towards using named colours, IMHO. Try this: https://dl.dropboxusercontent.com/u/10254959/RGBlist/rgb.lua
    Uncomment the runInGraphics2() function call when running in Gfx2.

    • There are many ways to do it. I wanted to try to do it in as few lines of code as possible. But thanks for your snippet!

    • “The first two introduce overhead in terms of processing, which we really don’t need if we want to optimize our app’s speed.”

      Matt,
      Your script stores the named colors in a table. Why not just do away with the runInGraphics2 function and store the colors as percent in another table. This would avoid the computational cost that is mentioned in the post.

      • Because I ripped the values off a web page and regularly update it with as little hassle as possible. The conversion function only runs once, at the start of runtime so the computational cost is nil for runtime.

        • That makes perfect sense. Nice script, will probably start incorporating the same method in my future projects. Thanks for sharing.

  3. Thanks Jen for pointing us to such a valuable resource. I love the Color Hax site. Thanks Matt for your Gfx2 library It’s going into every future Gfx2 project I create.

  4. Btw, a good way to use the RGB values in Gfx2 is:

    local circle = display.newCircle( pWidth*.5, pHeight*.5, pWidth*.25 )
    circle.fill = RGB.red

    Instead of using :setFillColor()

    Not sure if this was mentioned in the recent Corona Geek or not.

  5. Thank you for this tip, Matt! Clearly there’s a lot to learn with Gfx2. I struggled with some of the layout challenges and the concept of ‘snapshots’ etc. Maybe I’ll take it bit by bit and try to write more tutorials as I get through it.

  6. Not sure if it’s helpful or not but you can abstract away the actual format the colour is stored in if you use something like GGColour – https://github.com/GlitchGames/GGColour

  7. How did you create that layout for the app in the final image? Also, are there any other corona tutorial sites you would follow? I have found develephant and thatssopanda. All of your sites are great.

Leave a Reply