Lmao, I just looked at the default colors listed on W3, and some of these names.... Okay, because first of all, why is "chocolate" bright orange?
Also, I realized, if the text color is the same as the background color, then you can make cool stripes like this!
H
H
H
H
H
These could make good dividers, maybe. Or, if I want to add extra space between lines, I can just include a white stripe.
COLOR ELEMENTS
"color" sets the text color
"background-color" sets the background color duh
"border" sets the border color, but you have to specify the weight and border type along with the color in order for it to work.
All of these use the style attribute. To make it work, as you know, you just type,
[space] ' style="[property]:[value]; ..." '
The border element is a bit different, however, since there are multiple values. The format is:
" border:[#]px [space] [border type] [space] [color] "
I'm in a box.
solid
dashed
dotted
double may have to zoom in to see it
groove
ridge
inset
outset
none
dawg why would you ever write a whole line of code just to specify there is NO border at all? maybe it's a debugging thing...The format is "color:rgba([r#], [g#], [b#], [a#])" (or you can leave off the "a" and alpha value to just use RGB)
RBG values go from 0 to 255. Alpha values go from 0.0 to 1.1 (0 being most transparent)
Test
Test
Test
GENERAL TIPS
Red + green = yellow
Red + blue = magenta
Green + blue = cyan
All 3 = white
None = black
Lower values = darker colors; higher values = brighter colors
Far apart values = saturated; similar values = desaturated
The format is just "color:#rrggbb" (you don't need to specifically label it as hex. remember the hashtag! otherwise it won't work)
Basically, the way hex numbering works is that, instead of digits going from 0-9, they go from 0-9 THEN a-f, creating 16 digits instead of 10 (this is why it's called "hexadec"imal).
The lowest number in hex is 00, and the highest is ff.
Basically all the stuff with RGB applies, it's just that a different numbering system is used.
There is no option for alpha (transparency), however.
Test.
Test.
Test.
That's good enough to be a palette if i do say so myself!
Hue, saturation, and lightness. Probably the easiest to figure out in your head.
The format is color:hsl(#, #%, #%)
The hue value is written as a number beteen 0 and 360. The saturation and lightness values are written as percentages.
The hues start at red (0), then go to orange, yellow, green, blue, purple, and the end (360) is red again.
HSLA works the same way. The alpha value is written as a number between 0.0 and 1.0, however.
Test.
Test.
Test.
The tools W3Schools has to mess around with different values are a much more convenient way to familiarize yourself with how to make colors from code.
All this being said, it's easiest to use a color picker rather than try to make a color just by typing in a code.
I'm bored. I think I'll make a pretty colorful webpage.