Button

Building your own color scheme

The pre-prepared CSS rules provide several stylish options for laying out your page colors, but if you'd prefer to dive-in and do it yourself it's very easy to customize your pages with your own color scheme.

The first thing we'll need is the CSS layout which we can modify; you could manually type this in but it far easier to just grab whichever color scheme you want to use as a base from the presets available below. For this example, we'll use the Brown colour preset.

Creating Your Colour Scheme

To create your own colour scheme, follow these steps:

  1. Open the CSS Tool in the Publii app, which you can find in the Tools section. Copy your chosen base colour scheme code and paste it into the tool.
  2. If you only want to change the colours for the elements, you can modify the colour codes in the first group of variables at the beginning of the code. Change the colour codes as needed, then save changes; your new colours will be visible when you preview a page.
  3. More advanced users can change the colours of specific elements by modifying the var values in the second group of variables that correspond to the element you want to change e.g. to change the text colour from the primary colour value to the secondary colour value, we'd change the text-color-normal: var(--primary-color line to text-color-normal: var(--secondary-color).

Brown

:root {
  --dark: #3a3326;
  --gray-0: #443c2d;
  --gray-1: #645842;
  --gray-2: #837357;
  --gray-3: #c3b8a4;
  --light: #eae6df;
  --lighter: #f6f5f2;
  --yellow: #FFC439;
  --red: #EC1037;
  --blue: #3773EB;
  --green: #5CB85C;
  --white: #f6f5f2;
  --white-rgb: 191, 179, 158;
  --primary-color: #BFB39E;
  --secondary-color: #CC6600;
  --section-bg:  #f6f5f2;
  --top-bg: #212224;
  --middle-bg: #212224;
  --bottom-bg: #212224;
  --navbar-bg: var(--top-bg);
  --navbar-link-color: var(--primary-color);
  --navbar-link-color-hover: var(--white);
  --navbar-font-weight: var(--font-weight-semibold);
  --navbar-button-primary-border: var(--primary-color);
  --navbar-button-primary-border-hover: var(--primary-color);
  --navbar-button-primary-color: var(--primary-color);
  --navbar-button-primary-color-hover: var(--primary-color);
  --navbar-icon: var(--primary-color);
  --navbar-icon-hover: var(--primary-color);
  --navbar-border: rgba(var(--white-rgb), .09);
  --s1-bg: var(--top-bg);
  --s1-text-color: var(--primary-color);
  --s1-headings-color: var(--primary-color);
  --s1-link-color: var(--primary-color);
  --s1-link-color-hover: var(--white);
  --s1-link-invert-color: var(--white);
  --s1-link-invert-color-hover: var(--primary-color);
  --s2-bg: var(--middle-bg);
  --s2-text-color: var(--primary-color);
  --s2-headings-color: var(--primary-color);
  --s2-link-color: var(--primary-color);
  --s2-link-color-hover: var(--white);
  --s2-link-invert-color: var(--white);
  --s2-link-invert-color-hover: var(--primary-color);
  --s2-button-primary-border: var(--primary-color);
  --s2-button-primary-border-hover: var(--white);
  --s2-button-primary-color: var(--primary-color);
  --s2-button-primary-color-hover: var(--white);
  --s2-image-placeholder: #26272a;
  --s3-bg: var(--bottom-bg);
  --s3-text-color: var(--primary-color);
  --s3-headings-color: var(--primary-color);
  --s3-link-color: var(--primary-color);
  --s3-link-color-hover: var(--white);
  --s3-link-invert-color: var(--white);
  --s3-link-invert-color-hover: var(--primary-color);
  --s3-button-primary-border: var(--primary-color);
  --s3-button-primary-border-hover: var(--primary-color);
  --s3-button-primary-color: var(--primary-color);
  --s3-button-primary-color-hover: var(--primary-color);
  --s3-image-overlay: var(--top-bg);
  --s3-image-overlay-hover: var(--primary-color);
  --s3-icon: var(--primary-color);
  --slider-text-color: var(--white);
  --slider-link-color: var(--white);
  --slider-link-color-hover: var(--primary-color);
  --logo-color: var(--primary-color);
  --headings-color: var(--dark);
  --text-color: var(--gray-0);
  --text-color-lighter: var(--gray-1);
  --text-color-lightest: var(--gray-2);
  --link-color: var(--dark);
  --link-color-hover: var(--secondary-color);
  --link-invert-color: var(--secondary-color);
  --link-invert-color-hover: var(--dark);
  --border-color-normal: var(--gray-3);
  --border-color-light: var(--light);
  --border-color-lightest: rgba(var(--white-rgb), .09);
  --button-primary-border: var(--secondary-color);
  --button-primary-color: var(--secondary-color);
  --button-primary-border-hover: var(--dark);
  --button-primary-color-hover: var(--dark);
  --input-background: var(--white);
  --input-border-color: var(--gray-3);
  --input-border-color-focus: var(--secondary-color);
  --input-text-color: var(--gray-1);
  --code-inline-background: var(--light);
  --dropdown-menu-bg: #2f3033;
  --dropdown-menu-link-color: var(--primary-color);
  --dropdown-menu-link-color-hover: var(--white);
  --dropdown-menu-link-background-hover: rgba(var(--white-rgb), .07);
  --mobile-menu-link-background-bg: var(--top-bg);
  --mobile-menu-link-color: var(--primary-color);
  --mobile-menu-link-color-hover: var(--white);
  --icon: var(--gray-1);
  --icon-hover: var(--secondary-color);
  --image-placeholder: var(--light);
  --image-overlay-hover: #212224;
  --highlight-message: var(--gray-3);
  --info-message: #71B8ED;
  --success-message: #5BC68A;
  --warning-message: var(--secondary-color);
  --transition: all 0.24s ease; 
}

Navy

:root {
  --dark: #272e3e;
  --gray-0: #3d414b;
  --gray-1: #525765;
  --gray-2: #8592b2;
  --gray-3: #cbd1df;
  --light: #f1f2f6;
  --lighter: #f2f3f7;
  --yellow: #FFC439;
  --red: #EC1037;
  --blue: #3773EB;
  --green: #5CB85C;
  --white: #fff;
  --white-rgb: 255, 255, 255;
  --primary-color: #232938;
  --secondary-color: #CC4E30;
  --section-bg:  #fff;
  --top-bg: #232938;
  --middle-bg: #FDF8F7;
  --bottom-bg: #232938;
  --navbar-bg: var(--top-bg);
  --navbar-link-color: var(--white);
  --navbar-link-color-hover: var(--secondary-color);
  --navbar-font-weight: var(--font-weight-semibold);
  --navbar-button-primary-border: var(--white);
  --navbar-button-primary-border-hover: var(--secondary-color);
  --navbar-button-primary-color: var(--white);
  --navbar-button-primary-color-hover: var(--secondary-color);
  --navbar-icon: var(--white);
  --navbar-icon-hover: var(--secondary-color);
  --navbar-border: rgba(var(--white-rgb), .05);
  --s1-bg: var(--top-bg);
  --s1-text-color: var(--light);
  --s1-headings-color: var(--white);
  --s1-link-color: var(--white);
  --s1-link-color-hover: var(--secondary-color);
  --s1-link-invert-color: var(--white-color);
  --s1-link-invert-color-hover: var(--secondary-color);
  --s2-bg: var(--middle-bg);
  --s2-text-color: var(--primary-color);
  --s2-headings-color: var(--primary-color);
  --s2-link-color: var(--primary-color);
  --s2-link-color-hover: var(--secondary-color);
  --s2-link-invert-color: var(--secondary-color);
  --s2-link-invert-color-hover: var(--primary-color);
  --s2-button-primary-border: var(--primary-color);
  --s2-button-primary-border-hover: var(--secondary-color);
  --s2-button-primary-color: var(--primary-color);
  --s2-button-primary-color-hover: var(--secondary-color);
  --s2-image-placeholder: #fbefed;
  --s3-bg: var(--bottom-bg);
  --s3-text-color: var(--light);
  --s3-headings-color: var(--white);
  --s3-link-color: var(--white);
  --s3-link-color-hover: var(--secondary-color);
  --s3-link-invert-color: var(--secondary-color);
  --s3-link-invert-color-hover: var(--white);
  --s3-button-primary-border: var(--white);
  --s3-button-primary-border-hover: var(--secondary-color);
  --s3-button-primary-color: var(--white);
  --s3-button-primary-color-hover: var(--secondary-color);
  --s3-image-overlay: var(--primary-color);
  --s3-image-overlay-hover: var(--secondary-color);
  --s3-icon: var(--white);
  --slider-text-color: var(--white);
  --slider-link-color: var(--white);
  --slider-link-color-hover: var(--secondary-color);
  --logo-color: var(--white);
  --headings-color: var(--dark);
  --text-color: var(--gray-0);
  --text-color-lighter: var(--gray-1);
  --text-color-lightest: var(--gray-2);
  --link-color: var(--dark);
  --link-color-hover: var(--secondary-color);
  --link-invert-color: var(--secondary-color);
  --link-invert-color-hover: var(--dark);
  --border-color-normal: var(--gray-3);
  --border-color-light: var(--light);
  --border-color-lightest: rgba(var(--white-rgb), .05);
  --button-primary-border: var(--secondary-color);
  --button-primary-color: var(--secondary-color);
  --button-primary-border-hover: var(--dark);
  --button-primary-color-hover: var(--dark);
  --input-background: var(--white);
  --input-border-color: var(--gray-3);
  --input-border-color-focus: var(--secondary-color);
  --input-text-color: var(--gray-1);
  --code-inline-background: #fbefed;
  --dropdown-menu-bg: var(--secondary-color);
  --dropdown-menu-link-color: var(--white);
  --dropdown-menu-link-color-hover: var(--white);
  --dropdown-menu-link-background-hover: rgba(var(--white-rgb), .15);
  --mobile-menu-link-background-bg: var(--top-bg);
  --mobile-menu-link-color: var(--white);
  --mobile-menu-link-color-hover: var(--gray-2);
  --icon: var(--gray-0);
  --icon-hover: var(--secondary-color);
  --image-placeholder: var(--middle-bg);
  --image-overlay-hover: var(--dark);
  --highlight-message: var(--gray-3);
  --info-message: #71B8ED;
  --success-message: #5BC68A;
  --warning-message: var(--secondary-color);
  --transition: all 0.24s ease; 
}

Beige

:root {
  --dark: #1c2121;
  --gray-0: #3d414b;
  --gray-1: #495053;
  --gray-2: #616b6e;
  --gray-3: #bbc0be;
  --gray-4: #eae6df;
  --light: #fbf7ee;
  --lighter: #fbf7ee;
  --yellow: #f0af4b;
  --red: #EC1037;
  --blue: #3773EB;
  --green: #5CB85C;
  --white: #fff;
  --white-rgb: 255, 255, 255;
  --primary-color: #232938;
  --secondary-color: #df514b;
  --section-bg: var(--white);
  --top-bg: var(--lighter);
  --middle-bg: var(--lighter);
  --bottom-bg: var(--primary-color);
  --navbar-bg: var(--top-bg);
  --navbar-link-color: var(--gray-1);
  --navbar-link-color-hover: var(--yellow);
  --navbar-font-weight: var(--font-weight-semibold);
  --navbar-button-primary-border: var(--primary-color);
  --navbar-button-primary-border-hover: var(--yellow);
  --navbar-button-primary-color: var(--primary-color);
  --navbar-button-primary-color-hover: var(--yellow);
  --navbar-icon: var(--primary-color);
  --navbar-icon-hover: var(--yellow);
  --navbar-border: var(--gray-4);
  --s1-bg: var(--lighter);
  --s1-text-color: var(--gray-1);
  --s1-headings-color: var(--primary-color);
  --s1-link-color: var(--primary-color);
  --s1-link-color-hover: var(--yellow);
  --s1-link-invert-color: var(--primary-color);
  --s1-link-invert-color-hover: var(--yellow);
  --s2-bg: var(--middle-bg);
  --s2-text-color: var(--primary-color);
  --s2-headings-color: var(--primary-color);
  --s2-link-color: var(--primary-color);
  --s2-link-color-hover: var(--yellow);
  --s2-link-invert-color: var(--yellow);
  --s2-link-invert-color-hover: var(--primary-color);
  --s2-button-primary-border: var(--primary-color);
  --s2-button-primary-border-hover: var(--yellow);
  --s2-button-primary-color: var(--primary-color);
  --s2-button-primary-color-hover: var(--yellow);
  --s2-image-placeholder: #f6eeda;
  --s3-bg: var(--bottom-bg);
  --s3-text-color: var(--gray-3);
  --s3-headings-color: var(--white);
  --s3-link-color: var(--gray-3);
  --s3-link-color-hover: var(--yellow);
  --s3-link-invert-color: var(--yellow);
  --s3-link-invert-color-hover: var(--gray-3);
  --s3-button-primary-border: var(--yellow);
  --s3-button-primary-border-hover: var(--white);
  --s3-button-primary-color: var(--yellow);
  --s3-button-primary-color-hover: var(--white);
  --s3-image-overlay: var(--primary-color);
  --s3-image-overlay-hover: var(--yellow);
  --s3-icon: var(--white);
  --slider-text-color: var(--white);
  --slider-link-color: var(--white);
  --slider-link-color-hover: var(--secondary-color);
  --logo-color: var(--gray-0);
  --headings-color: var(--primary-color);
  --text-color: var(--gray-1);
  --text-color-lighter: var(--gray-2);
  --text-color-lightest: var(--gray-2);
  --link-color: var(--dark);
  --link-color-hover: var(--secondary-color);
  --link-invert-color: var(--secondary-color);
  --link-invert-color-hover: var(--dark);
  --border-color-normal: var(--gray-3);
  --border-color-light: var(--gray-4);
  --border-color-lightest: rgba(var(--white-rgb), .06);
  --button-primary-border: var(--secondary-color);
  --button-primary-color: var(--secondary-color);
  --button-primary-border-hover: var(--dark);
  --button-primary-color-hover: var(--dark);
  --input-background: var(--white);
  --input-border-color: var(--gray-3);
  --input-border-color-focus: var(--secondary-color);
  --input-text-color: var(--gray-1);
  --code-inline-background: #fbefed;
  --dropdown-menu-bg: var(--yellow);
  --dropdown-menu-link-color: var(--white);
  --dropdown-menu-link-color-hover: var(--white);
  --dropdown-menu-link-background-hover: rgba(var(--white-rgb), .2);
  --mobile-menu-link-background-bg: var(--top-bg);
  --mobile-menu-link-color: var(--gray-1);
  --mobile-menu-link-color-hover: var(--secondary-color);
  --icon: var(--gray-0);
  --icon-hover: var(--secondary-color);
  --image-placeholder: var(--middle-bg);
  --image-overlay-hover: var(--dark);
  --highlight-message: var(--gray-3);
  --info-message: #71B8ED;
  --success-message: #5BC68A;
  --warning-message: var(--secondary-color);
  --transition: all 0.24s ease; 
}

Gray

:root {
  --dark:#1b1d21;
  --gray-0: #24272c;
  --gray-1: #33383f;
  --gray-2: #424751;
  --gray-3: #575f6b;
  --light: #dcdcdc;
  --lighter: #eeeeee;
  --yellow: #f0af4b;
  --red: #EC1037;
  --blue: #3773EB;
  --green: #5CB85C;
  --white: #ededed;
  --white-rgb: 255, 255, 255;
  --primary-color: #393e46;
  --secondary-color: #b55400;
  --section-bg: var(--lighter);
  --top-bg: var(--lighter);
  --middle-bg: #b55400;
  --bottom-bg: var(--primary-color);
  --navbar-bg: var(--top-bg);
  --navbar-link-color: var(--gray-1);
  --navbar-link-color-hover: var(--secondary-color);
  --navbar-font-weight: var(--font-weight-semibold);
  --navbar-button-primary-border: var(--primary-color);
  --navbar-button-primary-border-hover: var(--secondary-color);
  --navbar-button-primary-color: var(--primary-color);
  --navbar-button-primary-color-hover: var(--secondary-color);
  --navbar-icon: var(--primary-color);
  --navbar-icon-hover: var(--secondary-color);
  --navbar-border: var(--light);
  --s1-bg: var(--lighter);
  --s1-text-color: var(--gray-3);
  --s1-headings-color: var(--gray-1);
  --s1-link-color: var(--secondary-color);
  --s1-link-color-hover: var(--primary-color);
  --s1-link-invert-color: var(--secondary-color);
  --s1-link-invert-color-hover: var(--primary-color);
  --s2-bg: var(--middle-bg);
  --s2-text-color: var(--white);
  --s2-headings-color: var(--white);
  --s2-link-color: var(--white);
  --s2-link-color-hover: var(--primary-color);
  --s2-link-invert-color: var(--primary-color);
  --s2-link-invert-color-hover: var(--primary-color);
  --s2-button-primary-border: var(--white);
  --s2-button-primary-border-hover: var(--primary-color);
  --s2-button-primary-color: var(--white);
  --s2-button-primary-color-hover: var(--primary-color);
  --s2-image-placeholder: #d2670b;
  --s3-bg: var(--bottom-bg);
  --s3-text-color: var(--light);
  --s3-headings-color: var(--white);
  --s3-link-color: var(--light);
  --s3-link-color-hover: var(--secondary-color);
  --s3-link-invert-color: var(--secondary-color);
  --s3-link-invert-color-hover: var(--light);
  --s3-button-primary-border: var(--light);
  --s3-button-primary-border-hover: var(--secondary-color);
  --s3-button-primary-color: var(--light);
  --s3-button-primary-color-hover: var(--secondary-color);
  --s3-image-overlay: var(--primary-color);
  --s3-image-overlay-hover: var(--secondary-color);
  --s3-icon: var(--white);
  --slider-text-color: var(--white);
  --slider-link-color: var(--white);
  --slider-link-color-hover: var(--secondary-color);
  --logo-color: var(--gray-0);
  --headings-color: var(--gray-1);
  --text-color: var(--gray-2);
  --text-color-lighter: var(--gray-3);
  --text-color-lightest: var(--gray-2);
  --link-color: var(--gray-1);
  --link-color-hover: var(--secondary-color);
  --link-invert-color: var(--secondary-color);
  --link-invert-color-hover: var(--gray-1);
  --border-color-normal: var(--gray-3);
  --border-color-light: var(--light);
  --border-color-lightest: rgba(var(--white-rgb), .12);
  --button-primary-border: var(--secondary-color);
  --button-primary-color: var(--secondary-color);
  --button-primary-border-hover: var(--gray-1);
  --button-primary-color-hover: var(--gray-1);
  --input-background: var(--white);
  --input-border-color: var(--gray-3);
  --input-border-color-focus: var(--secondary-color);
  --input-text-color: var(--gray-1);
  --code-inline-background: var(--light);
  --dropdown-menu-bg: var(--primary-color);
  --dropdown-menu-link-color: var(--white);
  --dropdown-menu-link-color-hover: var(--white);
  --dropdown-menu-link-background-hover: rgba(var(--white-rgb), .05);
  --mobile-menu-link-background-bg: var(--top-bg);
  --mobile-menu-link-color: var(--gray-1);
  --mobile-menu-link-color-hover: var(--secondary-color);
  --icon: var(--gray-0);
  --icon-hover: var(--secondary-color);
  --image-placeholder: var(--light);
  --image-overlay-hover: var(--gray-1);
  --highlight-message: var(--gray-3);
  --info-message: #71B8ED;
  --success-message: #5BC68A;
  --warning-message: var(--secondary-color);
  --transition: all 0.24s ease; 
}

Subscribe

Stay connected