Colorblind and creating a color palette for Quasar and Amplify

9 min readJan 18, 2022

How to create a website color palette when you can’t see colors.

This article is an offshoot of work to create an app to manage content for BikeMechanic.info, OpenSourceBike.com, and other domains we’re starting to build out. It covers how I created a color palette in an Amplify-powered Quasar app. The styling covers Quasar 2 and the new Amplify Authentication module for Vue 3. The underlying concepts of color theory and the tools used could define a palette for any framework or toolset.

Amplify has improved the Authentication module and made it much more customizable than the previous versions. The new code was released in November of 2021 and how and where to properly customize it in a Vue 3 app is not yet well documented. In this article, I provide a solution using SCSS in the Vue component.

The Initial State

The Quasar and Amplify colors don’t look good together so changes need to be made somewhere. I’m choosing to override both so neither looks too cookie-cutter.

Original default Amplify and Quasar color schemes together

Start with the Quasar Theme Builder

All of our pages depend upon the Quasar styling so it is the most important to “get right”. We’ll make the Amplify component styling follow it. The Quasar Theme Builder helps in understanding the Quasar styling as well as in defining a custom theme.

We will only override the Primary, Secondary, and Accent colors. The remaining colors should remain consistent between sites to aid the visitors. It would be confusing to users if we used red for info and green for alerts. I’ll cover “dark mode” in a future article.

Screen shot of the Quasar Theme Builder defaults and options

Choosing a Primary Color

If you already have a brand color defined it is an ideal candidate. If you don’t have a brand color defined, whatever is chosen as a primary color for your website becomes the brand color from the visitors' perspective. There are plenty of articles about choosing a brand color and the effect of different colors on emotions and behavior.

One older piece of advice that should be ignored is making sure the color is “web-safe”. In the early days of the web, browsers did not support displaying more than 256 colors at the same time. With modern web browsers and monitors, it is not necessary to limit yourself to these colors.

Don’t overthink it. Changing the color on the website is simple, use it as the place to experiment. If you find something you like you may want to update your business cards to match it.

For the Open Source Bike project, I chose a dark green to help remind people of the low environmental impact of bicycles and reinforce they can be an important “green” solution. Specifically, I’m using Salem green from the Flat UI Color Picker.

We use both the hex code and the HSL code. The HSL code is better for programmatically tweaking the color.
Hex: #1e824c
HSL: (148, 63%, 31%);

Salem green color swatches with HEX and HSL codes.

Choosing a Call to Action Button Color

The second most important decision after the brand color is the call to action (CTA) color. This isn’t part of the Quasar theme but is something I feel is important to think about early on. The CTA color is used on important buttons when you want the user to choose an optional action. These are the choices your visitors need to make for your site to be successful.

This doesn’t mean all submit buttons should use the CTA color, most buttons should use a color chosen to provide a pleasing UI. Overusing the CTA color in places it is not needed will lessen its impact and effectiveness.

We let our choice of CTA color guide our choice for Quasar’s secondary and accent colors. If either of those is close to the CTA color it can confuse users about the importance or intent of the colored content. At the same time, we don’t want the CTA color to seem garish alongside the secondary and accent colors.

I may come back and tweak this color a little after the next few steps. It might take a few iterations through to get something that looks good combined. By using good color theory and tools we should have a usable UI at each iteration.

I don’t want a green CTA since my primary color is green. Based on studies of effectiveness I’d like something in the red/orange part of the spectrum, closer to orange so it doesn’t look like an x-mas theme.

Using the Flat UI Color Pi8cker again I chose Ecstasy orange.
Hex: #f9690e
HSL: (23, 95%, 52%);

Defining a Secondary Color

Color theory offers a few color schemes using the RGB color wheel that have proven effective in defining color palettes for websites. I won’t go into depth on them here, Canva does a good job of explaining them with examples.
* complementary
*monochromatic
* analogous
* triadic
*tetradic

In brief, complementary colors are directly opposite the main color on the color wheel. Monochromatic schemes use shades and tints of the same color. Analogous colors are next to each other on the wheel. Triadic schemes use colors from three points evenly spaced on the color wheel, while Tetradic schemes use colors from four points spaced around the wheel. The degree of spacing between the colors can be used for additional options.

There isn’t one that is better or easier than the other, they all have their place. To help guide my decision I like to first understand where my primary and CTA colors are on the wheel. We can try various color scheme options using our primary color while considering where the CTA falls in relation to the other color(s).

There are numerous online tools for determining additional colors based on a given color. I would suggest trying a couple of them as they provide different options and offer different colors for the same scheme. Even something that would seem straightforward like the single complementary color is different on each site.

Canva offers a simple tool that is pretty easy to use. It only offers one extra color for the monochromatic scheme.

It suggested #821E54 as the complementary color to our Salem green #1e824c.

Canva suggested #821E54 swatch

appypie has a slick interface and offers a few more schemes. It suggested #801f54 as the complementary color.801E52

appypie suggested #801f54 swatch

Paletton is a little more complex and offers more tints and shades similar to the chosen color. It suggests #B84A2A as complementary.

Paletton suggested #B84A2A swatch

Adobe Color Wheel offers the most schemes. The tool itself is kind of confusing and doesn’t allow for easily setting a primary color across schemes. It offers up #B01707 and #FC4F3D as complementary color options.

Adobe suggested #B01707 swatch

Adobe suggested #FC4F3D swatch

Coolors.co is my favorite, they offer the schemes on the page at the same time so it’s easier to understand the choices. Coolors.co suggest #801E52 as the complementary.

Coolors.com suggested #801E52 swatch

I went with the complementary color provided by Coolors.co, #801E52. Being colorblind I avoid complex color schemes. Also, the Quasar color scheme doesn’t support additional colors by default. You can define unique colors as needed in Quasar.

Defining an Accent Color

Things get easier now, we just use a darker shade of the primary color as an accent. Coolors.co made finding the shades easy.

I chose #0F4026 from the middle of the spectrum.

My highlight color swatch for #0F4026

Configuring the Colors in the Quasar App

To make the changes to the Quasar app we just need to update the /css/quasar.variable.scss file.

// Check documentation for full list of Quasar variables
// Your own variables (that are declared here) and Quasar's own
// ones will be available out of the box in your .vue/.scss/.sass files// It's highly recommended to change the default colors
// to match your app's branding.
// Tip: Use the "Theme Builder" on Quasar's documentation website.$primary   : #1976D2;
$secondary : #26A69A;
$accent    : #9C27B0;$dark      : #1D1D1D;$positive  : #21BA45;
$negative  : #C10015;
$info      : #31CCEC;
$warning   : #F2C037;

We update the primary, secondary, and accent colors to the ones we chose.

$primary   : #1e824c;
$secondary : #801E52;
$accent    : #0F4026;

That gives us the toolbar color we wanted.

Customizing the Amplify Colors

Amplify uses the following CSS properties to define a primary and secondary color, it then defines a range of tints and shades. The amplify-colors-brand-primary-80 is the color used for the Amplify Authenticator buttons and the amplify-colors-brand-primary-10 as the tab color.

--amplify-colors-brand-primary-10:
--amplify-colors-brand-primary-20:
--amplify-colors-brand-primary-40:
--amplify-colors-brand-primary-60:
--amplify-colors-brand-primary-80:
--amplify-colors-brand-primary-90:
--amplify-colors-brand-primary-100:--amplify-colors-brand-secondary-10:
--amplify-colors-brand-secondary-20:
--amplify-colors-brand-secondary-40:
--amplify-colors-brand-secondary-60:
--amplify-colors-brand-secondary-80:
--amplify-colors-brand-secondary-90:
--amplify-colors-brand-secondary-100:

I’m going to define amplify-colors-brand-primary-100 the same as the primary Quasar color. I’ll then use graduating tints of the color for the lower numbers. I’ll do the same using the Quasar secondary color for the *-brand-secondary Amplify ones. AMplify provides a list of all available Authenticator CSS variables.

Coolors.co provides this range of tints. I’ll treat each shade as worth 10 for matching up to the numbers in the Amplify CSS properties.

That gives us these colors for the primary:

--amplify-colors-brand-primary-10: #99e7be;
--amplify-colors-brand-primary-20: #85e2b0;
--amplify-colors-brand-primary-40: #5cd996;
--amplify-colors-brand-primary-60: #33cf7c;
--amplify-colors-brand-primary-80: #28a964;
--amplify-colors-brand-primary-90: #239458;
--amplify-colors-brand-primary-100: #1e824c;

And these for the secondary color tints:

--amplify-colors-brand-secondary-10: #E799C3;
--amplify-colors-brand-secondary-20: #E285B7;
--amplify-colors-brand-secondary-40: #D95C9F;
--amplify-colors-brand-secondary-60: #CF3387;
--amplify-colors-brand-secondary-80: #A9286C;
--amplify-colors-brand-secondary-90: #94235F;
--amplify-colors-brand-secondary-100: #801E52;

Customizing the Amplify colors

We can include the Amplify CSS in any component that needs the styling along with other CVSS to style the Amplify components.

<style>
:root {
--amplify-fonts-default-variable: 'Open Sans';
--amplify-fonts-default-static: 'Open Sans';
--amplify-colors-brand-primary-10: #99e7be;
--amplify-colors-brand-primary-20: #85e2b0;
--amplify-colors-brand-primary-40: #5cd996;
--amplify-colors-brand-primary-60: #33cf7c;
--amplify-colors-brand-primary-80: #28a964;
--amplify-colors-brand-primary-90: #239458;
--amplify-colors-brand-primary-100: #1e824c;
--amplify-colors-brand-secondary-10: #e799c3;
--amplify-colors-brand-secondary-20: #e285b7;
--amplify-colors-brand-secondary-40: #d95c9f;
--amplify-colors-brand-secondary-60: #cf3387;
--amplify-colors-brand-secondary-80: #a9286c;
--amplify-colors-brand-secondary-90: #94235f;
--amplify-colors-brand-secondary-100: #801e52;
--amplify-colors-radii-small: 0;
--amplify-colors-radii-medium: 2px;
--amplify-colors-radii-large: 4px;
--amplify-colors-border-primary: var(--amplify-colors-neutral-40);
--amplify-colors-border-secondary: var(--amplify-colors-neutral-20);
--amplify-colors-border-tertiary: var(--amplify-colors-neutral-10);
--amplify-colors-background-secondary: var(--amplify-colors-brand-primary-10);
--amplify-components-tabs-item-border-color: var(--amplify-colors-neutral-60);--amplify-radii-small: 4px;
--amplify-radii-medium: 6px;
--amplify-radii-large: 8px;
--amplify-space-small: 0.75rem;
--amplify-space-medium: 1rem;
--amplify-space-large: 1.5rem;
--amplify-border-widths-small: 1px;
--amplify-border-widths-medium: 2px;
--amplify-border-widths-large: 4px;}</style>