Do CSS colour swatches have some sort of order?

I’ve been playing with CSS variables that use colour swatches and wondering if a swatch can be easily copied and pasted.

Swatches look aesthetic by themselves but fail with the following layout:

https://this-is-a-test-to-see-if-it-works.anetizer.com/sp-a/jb-swatch/index-000.php

My attempts have failed miserably making most layouts unreadable :frowning:

I’m not sure what you’re asking but the unreadability comes from the lack of contrast between the colors.

Perhaps if you went away from the named colors as your primary. There’s no real need to stick to the names colors anymore as we’ve gone well past that technology, and in fact, that limited color palate will most likely be painful in a monochromatic theme since they’re too close to each other. Start with a deeper darker color as your base, and perhaps that will help to develop a more readable color scheme.

Here’s a good page discussing monochromatic color schemes: https://www.colorsexplained.com/monochromatic-colors/

You can also use the inspect elements tool and look at the contrast ratio. A check is good, a not symbol is not.
Yours using the red
image
A slight tweak to the color to be darker (just that one not any of the rest)
image

2 Likes

If you use hsl colors you can select complementary colors more easily as shown in this article.

4 Likes

You can also use the WebAIM contrast checker. Anything with a fail may be problematic…

https://webaim.org/resources/contrastchecker/
So for example, if you look at your red version, it fails the check for normal text, going with the largest contrast of red → white. You CAN use the red/white for large test, but not “normal”

You darken it some, and it passes one but not the other and you notice, it’s still not great to read

Adjust it until it passes both tests, and it’s much easier to read…

3 Likes

@PaulOB,

I not sure exactly how to explain my requirements but will try again because I’ve always had problems with matching colours and one designer decided after a series of brief tests that I was “colour deaf”.

I’ve often seen a swatch or palette of five colours recommended for a particular theme. I created the webpage that sets the five main colours and used CSS var(—color); for background-color, text color, etc. The colour swatch/palettes samples tried were disappointing.

Following is a sample of colours that I would like to experiment by setting values in my PHP webpage which inserts the relevant colours depending on the URL parameter.

https://codepen.io/dropside/pen/KkLaH

Is the first colour of the swatch/palette meant for the body background followed by the body text colour, etc? Are there any recommendations on how to use the different colours?

Color theory is one of the harder concepts to grasp, and TBH, I still refer to many resources every single time I refer to them.

As for the color swatches, it all depends.

So take this one for example.

If you’re going to use a lighter color as the background, the first and the last is pretty much the only combination you can use. The others just don’t have enough contrast.

BUT, if you use a darker color as the background, there are more options. You can use the darker blue with all but the next to last color, and you can use the next to last color with the first color. Why the combinations pass the check, I don’t know. But darker colors tend to allow more variety in foreground colors.

If you’re talking body backgrounds, most of those palettes don’t have a good color for either the background of the foreground. Most effective sites use Whites/Blacks or some saturation of them - for example, that codepen uses #222 instead of black, or one of those palettes has #f0f0f0, which could be used instead of white. They also use #888 instead of a white, but I personally think it’s pushing the contrast limits (something like #B0B0B0 reads better against #222)

You would use most of these palettes as backgrounds/borders/heading colors, etc. If you’re going to use a brighter color, use it sparingly (heading, blockquotes, borders, etc.) Use the ones at the extremes of the saturation scales (lightest and darkest) for foregrounds/backgrounds if you’re not going to use whites/blacks.

But use the contrast to make it readable - a bright background needs a dark foreground, and a darker background needs a brighter foreground.

Like for example, your blue isn’t bad, but the contrast is off. Reverse the foreground colors and it’s much more readable

2 Likes

I thought that using CSS Variables would simplify webpage colour choices but it looks like there is no easy solution :frowning:

The colour table is useful and perhaps I should have a Debug link to show how the background and foreground colours may be used.

Bring back the good old days of monochrome monitors :slight_smile:

It does give a clear visual indication of which FG/BG combinations work and which don’t.
Perhaps you could come up with a way to judge them numerically. Then use that to pick which are assigned to classes that will hold text, and which will only be decorative elements. Though I still think it best for the human element to pick.

I think using variables is good when you want to make changes to a colour scheme quickly, maybe just to try out a look, as you can change a colour in one place without having to edit several selectors in a style-sheet. I suppose it depends on the set up you have created.

3 Likes

Just to add another resource

https://color.adobe.com/

which seems to be available without the eye watering Adobe CC subscription. If you do subscribe to CC you can create palettes that you can share between the different apps and can drag and drop - in Dreamweaver you can drag the colors into the code and it enters the rgb values.

There is also a rather nifty mobile app (with the subscription) where you can take a photograph and it creates a palette from the photo and if you don’t like the choices it has made you can drag a selector across the image to choose different areas. My wives scarves have good colour palettes for this!

2 Likes

They do a little as shown in that article I pointed out. Using HSL you can just add a value of 180 to find the complementary color which should give the required contrast plus also you can lighten or darken using a calc value.

It will still be quite complex but will go some way to automating the process. This article explains it in a bit more detail.

3 Likes

For text to be easy to read it is far, far more important to have good contrast of the subjective brightness of the two colours than to have near complementary colours.

From this W3C document:

For people without colour deficiencies, hue and saturation have minimal or no effect on legibility as assessed by reading performance (Knoblauch et al., 1991).

So for example blue text on a yellow background will be very much easier to read than magenta text on a green background. Dark red text on a light pink background will be easy to read although the hues could be identical.

Note subjective (perceived) brightness is not the same as luminance as used in HSL description of colours.

3 Likes

Yes perhaps I made it sound a bit simplistic and that article by Una that I linked to above does mention those shortcomings.

Keep in mind, since HSL is how the computer understands lightness and not how the user understands lightness, this technique is not perfect, and it clearly shows us where custom properties and the calc function still fall short.

2 Likes

Just saw these couple of links and was interested to see that color-contrast is coming to css.

And an interesting talk about color palettes in CSS although most of it went over my head :slight_smile:

1 Like

I really like the following demo and looking to trying it on the desktop because it would drastically simplify the current hit & miss approach of finding legible colours just by applying a single color-contrast variable! Wonderful :slight_smile:


  color: color-contrast(var(--bg) vs red, white, blue, pink, orange, white, black);

and then noticed it is experimental :frowning: How can I try it if there is no browser support?

Yes you can only test at the moment on a modern Mac using the Safari Technology Preview browser.

Unfortunately my mac is too old as it stopped at ios 10.13.6 and won’t update past that point as it needs the newer processor.

1 Like

I see that is essentially looking at the ratio of subjective brightness (perceived luminance) of two colours. You could have two very different colours with identical subjective brightness: so calling it colour contrast is rather misleading.

Note the luminance here is based on a model derived from subjective tests and is very different to the luminance in HSL.

You can calculate the luminance of a colour using the equations here and taking the ‘Y’ value.

From here, the contrast is calculated as:

contrast = (Yl + 0.05) / (Yd + 0.05) where Yd is the luminance of the darker color in the pair and Yl is the luminance of the lighter color. The factor 0.05 represents the luminance contribution of the viewing flare.

The “viewing flare” is supposed to allow for reflections etc from the screen but perhaps more importantly it avoids large values of contrast when luminance of both colours is low.

I have created a very basic calculator for the luminance (Y) of a colour here:

This gives values in the range 0.0 to 1.0 but could be extended to calculate the contrast of two colours (using the above equation).

I wonder whether the difference in luminance may be better than contrast when considering the legibility of text.

2 Likes

The order of these swatches is random. Colour pickers are used to generate the swatches by either using an RGB value or a hexadecimal value in the colour-picker input box. The colours are generated using the HSL colour space and they are displayed as Hue, Saturation, Lightness instead of RGB values.

CSS colour swatches have no order; they just come out in a random manner.

Colours are displayed on a monitor with pixels that contain red, green and blue triads.

I assume that if you use a colour picker to give RGB values or equivalent hexadecimal code, then HSL doesn’t come into play at all.

That’s the general impression I gathered :frowning:

I have updated the online Demo and can now modify the colours and the differences will render.

Beware ONLY colour names and hexadecimal values are acceptable… unless somebody can expand the following validation function to include HSL and HSLA colours, etc… Pretty please :slight_smile:

//============================
// Prevent JavaScript 
//============================
function clean($clr) : string 
{
  $ok = FALSE; // DEFAULT
  if ( preg_match( '|^#([A-Fa-f0-9]{3}){1,2}$|', $clr ) ) :
    $ok = TRUE;
  endif;

  return $ok ? $clr : 'YELLOW';
}//

Interesting article on colors here which seems pertinent to the thread discussion.

2 Likes