Looking for a color: white with like a 10% shade of blue on it

HTML-CSS
1

Hello everyone,
white with like anywhere from a 1-10% shade of blue on it
so pretty much like an extremely extremely extremely light blue
a very very very very very very very very light blue
a site where you can start with white and type in like 10% blue and it gives you the color would be good also
anyone know?

2

You can make it yourself!

.background-white {
    background: rgb(255,255,255);
}

The above assigns the color by RGB values. RGB stands for red, green and blue. The first value represents how much red is in the color, the second how much green and the third how much blue. The number goes from 0 to 255. Since red, green and blue are all at 255, the color it makes it white.

The following would make a black background.

.background-black {
    background: rgb(0,0,0);
}

And the next three will make a red, green and blue background respectively.

.background-red {
    background: rgb(255,0,0);
}
.background-green {
    background: rgb(0,255,0);
}
.background-blue {
    background: rgb(0,0,255);
}

So what you want is a really really light blue. Basically white with 10% blue added. Because of the rules of additive color mixing what you really want to do is add 10% less red and green(so 90%), with 100% blue.

90% of 255 is 229.5 (255 * .9 = 229.5). So we need to create a color with 255 blue and 229 red and green.

.very-light-blue-background {
    background: rgb(229,229,255);
}

Bonus: You can also set the opacity if you use rgba instead!

By using rgba instead of rgb, you can also specify an alpha value to set the opacity. This will be a number from 0 to 1. So you could make your very light blue color by making a pure blue color (0,0,255) and then setting the opacity to 10% by using the value of .1 for the alpha. If you do this though, it’s important to remember that what you’re actually doing is making it 90% transparent, which means if you have anything behind it you’ll be able to see through to it.

.light-blue-by-alpha-background {
    background: rgba(0,0,255,.1);
}

Bonus 2: Understand Hexadecimal Colors
Incidentally, the same thing is happening when you see hex color values.

.background-yellow {
    background: #ffff00;
}

The numbers and letters after the hash represent the colors red, green and blue in hexadecimal. In hexadecimal, “ff” is equal to 255, so what you’re really seeing there is the same as rgb(255,255,0).

3

HTML has aliceblue as a named color. If that’s not quite what you want, you can start from that and edit in the Chrome dev tools color picker.

4

There are a bunch of web sites with color pickers and generators. Google will give you one as the first result if you search for rgb color picker.

5

https://color.adobe.com/create/color-wheel/

Is awesome for picking palettes. Or “color harmony” as they call it…

Once you get into SASS and preprocessing (with whatever method) into CSS, it’s simple like:

$blue: #0000ff;

body {
    background: lighten($blue, 10%);
}

…which outputs:

body {
    background: #3333ff;
}