I’m building a collection of UI components, mostly canvas-based. Many of these replicate common UI elements seen in other apps.
I’m trying to get the correct colour for certain components (e.g. the background colour, etc). To do this, I have tried using a few macOS colour picker tools (e.g. xScope) to let me select an element and get its colour code.
No matter what tool I use, the colour code I get (usually a 6 digit code) never looks the same when I draw it on a canvas in Xojo. It looks close enough but never the same. I can’t figure what I’m doing wrong. Is there some sort of colour space issue I need to factor when choosing a colour from a monitor with a colour picker and then drawing that colour in Xojo?
It’s not you. Xojo does not use the macOS color space the same way as those other apps do. Someone more knowledgeable can hopefully chime in, but that’s the ELI5 version.
Unfortunately, the way you’re getting these codes is not the best way to get systems colors. Not only does the color space come into play, so do things like wallpaper tinting. On macOS the correct way to get system colors is by name with NSColor.
In that light, the most accurate tool would be Sam’s AquaSwatch.
I’ve spent a lot of time trying to make NSColors come out as close as possible for use with Xojo’s drawing functions (The Ohanaware App Kit has a function for this), but “The Way™” is to use NSDrawing functions, avoiding rasterization altogether.
Desktop Tinting and Vibrancy is a whole 'nother ball game in that painted colors do not adopt their magical behavior. You instead have to create special views to display these colors.
I understand that there are declares etc to get named UI colours on the Mac but surely there must be a way to simply replicate any colour visible on your screen with Xojo?
What I’ve been doing is taking screenshots and then trying to colour pick from the screenshot in Preview. It seems bonkers that if I place the colour picker over a solid colour in Preview, copy if with xScope and then try to draw that colour with one of Xojo’s Graphics functions that the colour looks pretty different.
What colour space does Xojo use? Is it generic RGB or something else?
The issue with NSColors is I’m trying to get the same colours cross platform.
Apple do all kinds of things under the hood with their colors.
Picking a color from a screenshot also won’t tell you the alpha channel they used, where as Aqua Swatch can (for some colors), however it doesn’t for all and the values can be seriously wrong as simply put some of Appe’s colors are NOT designed to be rasterized.
Yes, colors need to be converted to the generic color space while they’re still NSColors, some will NOT convert, instead returning a nil object.
Aqua Swatch is made with Xojo, but it does next to no drawing with Apple’s colors.
I think you misunderstand me. I’m making replicas of controls seen on operating systems OTHER than macOS.
For example, I’m building a tokenising text field. I want it to look like it does on windows (see this page for a gif). If I grab a screenshot of that control as a PNG I should be able to get the colour of the background used in the tags so I can draw them on a Xojo canvas.
The issue is that if I open the screenshot say in PixelMator and use their colour picker I get the colour value. Great. I can draw shapes, etc in Pixelmator using this colour and it looks exactly the same as the screenshot.
If I try to assign to a graphics object in Xojo that exact colour and draw it looks a different shade.
Does that make sense?
Also, @Sam_Rowlands your AquaSwatch tool looks interesting. Does that have a colour picker to let me pick an arbitrary colour from an object on the screen?
If you only need colours for macOS then use the Digital Colour Meter utility with the colour space set to ‘Display In Generic RGB’.
NOTE. This will only get you a solid colour which may not provide the same visual effect if the original colour was created via an effect / blending.
If you need colours that work cross platform things become more difficult. This is because the targets have different colour spaces which cause the RGB colours defined manually and colours in pictures to have different meanings (macOS is Generic / Device RGB, MS-Windows is sRGB, not sure about Linux).
The way we have reduced cross platform colour consistency issues is to assume all colours are based on sRGB and on macOS convert the Xojo Color class RGB values / picture content. The Color class values are converted using NSColor (via MBS plugins) and the pictures are converted using ICC colour management functions also in the MBS plugins.
Right so I’ve been playing around and @kevin_g you’re spot on with the generic RGB Color space and the Digital Colour Meter utility.
What I’ve done is picked up a nifty little app (£6.99) called ColorSlurp that is a fancy colour picker tool. What’s nice is you can not only specify the colour space to use (in this case generic RGB) but you can define custom formats for when you copy. I’ve created a Xojo Color literal format that I can just paste straight into Xojo’s IDE.
It’s not perfect but it’s much closer to what I was expecting.
Who knew colours were so complicated??
Also, I realised there are several bugs in the online docs for Color. Specifically, you can supply an alpha parameter to the shared Color.RGB() method but the docs don’t mention that in the method signature.
