× About Contact Blog
06 Aug 2020

HexColor for the HP Prime

A couple of days after I got the HP Prime, I decided to try the new programming language and the Connectivity Kit development environment by writing a small utility that gets a color and converts it to different formats. Pretty simple.

The original code was in fact a small app that I wrote for the iPhone some time ago. I use it all the time for user interface design, so I just ported the Swift code to the HP Prime Programming Language. Surprisingly, everything went smooth on the first try, so I decided to explore the programming capabilities of the Prime a bit deeper, in areas such as User Input, Graphics and custom Soft Menus.

The result is a program with roughly 1.700 lines of code. It takes a color in either hexadecimal, RGB(0-255), HSB or the UIColor/NSColor style (0.0-1.0), and converts it to the other formats, plus HSL as a bonus. It features an HP-48 style menu that will make previous users of the 48 series feel right at home. It also has a graphical interface for entering the HSB values, a small set of utilities for tweaking the HSB color and a dedicated Help section. Lastly, the program allows you to store up to 5 favorite colors for later use.

Please be aware that the Prime LCD display does not have the best color accuracy. In fact, it’s pretty bad. I don’t know wether it’s a hardware limitation or just bad display calibration, but the colors shown on the calculator’s screen are slightly different to the same colors displayed on my computer, tablet or phone.

Anyway, the main objective of this app is to make conversions between different color formats, and that works pretty well. Everything else comes as a bonus.

Installation

Download HexColor here.

Steps for newbie HP Prime users:
You need the HP Connectivity Kit in order to install the program in your calculator. Drag the HexColor.hpprgm you’ve just downloaded into the Contents panel, then right click and select ‘Send‘ (be sure to have the calculator connected to your computer).

After installing the program, you can run it by pressing the Toolbox keyboard key, then User -> HexColor -> HexColor Enter. Or just simply type HexColor Enter in the command line.

Once you launch the program, a dedicated Help section is available anywhere. Just press the HELP keyboard button, or the HELP soft key in the Menu. Use the PREV and NEXT soft keys to navigate through the different pages.

When you’re ready to quit the program, press the EXIT soft key in the main menu. You can also press the ON keyboard key to force quit.

Entering a color

You can use several color formats to enter a color by its value. Please note that you don’t need to press ALPHA to enter A, B, C, D, E, F.

  • Hexadecimal: Use the format RRGGBB, for example:
    5F6A5C Enter
  • RGB: Enter the R G B values separated by spaces. Range is [0 – 255]. For example:
    95 106 92 Enter
  • UIColor/NSColor: Same as above. Enter the components separated by spaces. The range here is [0.0 – 1.0]. For example:
    0.373 0.416 0.361 Enter

You can also enter a color by its HSB values using the PICKR menu, but we’ll cover it later.

Once you’ve entered the color, it will be shown by default in hexadecimal, RGB (0-255) and HSB. If you want to get the HSL value, press the HSL softkey. Likewise, if you want the UIColor/NSColor values (0.0-1.0), press the iOS softkey.

This picture shows the #158BAC color in UIColor/NSColor and HSL formats

The HSL and iOS modes work as a toggle, and both soft keys use an HP-48 mode indicator style. If you want to go back to HSB or normal RGB (0-255), tap the soft key again.

Favorites

You can store up to 5 favorite colors. To save the current color, press the STO soft key, then select one of the available slots and press OK. Whenever you want to recall one of the stored colors, tap the corresponding slot. All values will be updated accordingly.

Saving the current color as a Favorite

Please note that whenever you store a favorite, the existing color in the selected slot will be replaced by the new (current) color.

The HSB Picker

The HSB mode has its own dedicated section that can be accessed by tapping the PICKR soft key.

You’ll see a Hue wheel (0 to 359ยบ) and two bars, one for the Saturation (0 to 100%) and another for the Brightness (0 to 100%). All of these are interactive: you can tap with you finger anywhere around the wheel and inside the bars to move the cursor and pick an approximate value. Then, you can fine tune that value by using the + and soft keys. You can also tap H, S or B to choose the active component.

The HSB screen showing Hue (H) as the active component

A rounded cursor shows the relative value inside the component’s range. Any time you change a value, the color patch in the top right updates accordingly. If you want to revert back to the original color, tap the RESET soft key.

The TOOLS submenu includes some additional quick actions for tweaking the color. Here you can get the complementary color, as well as darker and/or lighter shades of the original color. Darker shades are calculated by increasing the saturation and lowering the brightness, and vice versa. Once you’re happy with the results, you can go back to the Picker screen by tapping BACK. There you can further tweak the color if you want, or close the Picker and return to the main screen with CLOSE.

Remember that you can check the Quick Help section at any time by pressing HELP in the Prime’s keyboard

Feedback and future updates

Feel free to contact me to report bugs or send suggestions. Your feedback is much appreciated! You can either use the Contact page or post a comment below. Also, since I mostly use HexColor as a test bench while learning HP Prime programming, I’ll probably keep updating it from time to time.

Acknowledgements

I took the inspiration for the HP-48 style menus by taking a look at the excellent Base48 application by Didier Lachieze. Seriously, the app is awesome, you should check it right now!

I also learned a lot of HP Prime programming stuff by reading all the tutorials and articles in the Oleksandr Sidko‘s HP Prime for All website. In particular, Han Duong‘s HP Prime Programming How To series, and of course all of the articles written by Edward Shore. Both of them provide excellent learning material.

Another thing that I use a lot while programming the Prime is this great compilation for quick command reference. Although every command is explained and documented in the official HP Prime documentation, that list is much quicker to use.

Last but not least, there’s a lot of info in dedicated forums and websites, such as The Museum of HP Calculators and hpcalc.org. There are of course many other sources, but the list is so large that I’d better write a dedicated article about it ๐Ÿ™‚

Leave a Reply

Your email address will not be published.

Hello Privacy About Contact Blog