Defining a Color Theme

August 14, 2025

Today I want to talk about defining a color theme for your web application. There are a lot of ready-made styles and themes out there, but these often come with a lot of crud. You can also create a basic and decent looking theme yourself and that is wat we will be doing here.

In my years as a developer, the main focus has mostly been on the technical side of things. I have worked with numerous frameworks, libraries and platforms, but I have never really been a designer. Usability and performance have always been my main concerns.

---

Caveat: I am not a designer and my stuff will not blow you away. I do have picked up some things here and there though. It will look good enough though, and it will be usable! And that is what you should care about primarily. Nobody cares about your design, they care about the usability of your app! Steve Krug, Don't Make Me Think!

The design aspect

What I like to do is create a triplet of colors that work well together. I usually start with a base color, then shift the hue 120 degrees to create the secondary and tertiary colors. This way, you can create a harmonious color scheme that is easy on the eyes and usually work well together.

Below is a simple hue picker that you can use to generate your own color scheme. It is preloaded with the colorscheme used for this site.

Notices

In a nontrivial system, you will need to display notices to the user. These can be warnings, errors, or informational messages. I have found that it is best to use a consistent color scheme for these messages. Something like a red for errors, orange for warnings, green for success messages, and blue for informational messages.

This way, users can easily recognize the type of message. These colors are pretty standard, which is good because we do not wat to surprise our users, according to the principle of least astonishment.

Technical implementation

Now for the technical part. Good news - that is easy! We will use CSS variables to define our colors, and then use these in our stylesheets. This way, we can easily change the colors in one place and have them applied throughout the app.

As you can see, there are some extra values. For instance, the main background color is based on the primary color, but with its lightness increased to 90%. This way, we can create a nice contrast between the background and the foreground colors.

:root {
    --background: hsl(76, 57%, 90%);
    --foreground: #333;

    --primary-background: hsl(76, 57%, 43%);
    --primary-foreground: #fff;
    --secondary-background: hsl(196, 57%, 43%);
    --secondary-foreground: #fff;
    --tertiary-background: hsl(316, 57%, 43%);
    --tertiary-foreground: #fff;

    --warning-background: #ff9800;
    --warning-foreground: #fff;
    --error-background: #f44336;
    --error-foreground: #fff;
    --success-background: #4caf50;
    --success-foreground: #fff;
    --info-background: #2196f3;
    --info-foreground: #fff;

    --sidebar-background: hsl(196, 57%, 98%);
    --sidebar-foreground: #333;
}

Having these variables defined, we can use them in our stylesheets like this:

body {
    background: var(--background);
    color: var(--foreground);
}

That's it! You have now defined a simple color theme for your web application.

Some extra tips

As you can see, defining a basic color theme is not too hard. There are many ways to do this, but what I basicly do is use a set saturation and lightness, and then shift the hue to create a harmonious color scheme.

You have probably noticed that I usually pair background and foreground colors. This is a good practice, as it allows you to quickly spot low contrast issues, which can plague you especially when using both dark and light themes.

Speaking of light themes, You can easily extend this colors.css file to include a dark theme as well. Just duplicate the entire block, and change the selector to :root.dark and the colors to your liking. Then, you can toggle the dark mode by adding or removing the dark class to the html element. I leave that as an execise for you.