Mix colors, in any of the supported color spaces, right from your CSS.
How to Make Black Watercolor
I’m a self-taught artist who loves sharing tips and tutorials for painting with watercolor and gouache, and using the Procreate app on the iPad.
Learn how to make black watercolors, Get easy tips for mixing colors to create the perfect black color for your art.
You might also be interested in this post on color theory.
This post contains affiliate links. By purchasing an item through an affiliate link, I earn a small commission at no extra cost to you. As an Amazon Associate I earn from qualifying purchases.
I’ve included links to Blick where available because they often have better prices than Amazon. Plus, it’s so much fun to shop at Blick!
How to Make Black Watercolor
Technically, you can combine red, yellow, and blue to create black, but I prefer making 2 color mixtures.
There are 2 factors for choosing the colors to make your own black watercolor:
- The colors must be complementary (red and green or blue and orange.)
- The colors must be dark. This is why I didn’t mention yellow and purple as an example for complementary colors. Yellow is way too light.
My Favorite Black Watercolor Mixture
My favorite black watercolor mixture creates a color commonly known as Jane’s Gray. To create this gorgeous color, mix ultramarine and burnt sienna. (Burnt sienna is brown, but looks very orange, so it works as a complementary color.
Blick links: Ultramarine | Burnt Sienna
The ultramarine granulates and creates the perfect shade of black.
By the way, these colors can also create the perfect dark brown watercolor if you use more burnt sienna than ultramarine. Read more about making brown paint here.
You can also use burnt umber to create a cooler shade of black.
Any dark blues combined with brown will create a black color. Indigo mixed with burnt umber is also very beautiful.
Blick link: Indigo
My 2nd favorite mixture combines perylene green and perylene red. These are both very dark shades and technically perylene green is made with black pigments.
Blick Links: Perylene Green | Perylene Red
Please note that perylene colors are notorious for not scanning well. And my scanner is slowly dying so it’s not the most accurate color ever.
You can also use darker neutral reds. The bottom mixture uses perylene green and Indian Red.
Blick link: Indian Red
Keep in mind that some colors are stronger than others, so it’s not always a 1:1 mixture. For example, Indian Red is really strong and you need a lot more perylene green for mixing a black color.
Why Would You Use Black Mixtures Instead of PreMade Black Watercolor?
I love using my own mixtures for black with a few exceptions. I prefer Payne’s Gray or Neutral Tint to straight black watercolor. The colors are much prettier and easier to use.
Blick links: Payne’s Gray | Neutral Tint
On its own, black is a little too harsh and I find that I never use it. Payne’s Gray is my go-to for black.
Also in nature, you rarely see a solid black color. I have a black lab and in the sun her fur is more dark brown than true black.
When mixed with colors, the results are much more interesting than when mixed with black.*
*There is one exception to this rule. I love mixing lunar black (some brands call it Mars black) with colors to create super granulating colors similar to the dusk pink by Rembrandt and Van Gogh.
Color Blending on the Drumcarder: Mixing Monochrome
What effect does blending white or black fiber into a color have on the finished fiber?
Jillian Moreno Jan 24, 2022 – 4 min read
Illustration from “Die Farbenlehre im hinblick auf Kunst und Kunstgewerbe” by Wilhelm von Bezold (1874). Courtesy of Smithsonian Libraries
I am crazy about working with color in spinning. I am not a dyer, but that doesn’t leave me out of creating color blends and new colorways. I simply work by blending at the wheel or with my handcards and drumcarder.
Lately, I’ve been working only with certain colors. Warm colors have always been my favorite; they can give a feeling of being cozy or fierce, and my eye and grabby spinning hands always gravitate toward them. I decided to dig into warm colors, combining them to make interesting color combinations and yarns. Warm colors are in the range of red, yellow, and orange on the color wheel.
Monochrome: Blending with White and Black
Monochrome means one color to rule them all. Working with one color and adding white or black, I can change the color a great deal, giving it visual lightness or depth.
Value means lighter to darker on a grayscale. If you took a photo of a colorway and applied a black-and-white filter, the resulting range of grays is the range of values for the colorway. It is pleasing to the eye to have a range of values when dealing with colors. Adding white to a color creates a tint, and adding black creates a shade, two ways to change a value. (Adding both black and white—gray—creates a tone.)
ADVERTISEMENT
From top to bottom, pure red with increasing amounts of white. Photo by George Boe
I was surprised at the range I got when I used only black and white with one color, in this case red. I carded together small batts using these proportions of color (above):
This created a range that goes from red with a touch of white to pink, with three tints in between. When I spun them in order, it made a gradient yarn moving from dark to light. Adding white to red lightened it in feeling as well as color; it feels airier as it gets lighter.
From bottom to top, red with increasing proportions of black. Photo by George Boe
Then I used black with the red in the same proportions. The black makes the red deeper until it’s really just a tiny bit of red in black. Adding black to the red made it seem heavier, physically and metaphorically, like a more serious color. When spun, it makes a deep dark ombré yarn that moves from darkish to dark.
I tend to go for darker colors, so the darker ombré really appeals to me, but I was really surprised at the variety that’s available in a color just by mixing it with a little bit of white or black.
Jillian Moreno, author of Yarnitecture: A Knitter’s Guide to Spinning, can’t stop writing and teaching about spinning and using handspun to knit, weave, and stitch. When she’s at home in Ann Arbor, Michigan, she can be found wantonly basking in her stash. Keep up with her fiber exploits at www.jillianmoreno.com.
Download the Summer 2018 issue of Spin Off to read more about Jillian’s adventures in blending warm colors on the drumcarder.
# Mixing colors in CSS
CSS exists in a multiple color space and color gamut world, and because of this it’s not optional to specify the color space for mixing. Furthermore, different color spaces can drastically change the results of a mix, so knowing the effects of a color space will help you get the results you need.
For an interactive introduction, try this color-mix() tool:
- Explore the effects of each color space.
- Explore the effects of hue interpolation when mixing in a cylindrical color space ( lch , oklch , hsl , and hwb ).
- Change the colors being mixed by clicking either of the top two color boxes.
- Use the slider to change the mixing ratio.
- Generated color-mix() CSS code available at the bottom.
# Mixing in the various color spaces
The default color space for mixing (and gradients) is oklab . It provides consistent results. You can specify alternative color spaces too, to tailor the mix to your needs.
Take black and white for example. The color space they mix in won’t make that big of a difference, right? Wrong.
color-mix(in srgb, black, white);
color-mix(in srgb-linear, black, white);
color-mix(in lch, black, white);
color-mix(in oklch, black, white);
color-mix(in lab, black, white);
color-mix(in oklab, black, white);
color-mix(in xyz, black, white);It does have a big effect!
Take blue and white for another example. I chose this specifically because it’s a case where a color space’s shape can affect the results. In this case it’s that most color spaces go purple while traveling from white to blue. It also shows how oklab is such a reliable color space for mixing, it’s the closest to most people’s expectations of mixing white and blue (no purple).
color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);Learning the effects of a color space with color-mix() is great knowledge for making gradients too. Color 4 syntax also allows gradients to specify the color space, where a gradient shows the mix over an area of space.
.black-to-white-gradient-in-each-space
--srgb: linear-gradient(to right in srgb, black, white);
--srgb-linear: linear-gradient(to right in srgb-linear, black, white);
--lab: linear-gradient(to right in lab, black, white);
--oklab: linear-gradient(to right in oklab, black, white);
--lch: linear-gradient(to right in lch, black, white);
--oklch: linear-gradient(to right in oklch, black, white);
--hsl: linear-gradient(to right in hsl, black, white);
--hwb: linear-gradient(to right in hwb, black, white);
--xyz: linear-gradient(to right in xyz, black, white);
--xyz-d50: linear-gradient(to right in xyz-d50, black, white);
--xzy-d65: linear-gradient(to right in xyz-d65, black, white);
>If you’re wondering which color space is “the best,” there isn’t one. That’s why there are so many options! There also wouldn’t be new color spaces being invented either (see oklch and oklab ), if one was “the best.” Each color space can have a unique moment to shine and be the right choice.
For example, if you want a vibrant mix result, use hsl or hwb. In the following demo, two vibrant colors (magenta and lime) are mixed together and hsl and hwb both produce a vibrant result, while srgb and oklab produce unsaturated colors.
If you want consistency and subtlety, use oklab. In the following demo which mixes blue and black, hsl and hwb produce overly vibrant and hue shifted colors while srgb and oklab produce a darker blue.
Spend five minutes with the color-mix() playground, testing different colors and spaces, and you’ll start to get a feel for each space’s advantages. Also expect more guidance around color spaces to happen as we all adjust to their potentials in our user interfaces.
# Adjusting the hue interpolation method
If you’ve chosen to mix in a cylindrical color space, essentially any color space with a h hue channel that accepts an angle, you can specify if the interpolation goes shorter , longer , decreasing , and increasing . This is covered well in this HD Color Guide if you want to learn more.
The color-mix() playground will add an additional select dropdown if the color space is cylindrical. You can play there to see the effects on the mix.
Here’s the same blue to white mix example, but this time, it’s only in the cylindrical spaces with different hue interpolation methods.
Here’s another Codepen I made to help visualize hue interpolation, but specifically for gradients. I believe this will help you understand how each color space produces its mix result when hue interpolation is specified though, give it a study!
Providing a hue interpolation method for a non-cylindrical color space is a syntax error in color-mix() .
# Mixing with varying color syntaxes
So far we’ve mostly mixed CSS named colors, like blue and white . CSS color mixing is ready to mix colors that are from two different color spaces. This is another reason it’s key to specify the color space for the mixing, as it sets the common space for when the two colors aren’t in the same space.
color-mix(in oklch, hsl(200deg 50% 50%), color(display-p3 .5 0 .5));In the previous example, the hsl and display-p3 will be converted to oklch and then mixed. Pretty cool and flexible.
# Adjusting the mixing ratios
It’s not very likely that every time you mix you want equal parts of each color, like most of the examples so far have shown. Good news, there’s a syntax for articulating how much of each color should be seen in the resulting mix.
To start this topic, here’s a sample of mixes that are all equivalent (and from the spec):
.ratios-syntax-examples
/* omit the percentage for equal mixes */
color: color-mix(in lch, purple, plum);
color: color-mix(in lch, plum, purple);
/* percentage can go on either side of the color */
color: color-mix(in lch, purple 50%, plum 50%);
color: color-mix(in lch, 50% purple, 50% plum);
/* percentage on just one color? other color gets the remainder */
color: color-mix(in lch, purple 50%, plum);
color: color-mix(in lch, purple, plum 50%);
/* percentages > 100% are equally clamped */
color: color-mix(in lch, purple 80%, plum 80%);
/* above mix is clamped to this */
color: color-mix(in lch, purple 50%, plum 50%);
>I find these examples to illuminate the edge cases well. The first set of examples show how 50% isn’t required but can be optionally specified. The last example shows an interesting case for when the ratios exceed 100% when added together, they’re equally clamped to total 100%.
Notice too, that if only one color specifies a ratio, the other is assumed to be the remainder to 100%. Here’s a few more examples to help illustrate this behavior.
color-mix(in lch, purple 40%, plum) /* plum assigned 60% */
color-mix(in lch, purple, 60% plum) /* purple assigned 40% */
color-mix(in lch, purple 40%, plum 60%) /* no auto assignments */These examples illustrate two rules:
- When ratios exceed 100%, they’re clamped and equally distributed.
- When only one ratio is provided, the other color is set to 100 minus that ratio.
The last rule is slightly less obvious; what happens if percentages are supplied for both colors and they don’t add up to 100%?
color-mix(in lch, purple 20%, plum 20%)This combination of a color-mix() results in transparency, 40% transparency. When ratios don’t add up to 100%, then the resulting mix won’t be opaque. Neither of the colors will be fully mixed.
# Nesting color-mix()
Like all of CSS, nesting is handled well and as expected; inner functions will resolve first and return their values to the parent context.
color-mix(in lch, purple 40%, color-mix(plum, white))Feel free to nest as much as you need to get the result you’re working towards.
# Building a light and dark color scheme
Let’s build color schemes with color-mix() !
# A basic color scheme
In the following CSS, a light and dark theme are created based on a brand hex color. The light theme creates two dark blue text colors and a very light white background surface color. Then in a dark preference media query, the custom properties are assigned new colors so the background is dark and the text colors are light.
:root
/* a base brand color */
--brand: #0af;
/* very dark brand blue */
--text1: color-mix(in oklab, var(--brand) 25%, black);
--text2: color-mix(in oklab, var(--brand) 40%, black);
/* very bright brand white */
--surface1: color-mix(in oklab, var(--brand) 5%, white);
>
@media (prefers-color-scheme: dark)
:root
--text1: color-mix(in oklab, var(--brand) 15%, white);
--text2: color-mix(in oklab, var(--brand) 40%, white);
--surface1: color-mix(in oklab, var(--brand) 5%, black);
>
>All of this is accomplished by mixing white or black into a brand color.
# Intermediate color scheme
This can be taken a step further by adding more than light and dark themes. In the following demo, changes to the radio group update an attribute on the HTML tag [color-scheme=”auto”] which then enables selectors to conditionally apply a color theme.
This intermediate demo also shows a color theming technique where all of the theme colors are listed in :root . This makes them easy to see all together and adjust if needed. Later in the stylesheet, you can use the variables as they’re defined. This saves hunting through the stylesheet for color manipulations as they’re all contained in the initial :root block.
# More interesting use cases
Ana Tudor has a great demo with a few use cases for study:
# Debugging color-mix() with DevTools
Chrome DevTools has great support for color-mix() . It recognizes and highlights the syntax, creates a preview of the mix right next to the style in the Styles pane and allows picking alternative colors.
It will look something like this in the DevTools:
Happy mixing y’all!
Published on Monday, January 30, 2023 • Improve article
