White and blue is an easy combination to mix because they always make light blue. Adding white to any color usually lightens the color, which is why blue and white give you light blue paint and lights.
color-mix()
In a supporting browser, the items have more blue, and therefore less white, as a higher percentage of #34c9eb is mixed in. When no value is given, the percentage defaults to 50%.
HTML
ul> li>0%li> li>25%li> li>50%li> li>75%li> li>100%li> li>li> ul>
CSS
ul display: flex; list-style-type: none; font-size: 150%; gap: 10px; border: 2px solid; padding: 10px; > li padding: 10px; flex: 1; box-sizing: border-box; font-family: monospace; outline: 1px solid #34c9eb; text-align: center; >
li:nth-child(1) background-color: color-mix(in srgb, #34c9eb 0%, white); > li:nth-child(2) background-color: color-mix(in srgb, #34c9eb 25%, white); > li:nth-child(3) background-color: color-mix(in srgb, #34c9eb 50%, white); > li:nth-child(4) background-color: color-mix(in srgb, #34c9eb 75%, white); > li:nth-child(5) background-color: color-mix(in srgb, #34c9eb 100%, white); > li:nth-child(6) background-color: color-mix(in srgb, #34c9eb, white); >
Result
Using hue interpolation in color-mix()
When using shorter hue interpolation, the resulting hue angle is halfway between the input angles when taking the shortest route around the color wheel. The longer hue interpolation method results in a hue angle which is the midpoint when taking the longer route around the color wheel. For more information, see .
div class="color-one">color onediv> div class="color-two">color twodiv> div class="shorter">mixed shorterdiv> div class="longer">mixed longerdiv>
CSS
body display: flex; flex-wrap: wrap; > div border: 1px solid; font: bold 150% monospace; height: 100px; margin: 10px 5%; width: 30%; >
.color-one background-color: hsl(10 100% 50%); > .color-two background-color: hsl(60 100% 50%); > .shorter background-color: color-mix( in hsl shorter hue, hsl(10 100% 50%), hsl(60 100% 50%) ); > .longer background-color: color-mix( in hsl longer hue, hsl(10 100% 50%), hsl(60 100% 50%) ); >
Result
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on Jun 12, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
- Product help
- Report an issue
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
What Color Do Blue and White Make in Paint?
Mixing white and blue together creates light blue , also commonly known as sky blue. That’s because any color mixed with white creates what’s called a tint. Tints always look lighter and paler than the color that white is mixed with. The more white you add to blue, the lighter it’ll be.
Understanding the RYB Color Model
RYB is a color model used for paints and other physical art mediums. Most people are familiar with this form of subtractive color mixing because it’s taught in early art classes. When colors are combined in RYB, wavelengths are removed from the mixture to create a new color.
The primary colors in RYB are red, yellow, and blue. If you mix two primary colors together, they make one of the secondary colors, which are green, purple, and orange. All three primary colors mixed together usually result in brown. Black and white don’t appear on the color model, but they can be used to change the appearance of a hue.
Making Blue Lighter or Darker
After mixing light blue using white and blue, there are still ways to alter how the color looks. Here are some tips for making a paint color look lighter or darker.
Mixing Tints
As mentioned earlier, tints are made when a color is mixed with white. This causes the color to look lighter and paler. Sky blue is already a tint of blue, so you probably won’t need to make it lighter. Yet, if you do, all you have to do is mix in more white paint.
Mixing Shades
Shades are the opposite of tints. They’re made by mixing a color with black, which makes it darker. Black paint is much more overpowering than white, so a little can go a long way. Use black sparingly when trying to make a blue color look darker. You can also make it look darker if you use more blue than white.
Light Blue Color Meaning
Light blue is a pleasant color that can symbolize tranquility, softness, and understanding. Yet, it could also share some general meanings with the color blue.
Blue is usually a color of security, loyalty, and responsibility. It’s known to protect, calm, and support. Like all colors, blue has a variety of good and bad meanings. Some positive meanings include confidence, peace, and honesty. However, negative interpretations could be passive, depressed, and predictable. The symbolism of light blue depends on how it’s being used and what you want to portray.
Can You Create Blue and White Paint?
Running out of paint can be frustrating, but depending on which colors you need more of, you might not need to run to the store. The RYB color model doesn’t show an easy way to make blue and white, so is it possible to create them using other colors?
To create blue paint, you’ll need to reference the CMYK color model, which is used for printing. According to that diagram, cyan and magenta can be mixed to create blue. However, both of those colors are difficult to find in paint.
Unfortunately, no colors can be mixed to create white paint. You may be able to make it using other materials, but neither subtractive color model allows you to create it with other colors. That’s because any paint color mixed with another will absorb at least one wavelength. In paint, white is the absence of all the wavelengths.
What Color Do Blue and White Make in Lights?
If you combine a blue light with a white light, you’ll also get light blue just like you would in paint. To make white in lights, you need to mix the three primary colors together at full brightness. Adding blue would mean that there would be a little more blue than the other two primary colors. Thus, the color would be close to white, but with a blue tint.
Understanding the RGB Color Model
The RGB color model is used for mixing colored lights and digital displays. Unlike RYB, it’s an additive color model, which means wavelengths are added when colors are combined. Mixing lots of colors in lights usually gives you a lighter result, while paints typically end in a darker color.
In this color model, the primary colors are red, green, and blue. Then, the secondary colors are cyan, magenta, and yellow. If you mix all three primary colors together at full brightness, it’ll give you white. However, if you adjust the brightnesses of the colors you’re mixing with, the result can vary slightly.
CMYK seems like a similar color model, but it’s actually a subtractive color model used for printing. The primary and secondary colors in CMYK are the opposite of RGB, with cyan, magenta, and yellow being the primary colors and red, green, and blue being the secondary colors. When you mix all three primary colors together, you get black.
How to Mix Colored Lights
Mixing lights isn’t the same as mixing paints. With paint, you need to swirl two colors together to create a new one, but with lights, you have to layer one color on top of another. If you already have a blue and a white light, simply shine one on top of the other to reveal a light blue color.
However, you can also create all the colors on the RGB color model by layering red, green, and blue on top of each other at different brightnesses. For example, if you wanted to create light blue that way, you could keep blue at full brightness, move green to about 75% brightness, and put red at about 25%. Then, you’d get a nice light blue.
Mixing with lights involves a lot of trial and error. If the color you’re trying to make doesn’t turn out as expected, you can adjust the brightnesses of red, green, and blue to change how it appears. You might discover some interesting colors in the process.
How Do Our Eyes Perceive Colors?
The way our eyes perceive color is unique and complicated. The wavelengths of light are what help our eyes look at colored objects, which our brains then help us interpret based on the context. Every color on the visible light spectrum has a unique wavelength, which helps determine which colors are absorbed into an object and which ones are reflected.
Violet is on one end of the spectrum while red is on the other. Thus, the two colors have very different wavelengths. Violet’s wavelengths are short and frequent, but red’s are long and stretched out.
When light shines on an object, some wavelengths are absorbed into the item while others reflect back at us. The colors that bounce off an object are the colors we see that object as. For example, a ripe banana would absorb the colors red, orange, green, blue, and violet while reflecting yellow. So, the banana would appear yellow to us.
Inside our eyes, we have cone and rod cells, which are also known as “photosensors.” Those cells allow us to interpret the colors we’re looking at. Cones are most effective in bright light, so they can perceive colors during the day. Rods are a bit more sensitive, so they interpret colors best in dim lights. The two types of photosensors work together to help us see colors at all times, and our brains help us process those colors.
Designing with White and Blue
Blue and white together make peaceful designs. They’re often used in beach resorts and sunrooms because they make people feel relaxed. While these two colors are great as a pair, there are plenty of colors you can add to make the design more interesting.
Some colors that might go well with blue and white are green, purple, pink, or yellow. Other neutral colors like brown or gray might fit in well too. Adding in shades and tints of blue may make the design more appealing. All of these color schemes work well for all kinds of designs, including rooms, paintings, and advertisements.
If you use white or blue on their own, you’ll have a lot more options. White is a neutral color that goes well with just about any other color. It complements bright colors well, so consider using it with yellow, green, or pink. If you want a more neutral color scheme, consider pairing it with beige or gray. Blue goes best with yellow, pink, red, or purple.
