> ## Documentation Index > Fetch the complete documentation index at: https://docs.shopify.lightsout.agency/llms.txt > Use this file to discover all available pages before exploring further. # Set up color schemes in Facet > Create and edit the color schemes Facet uses for backgrounds, text, buttons, borders and surfaces, then apply a scheme to any section or block. Facet colors your store with color schemes. A color scheme is a named set of colors for backgrounds, text, buttons, borders and surfaces. You define schemes once in Theme settings, then pick a scheme on each section, and on many blocks, so a change to one scheme updates every place that uses it. ## What these settings control * The page background and text color of every section. * The colors of primary and secondary buttons, including their hover state. * Borders and dividers, such as input outlines and lines between rows. * Surfaces: the tinted backgrounds of form fields, tables and card frames. * The accent color for keyboard focus outlines and small highlights. ## How to access **1. Open the Theme Customizer** In your Shopify admin, open **Online Store**, then **Themes**, and click **Customize** next to Facet. **2. Open Theme settings** Click the **Theme settings** icon in the left sidebar. **3. Open Colors** Expand **Colors**. Click a scheme to edit it, or click **Add scheme** to create a new one. ![The theme editor with Theme settings open and the Colors group expanded in the sidebar.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/theme-settings/colors/colors-location.jpg?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=79938a512be789e2462c9c15b18f2409) ![Theme editor sidebar showing the Colors theme settings: Colors, Schemes.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/theme-settings/colors/colors-settings-1.png?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=6315053073aa79ea30cf7b6b686d3ca4) ## Scheme settings Each color scheme has the same set of colors. ![The theme editor with the color scheme editor open for Scheme 1, listing its color roles.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/theme-settings/colors/colors-scheme-location.jpg?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=a679eefd013b83914cfa4c549d3d1546) ![Theme editor sidebar showing the Color scheme (Scheme 1) settings: Background, Text, Button background, Button label, Button hover background, Button hover label, and more.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/theme-settings/colors/colors-scheme-settings-1.png?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=4c91cfbd2177271608743e3d958ad9b0) ![Theme editor sidebar showing the Color scheme (Scheme 1) settings (part 2, scrolled): Button background, Button label, Button hover background, Button hover label, Secondary button label, Border, and more.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/theme-settings/colors/colors-scheme-settings-2.png?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=5c54d28f802da780eb88f68c603216c9) > [accordion] Background > > The background color of any section or block that uses this scheme. Default: `#F8F6F2`. > [accordion] Text > > Body text, headings and icons. Default: `#1A1A1A`. > [accordion] Button background > > The fill of primary buttons, such as **Add to cart**. Also used for the outline of primary buttons. Default: `#1A1A1A`. > [accordion] Button label > > The text on primary buttons. Default: `#FFFFFF`. > [accordion] Button hover background > > The fill of a primary button while the pointer is over it. If you leave it empty, Facet uses the **Accent** color. Default: `#656B54`. > [accordion] Button hover label > > The text on a primary button while the pointer is over it. If you leave it empty, Facet uses the **Button label** color. Default: `#FFFFFF`. > [accordion] Secondary button label > > The text and outline of secondary (outlined) buttons. Also used for links. Default: `#1A1A1A`. > [accordion] Border > > Dividers, input outlines and the borders around cards and panels. Default: `#808080`. > [accordion] Accent > > The outline that shows around buttons and links when a shopper moves through the page with the keyboard, the background of tertiary buttons, and the active dot on sliders. Default: `#656B54`. > [accordion] Surface > > Tinted areas inside a section: form fields and dropdowns, table headers, and the frames behind product and article pictures. Default: `#EAE4D8`. > [accordion] Surface text > > Text shown on a surface, such as the text a shopper types into a form field. Default: `#1A1A1A`. ## Apply a scheme Most sections have a **Color scheme** setting under **Common settings**, and many blocks, such as slides and product cards, have their own. Pick the scheme you want for that section or block. The first scheme in the list is the store default: it colors the page itself and anything that has no scheme of its own. > [!NOTE] > > Some settings use a scheme for one part only. For example, the hero banner's **Dots color scheme** colors only the slider dots, and the band behind them keeps the section's scheme. The setting's help text in the Theme Customizer says which part it colors. ## Best practices * **Check contrast.** Make sure **Text** reads clearly on **Background**, and **Button label** on **Button background**. Low contrast makes the store harder to use and to read on phones outdoors. * **Keep surfaces close to the background.** A surface a few shades darker or lighter than the background frames content without competing with it. * **Edit, don't duplicate.** To change the look of every section that shares a scheme, edit that scheme instead of creating a new one. * **Give each scheme one role.** A short list of schemes, such as one light, one tinted and one dark, is easier to keep consistent than one scheme per section. ## Related guides > [card] [Header](https://docs.shopify.lightsout.agency/themes/facet/header/header.md) > > Pick the header, search drawer and mega menu card schemes. > [card] [Hero banner](https://docs.shopify.lightsout.agency/themes/facet/sections/hero-banner.md) > > Give each slide, the dots and the arrows their own scheme. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.