Brickspace Lab
Contact usContact ShopifyTry a theme
Paper
Paper
  • Paper documentation
  • Getting started
    • Theme basics
    • Theme settings
      • Colors
      • Typography
      • Borders
      • Quick Add
  • Guides
    • Products
      • Product badges
      • Product subtitles
      • Variant swatches
      • Fixed buy buttons
      • Replacing “Add to cart”
      • Dynamic variant images
      • Variant filtering
      • Disabling Quick add
      • Customizing Filters
      • Gift cards
      • Quantity picker
      • Subscription options
      • Sibling products
      • Bundled products
      • Custom fields
      • Content drawers
  • Collections
    • Adding Tag Filtering
    • Adding Nested Menu
    • Collection Blocks
  • Sitewide
    • Using device specific visibility
    • Dynamic discount popups
    • Creating a Mapbox API key
    • Designing your menu
    • Migrating custom changes
    • Blog template
    • Search results
  • Sections
  • Sitewide
    • Header
    • Cart drawer
    • Custom liquid
  • Navigation
    • Navigation slider
  • Content and Media
    • Slideshow
    • Collage
    • Video
    • Alternative banner
    • Banner
    • Collapsible content
    • Blog posts grid
    • Icon grid
    • Discount banner
    • Rich text
    • Logo list
    • Slider
    • Testimonials
    • Countdown
    • Image comparison
    • Image hotspot
  • Products and Collections
    • Featured product
    • Featured collection grid
    • Featured collection slider
    • Collection list grid
    • Alternative collection grid
    • Comparison table
    • Recently viewed
    • Collection list slider
  • Forms
    • Email sign-up
    • Contact form
    • Store locator
  • General
    • Changelog
      • v8.0.2
      • v8.0.1
      • v8.0.0
      • v7.6.2
      • v7.6.1
      • v7.6.0
      • v7.5.0
      • v7.4.0
      • v7.3.0
      • v7.2.1
      • v7.2.0
      • v7.1.2
      • v7.1.1
      • v7.1.0
      • v7.0.0
      • v6.2.0
      • v6.1.7
      • v6.1.6
      • v6.1.5
      • v6.1.4
      • v6.1.3
      • v6.1.2
      • v6.1.1
      • v6.1.0
      • v6.0.1
      • v6.0.0
      • v5.2.0
      • v5.1.0
      • v5.0.1
      • v5.0.0
      • v4.1.1
      • v4.1.0
      • v4.0.0
      • v3.0.2
      • v3.0.1
      • v3.0.0
      • v2.0.0
      • v1.2.2
      • v1.2.1
      • v1.2.0
      • v1.0.0
    • Known issues and troubleshooting
      • v8.0.1
    • Cloning a demo theme
      • Poster
      • Parts
      • Pastel
      • Page 3
      • Page 4
Powered by GitBook
LogoLogo

Try a theme

  • Paper
  • Space
  • Keystone

Resources

  • Get theme support
  • Services
  • Contact
On this page
  • FAQs
  • Getting started
  • Understanding your color schemes

Was this helpful?

Edit on GitHub
  1. Getting started
  2. Theme settings

Colors

Last updated 1 month ago

Was this helpful?

Although it's possible to jump into Paper and start picking colors, we recommend doing a bit of prep work beforehand. This ensures you have a solid idea of the direction of your brand and the colors you want to use.

If you don't already have a set color palette for your brand, it's useful to spend some time deciding on this direction. You can use free color palette generators, such as Coolors, to help with this process.

There are a handful of great resources online that can help guide your color selection process, including

  • Brand Colors: How to Choose the Perfect Palette

  • Color Psychology: How Color Meanings Affect Your Brand

FAQs

How can I change the accent colors in my theme settings?

How do I change the top bar color on mobile devices?

Update the Mobile bar to change top bar above the website. This is used to create a more finished look. This is currently only supported on some mobile devices. We recommend matching your announcement bar to the Mobile bar color.

Getting started

You can adjust all colors in Paper using the global color settings. To achieve better results and improve design implementation, it's important to understand how and where each setting applies colors differently.

1

Navigate to color settings

  • Color settings can be accessed within your theme editor by navigating to: Theme settings > Colors

2

Select default colors

  • Background: Choose a light background to enhance readability. This default background color will be used across your site. If changed, adjust the Main text color for a strong contrast.

  • Main text: Select a color with high contrast against the Background color. For a light background, opt for a dark text color.

  • Light text: The Light text color serves as an alternative for specific sections, such as dark banner images. This additional setting provides alternative text color options throughout the theme.

  • Border: Several border shades are generated from this color. The default and lightest shade will exactly match the chosen color. Section-specific settings offer the option to use a darker version.

3

Selecting primary colors

  • Background: This color serves as a background for elements with the "Primary" color scheme. The primary background color is used as the main accent color throughout the theme, often applied to call-to-action buttons. We recommend using your primary brand color.

  • Text: This color is used for text within elements featuring the "Primary" color scheme.

4

Selecting secondary colors

  • Background: This color serves as a background for elements with the "Secondary" color scheme. The secondary color scheme is used sparingly throughout your theme. For example you’ll see this applied to the quick-add buttons.

  • Text: This color is used for text within elements featuring the "Secondary" color scheme.

5

Selecting tertiary colors

  • Background: This color serves as a background for elements with the "Tertiary" color scheme. The secondary color scheme is used not used by default in your theme. The tertiary colors will only be seen if it’s selected from section settings.

  • Text: This color is used for text within elements featuring the "Tertiary" color scheme.

6

Selecting extra colors

  • Mobile bar: The Mobile bar color updates the user's top bar above the website. This is used to create a more finished look. This is currently only supported on some mobile devices. We recommend matching your announcement bar to the Mobile bar color.

Understanding your color schemes

Throughout your theme you'll see in a number of different places color settings that you can use. These settings are generated from your global color settings.

Background color

Body

Transparent

Shade

Border color

Subtle

Strong

Text color

Body and Body Neutral:

  • Body is the base color.

  • Body Neutral is a blend of the Body color and Primary Accent.

Accent 1-3 and Shade 1-3:

  • Accent 1-3 represents darker shades of the Body color.

  • Shade 1-3 also represents darker shades of the Body color but with slight opacity, making them semi-transparent.

Primary, Secondary, and Tertiary Colors:

  • These colors are directly derived from the color settings.

Additional Notes:

  • If the Body color is dark, Accent and Shade can instead be lighter shades of the Body color.

  • For example, if the background color is black, Accent 1-3 will be lighter shades rather than darker.