That's one of the reasons for this principle:īackground and text colors should have high value contrast, because hue and saturation contrast are too dependent upon individual perception and monitor/printer representation.īy using text that is white (value = 255) and black (value = 0), you are limited to a value contrast with the background of at most 127 (the middle of that range). Too bad it looks like grasshopper vomit.įinally, keep in mind that any of the above versions will look very close to the grayscale version under certain kinds of colorblindness (dyschromatopsia and achromatopsia). IMO, the second version (slightly desaturated) isn't overwhelming and the text contrast is acceptable. Without the color saturation, the white and black text are too similar to the background, so they will be difficult and/or tiresome to read. Let's fully desaturate to see what I mean: But we're starting to run up against the problem that ecc's answer mentioned. Now it's more of a warm gray, and it doesn't look so bad. I think that looks ugly, but the black/white text is still fairly readable. Here's the same palette desaturated a bit:
CSS COLOR CODES FOR WHITE FULL
But that color as a full page background would be overwhelming. The white and black text are acceptably readable (to me, at least). See this paletton, and imagine it with a heavier font: We have a calc() function in CSS for manipulating numbers. But this is CSS-Tricks so let’s do some CSS tricks. One example is to create tinted variants of a single base color to form a design palette. The right orange (and many other hues) can pull that off. It would be nice to have native CSS color mixing, as it would give designers greater flexibility when working with colors. There probably isn't a background color to solve that problem, so let's address the more interesting question.Ī background color that goes with both black and white foreground text color. I'll withold judgement until I actually see an image or link to your design, but it sounds like you're already trying to mix oil and water. Colors that don't go with black color background are not visible. Really nice feature.Foreground light blue, white, gray, yellow color texts are present. Just inspect the element with a color you need, find the style (color, background-color, etc.) and while holding shift button, click at the square with color picker. See the Pen color picker with hsl by Mateusz on CodePen.Ĭhrome DevTools is a wonderful tool. You can try changing the color in the picker and see the results. Analogous colors? Work with degree variable. Triada? Just add 120 to the first color and 240 to the second one. And now, where Sass ends – you still have CSS variables. Need to make it darker? Let’s subtract that.
You need to lighten something? Just add some value to lightness. Color paletteīasically, things you do with Sass can be done with CSS. Now, the percentage of correct answers should be much higher. Now, let’s say that you want to make this background darker when hovering – to increase its contrast. This button has some text with white color and background in that color: rgb(30, 144, 255).
This is a huge power to have the opportunity to deal with every property of color separately. Of course, it’s oversimplified, but what I wanted to present is the flexibility of working with HSL colors. You can basically use something like this. So maybe instead of this, you should try the solution below. What is the downside of that solution? Much more CSS code. How can you swap between light and dark themes then? Of course with Sass, or even pure CSS (toggling some ‘dark-theme’ class with JavaScript).
CSS COLOR CODES FOR WHITE HOW TO
How to use it for toggling between light and dark themes?ĭark themes are pretty hot recently – it’s one of the top functionalities in number of applications. It’s awesome! After watching this, you’ll understand the advantage of HSL over RGB or HEX. Why? Because now primary and secondary are complementary colors. CSS Variables with HSLĪs you can see on the example used below, it’s rather nice and easy to create a color palette.įor secondary color, I added 180 to hue. Also, it’s much easier than imagining RGB. You don’t have to spend many hours to learn how to read HEX code. Well, one of the biggest advantages of using HSL is its readability. ? Interested in other frontend development trends? Make sure to check out our massive State of Frontend 2020 report ! What’s so cool about HSL? 380° is the same as 20°, and -120° is the same as 240° 0% means the color is black because completely no light, 50% color is neutral, 100% color is white. Next is saturation, 0% stands for grey, 100% is maximum intensity.