Every colour in FotoGrids — item borders, shadows, caption text, the Lightbox, the filter bar, and more — is set with the same colour control. Clicking its swatch opens a built-in colour picker that supports transparency and three colour formats, so you can match any value to your brand without writing CSS.
Location Gallery Settings → Styling → any colour setting
How the Color Control Works #
Wherever a setting controls a colour, FotoGrids shows a swatch next to a text field displaying the current value. Click the swatch (or the value field) to open the colour picker in a popover. The popover stays open while you adjust the colour and closes when you click anywhere outside it or press Escape.
The swatch always reflects the current colour, including its transparency, so you can read the state of every colour setting at a glance.
The Colour Picker
The picker gives you several ways to choose a colour:
- Gradient area — the large square sets saturation and brightness. Drag the handle anywhere inside it.
- Hue slider — the rainbow slider sets the base hue.
- Transparency slider — the lower slider sets the alpha (opacity) from fully transparent to fully opaque. Its checkerboard background shows how transparent the current colour is.
- Value field — type or paste an exact colour value, then press Enter to apply it.
Colour Formats
The value field accepts three formats, switched with the buttons beside it:
- HEX — six-digit hex (
#3C46F0), or eight-digit hex (#3C46F080) when transparency is applied. - RGBA — red, green, blue, and alpha (
rgba(60, 70, 240, 0.5)). - HSLA — hue, saturation, lightness, and alpha (
hsla(235, 87%, 59%, 0.5)).
Switching formats only changes how the value is displayed — the colour itself stays the same. You can type a value in any format the picker understands and it will be converted automatically.
Transparency is supported on every colour setting. Lower the transparency slider to let an image or background show through — useful for Lightbox backgrounds, overlays, and shadow colours.
Where Colour Settings Appear #
The same control is used everywhere a colour can be set. The most common places are:
- Borders and shadows — Border Color and Shadow Color for thumbnails, in the Styling panel.
- Captions — Title Color and Description Color for caption text.
- Lightbox — background, toolbar, navigation arrows, thumbnail strip, info panel, spinner, and progress indicator colours.
- Filter bar — button, dropdown, and checkbox colours for tag and date filters.
- Loading icon — the colour of the loading animation shown while items load.
Each of these settings is covered in detail in the article for its own feature. The colour control behaves the same way in every one of them.
Resetting a Colour #
To return a colour to its default, open the picker and re-enter the default value shown as the field’s placeholder, or set the value to match the original. Colours are saved with the rest of your Gallery settings, so a change only takes effect on the frontend after you save the Gallery.
Coming Soon — Global Color Palette (Pro Starter) #
Right now, colours are set one control at a time, per Gallery. The Global Color Palette (coming in Pro Starter) will let you create and manage your own palette of brand colours in one central place, then reuse those colours across every Gallery and Album. Update a colour once and it stays consistent everywhere — a single source of truth for your design system, so your brand colours never drift from one Gallery to the next.
