color: white; color: #fff; color: #FFFFFF; color: #FFFFFFFF; color: rgb(255,255,255); color: rgb(100%,100%,100%); color: rgba(255,255,255,1); color: rgba(100%,100%,100%, 1); color: hsl(0, 100%, 100%); color: hsla(0, 100%, 100%, 1); color: transparent; color: currentColor;
color:hsla( 328, Hblah100%, S 44%, L 1.00 A );
100% — FF 95% — F2 90% — E6 85% — D9 80% — CC 75% — BF 70% — B3 65% — A6 60% — 99 55% — 8C
50% — 80 45% — 73 40% — 66 35% — 59 30% — 4D 25% — 40 20% — 33 15% — 26 10% — 1A 5% — 0D 0% — 00
opacity: 1;
opacity: 0.75;
opacity: 0.5;
opacity: 0.25;
opacity: 0;
color: rgba(0, 0, 0, 1);
background-color: rgba(58, 103, 171, 1);
color: rgba(0, 0, 0, 0.75);
background-color: rgba(58, 103, 171, 0.75);
color: rgba(0, 0, 0, 0.5;
background-color: rgba(58, 103, 171, 0.5);
color: rgba(0, 0, 0, 0.25);
background-color: rgba(58, 103, 171, 0.25);
color: rgba(0, 0, 0, 0)
background-color: rgba(58, 103, 171, 0);
rgba(58, 103, 171, 0.5); hsla(216, 49%, 45%, 0.5);
.trans { box-shadow: -10px 10px rgba(0,0,0,0.3);
text-shadow: 0 21px 1px rgba(0,0,0,0.3);}
.solid { box-shadow: -10px 10px #999;
text-shadow: 0 21px 1px #999;}
Look at the color picker.
Check color contrast
Use color eye-dropper to select color
Check out CSS variables
Let's continue on with our card example just a bit.
Make the diamond and hearts cards red.
/* red cards */
[data-type="H" i],
[data-type="D" i] {
color: red;
}
Make the spades and clubs black
/* black cards */
[data-type="C" i],
[data-type="S" i] {
color: black;
}
Make the letter/number in corners bigger.
Make the text node (the heart, diamond, spade, club) bigger
.face {
font-size: 2rem;
}