RGBDESIGNER TUTORIAL #2
Getting Started With rgbDesigner Palettes
Why are Colour Pickers so small?
If you’d like to download the app before we get started, you can do that here. The app is a monthly subscription and comes with a 7 day free trial.
There are so many contexts in which we use colours for art, design and video, yet the average colour picker treats them like they’re not a big deal.
In the bad old days, every graphic designer would have a process colour guide and a Pantone swatch deck at their finger tips. Colour seemed like so much more of a big deal then.
I’d had enough of the tiny colour picker most software offered up so I wanted to create my own digital RGB (red/green/blue) version of those CMYK and Pantone charts that I used to love so much.
Welcome to the rgbDesigner colour picker.
The main Palettes screen is divided into four areas:
- The colour selection method.
- The colour selection area.
- Tools.
- The palette display area.
The Palette Display Area
An rgbDesigner Palette consists of 32 colours. By default, the palette display area is divided into 4 columns of eight colours.
The current colour is denoted by a green outline.
The numerical display under the colours shows the values of the current selected colour. The display format is set from the Settings area. Five options are available: Decimal (0.0–1.0), Percentage (0%-100%), Integer (0–255), Hexidecimal (#xxxxxx) and Hue/Saturation/Brightness (hsb).
Tap on a colour to make it the current colour.
Tap down and drag to copy one colour to another.
Double tap on a colour to enter the detailed colour edit screen.
The Colour Selection Method and Colour Selection Area
There are six colour selection methods of three different types: Swatches (4 variations), Join and Image.
Swatches
The swatch options as based on the colour model, followed by the primary value after the colon.
Colour Model: Primary Value
rgb:r = red/green/blue: red as primary value
hsb: hue = hue/saturation/brightness: hue as primary value
The primary value is selected from the strip at the bottom of the colour selection area. The swatches above incorporate the primary value as selected. For example, Red: 30% or Hue: 36
When a swatch selection method is chosen, you can set the size of the colour increments to 5%, 10% or 20%. The bigger the increments, the bigger the swatches. I use different swatch sizes depending on the project I’m working on.
When you tap on a swatch, the current colour (the palette colour outlined in green) is set to the selected swatch colour.
Join
rgbDesigner works with three current Palettes, the Primary Palette which is shown in the Palette display area and two Secondary Palettes.
When you select the Join option, the two Secondary Palettes are shown to enable colours within these Palettes to be added to the Primary Palette.
The Secondary Palettes are set from the Palettes file screen.
When you tap on a swatch, the current colour (the palette colour outlined in green) is set to the selected swatch colour.
Image
You can load an image into the Palettes from your Photos for picking colours from the photo.
When you select the Image option the picture icon appears. Tap on the icon to select a picture from your Photos.
Once you have selected the picture tap and drag over the image. An arrow appears that shows your current selected colour. When you lift your finger off the image, that colour is selected. If you drag outside of the image, no colour will be selected.
Pro Tip: If you have a Apple Pencil you will find that you get a lot more control and precision with the selection process.
Tools
- Settings. You can set the Primary Mode Value Style (6). The default, shown in the examples above, is Swatches. You can also select Slider which gives you a continuous selection, as shown in the image above.
- Column Selector. You can select All, which displays all four columns or you can display a single column at a time. This can be useful for a more detailed view. The Column Selector also affects the behaviour Fill tool (4)
- Undo / Redo. The back undo arrow will take you to the previous Palette state and the forward arrow will redo the Palette changes you had made. If the redo arrow is greyed out, none of your selections have been undo.
- Fill Tool. With the Column Selector set to All, the Fill Tool will fill the entire palette with the colour in the top left corner. When the Column Selector is set to a single column, that column only will be filled with the colour at the top of the column.
- Palette Files. This tool reveals the Palettes Files screen. We’ll cover this in more detail in a future tutorial.
The is the second tutorial in our ongoing series. You can read the first here:
If you have any thoughts or questions about rgbDesigner, please let us know in the comments.
