Use your own colours on your shop

Pick your own button, background, text and card colours in Design or through ChatGPT or Claude. Pasal checks each pair can be read and offers a fix if it cannot.

Most templates come with three colourways. If none of them is your brand, you can set your own colours instead. Pasal checks every pair before it saves, so shoppers can always read your shop.

Set them in Design

Open Design and tap Template, colours & logo.
Under the three colourways, press Custom colours. It starts from the colourway you are wearing, already readable.
Change any of Buttons and links, Background and Text. Tap the colour to use your phone's colour picker, or type your brand's six-digit code, like #2a1d12. The # is optional, and a three-digit code such as #abc is filled out to six when you leave the box.
Cards and panels is optional. Leave Work it out for me ticked and Pasal picks a card colour from your background and text, or untick it and choose your own.

The Sample under the boxes shows the page, a card and an Add to bag button in your colours. A colour that passes the check saves straight away; there is no Save button for colours.

You never pick the words on buttons. Pasal uses white, black, or your own text or background colour, whichever reads on the button. Buttons wear your colour exactly. Links and prices in that colour are drawn a shade darker (lighter on a dark background) so they read on the page and on cards. The square with your shop's first letter wears your button colour too.

The readability check

Text on the background: at least 4.5 to 1.
Text on cards and panels (when you choose them): at least 4.5 to 1.
Buttons against the background: at least 3 to 1, so a button does not fade into the page.

If a pick falls short, the tab says which pair and by how much, for example:

"Text on this background measures 2.1:1. Shoppers need at least 4.5:1 to read it."
"Text on these cards measures 3.2:1. It needs at least 4.5:1."
"Buttons on this background measure 1.8:1, so they would fade into the page. They need at least 3:1."

Beside each one is a Use #… button with a colour that passes. It keeps your colour's shade and only makes it darker or lighter, aiming well past the minimum: about 7 to 1 for text and 3.5 to 1 for buttons, so the quieter text Pasal works out from it still reads. On a mid-tone background where that is out of reach, it offers the furthest step that still passes, and black or white only as a last resort.

Until every pair passes, the tab says Not saved yet and your shop keeps its last readable colours. Customers never see a half-finished pick.

Set them through ChatGPT or Claude

If you have connected Pasal to ChatGPT or Claude, you can ask in words, for example "make the buttons my brand red, #b4234a, on a cream background". The assistant sets the same three or four colours and Pasal checks them by the same rules. A pair that cannot be read is refused with the measured ratio and a colour that would pass. A colour must be written as six-digit hex; a short code like #abc is refused with the six-digit version to use. A preview link shows the colours without saving, and saving needs your yes on pasal.studio. See Design your shop with ChatGPT and Connect Pasal to ChatGPT or Claude.

Which templates take them

Minimal, Cafe Counter, Blush Bakery, Electronics, Restaurant, Kastha, Sirjana, Atelier, Akhada, Gahana, Mart, Mithai, Upahaar, Bhansa, Shobha and Durbar.

Not on Signal and Domain, which have one fixed look, or on Garage, Cake Shop, Aavya Special, Kanch, Shringar, Mandap, Chautari, Yantra, Kaath, Jhilmil and Aaina, which draw some text and panels in colours of their own. On those the Design tab shows a line saying why in place of Custom colours; pick one of the template's colourways instead. ChatGPT and Claude are refused with the same reason. Colours you already saved stay saved and come back when you move to a template that takes them.

Go back to the template's colours

Press Back to the template's colours under the boxes, or tap any of the three colourways. Either takes your own colours off. Through ChatGPT or Claude, ask for the template's own colours. Undoing a saved look brings back the colours you had before it.

For changing the whole template, see Pick a template, keep your colours.