Skip to content
Randall C. O'Reilly edited this page Jan 25, 2024 · 1 revision

Everything about Color documented here.

The gi.Color object contains uint8-based RGBA values, just like standard color.RGBA and it implements the standard color.Color. We had to make our own Color type to support a number of additional methods on it.

Alpha Premultiplied (transparency)

As in the standard color.RGBA, the components should be premultiplied for alpha (transparency) values < 255: https://en.wikipedia.org/wiki/Alpha_compositing#Straight_versus_premultiplied -- this means that the R, G, B numbers should always be less-than-or-equal to the A alpha value. This allows a more accurate, general form of alpha blending. However, for colors used in the 3D gi3d framework, they should not be represented using premultiplied alpha, as the rendering process automatically converts them to premultiplied. See 3D page.

See color methods SetAlphaPreMult SetNotAlphaPreMult, and SetAlphaPreFix to deal with this -- for performance reasons colors are assumed to be correct in the core code.

Styling

See Style for general info about styling.

Standard CSS names in all lowercase are supported: https://www.w3schools.com/css/css3_colors.asp https://www.w3schools.com/colors/colors_names.asp including gradients: https://www.w3schools.com/css/css3_gradients.asp (gradients for background-color mainly). This includes the HSL color space.

In addition, GoGi supports various special cases that are particularly convenient for simplifying GUI customization.

Relative transformations

There are several color strings that transform a "base" color in various ways, using a percent specifier, shown as -20 in the examples for 20%, to indicate how much of the transformation to apply.

  • lighter-20 darker-20 -- use HSL to transform the L component up/down
  • highlight-20 samelight-20 -- for consistent effects across dark and light overall styles, highlight moves in opposite direction of current L component (i.e., if dark, makes lighter, if light, makes darker), while samelight moves more extreme along same lightness (typicaly need larger numbers here to have visible effects). These are preferred for generic styling.
  • saturate-20 pastel-10 -- use HSL to transform the S component up/down
  • clearer-20 opaquer-20 -- transform the alpha component to be more / less transparent
  • blend-20-red -- computes a blend between base color and specified color (pct is amount to move toward specified color)

These only work when there is an available base color:

  • For gradients, the ColorSpec object has a separate solid-color Color field, which is set when someone specifies a standard color -- if a gradient is then applied after such a solid color has been set (as is typically the case), then the first color stop element of the gradient uses this solid color as its base. This works very well for standard Button styles, which apply various lighter / darker transforms to an overall base solid color, to indicate state (hover, press, etc).
    • for subsequent color stops in the gradient, the base is the previous color. This again makes it very easy to specify a generic light-to-dark gradient relative to an overall base color.
  • For state-specific styles (e.g., the button Hover style), the base color is the plain styled value (either the default or the user-set value)
  • Otherwise, the base is the same color value on the parent object in the scenegraph, if available.

Preference colors

  • pref(ControlColor) -- specifies a color from the user-configurable Preferences (do Ctrl+Alt+P to see / edit):
    • FontColor -- default font / pen color
    • BackgroundColor -- default background color
    • ShadowColor -- color for shadows -- should generally be a darker shade of the background color
    • BorderColor -- default border color, for button, frame borders, etc
    • ControlColor -- default main color for controls: buttons, etc
    • IconColor -- color for icons or other solidly-colored, small elements
    • SelectColor -- color for selected elements

These colors are also set directly in all the default builtin styles as appropriate.