|
| 1 | +/* see also https://developer.mozilla.org/en-US/docs/Web/CSS/color |
| 2 | + * and https://www.w3schools.com/colors/colors_converter.asp */ |
| 3 | + |
| 4 | +i { background: #359 } |
| 5 | +b { background: #335599 } |
| 6 | +u { color: #12345678; background: rgba(144, 0, 0, .5) } |
| 7 | +s { color: #1234; background: hsl(0, 100%, 50%) } |
| 8 | +p { color:rebeccapurple; background-color:rgb(222 255 202 / 0.2) } |
| 9 | + |
| 10 | +/* These are all pretty much the same color (barring rounding and alpha) */ |
| 11 | +a.rgb { color: rgb(0, 17, 136); } /* no alpha */ |
| 12 | +a.rgb1 { color: rgb(0, 17, 136, 1); } /* alpha but fully opaque */ |
| 13 | +a.rgba { color: rgba(0, 17, 136, 1); } /* explicit alpha but fully opaque */ |
| 14 | +a.rgbp { color: rgb(0, 17, 136, 50%); } /* half transparent (via percent) */ |
| 15 | +a.rgb0 { color: rgb(0, 17, 136, 0.1); } /* very transparent */ |
| 16 | +a.rgbz { color: rgb(0, 17, 136, 0); } /* fully transparent */ |
| 17 | +a.sp { color:rgb(0 , 17, 136, 0.3) } /* extra spaces */ |
| 18 | +a.rgbd { color: rgb(0, 16.99, 136); } /* CSS supports decimals! */ |
| 19 | +a.cc{color:rgb(0,17,136,.3)} /* compact with commas */ |
| 20 | +a.cs{color:rgb(0 17 136/.3)} /* compact with spaces and slash */ |
| 21 | +a.h3 { color: #018; } /* same color but in hex (3char) */ |
| 22 | +a.h6 { color: #001188; } /* same color but in hex (6char) */ |
| 23 | +a.h8 { color: #001188ff; } /* same color but in hex (8char) */ |
| 24 | +a.hlcs { color:hsl(232.5 100% 27%); } /* same color but hsl with spaces */ |
| 25 | +a.hslc { color:hsl(232.5, 100%, 27%) } /* same color but hsl, commas */ |
| 26 | +a.hlca { color:hsl(232.5, 100%, 27%, 100%); } /* same color but hsla */ |
| 27 | +a.hwb { color:hwb(232.5, 0%, 46.5%); } /* same color but hwb */ |
| 28 | + |
| 29 | +/* out of bounds but accepted by browsers */ |
| 30 | +a.rgboob { color:rgb(0,17,256); } |
| 31 | +a.rgbaoob1 { color:rgb(0,17,255, 1.1); } |
| 32 | +a.rgbaoob2 { color:rgb(0,17,255, 2); } |
| 33 | +a.hsloob101 { color:hsl(256, 200%, 27%); } |
| 34 | + |
| 35 | +/* are we rounding too much? these should be different */ |
| 36 | +u.round1 { color: rgb(10.9% 123 122.5) } /* should be #1c7b7b */ |
| 37 | +u.round2 { color: rgb(10.0% 123 123.4) } /* should be #1a7b7b */ |
| 38 | +u.round3 { color: hsl(180 65% 29%) } /* should be #197a7a */ |
| 39 | + |
| 40 | +*::color1 { -x-: #359 } |
| 41 | +*::color2 { -x-: #335599 } |
| 42 | +*::color3 { -x-: rgba(144, 0, 0, .5) } |
| 43 | +*::color4 { -x-: hsl(0, 100%, 50%) } |
| 44 | + |
| 45 | +/* |
| 46 | + * #123, #456 |
| 47 | + */ |
| 48 | + |
| 49 | +/* #123456 */ |
| 50 | + |
| 51 | +.do_color_me::after { color: rgb(123, 234, 0) } |
| 52 | + |
| 53 | +ul { color: white; } |
| 54 | + |
| 55 | +td { border: solid red 4px; } |
| 56 | +td { border: solid #f00d 4px; } |
| 57 | + |
| 58 | +:root { --variable-test: rgb(1, 2, 3); } |
| 59 | +button { color: yellow; background: var(--variable-test); } |
| 60 | + |
| 61 | +/* These are all the same color: */ |
| 62 | +h1.hex { color: #7ab899; } |
| 63 | +h1.num { color: hsl(150, 30%, 60%); } |
| 64 | +h1.num { color: hsla(870, 30%, 60%, 1); } |
| 65 | +h1.num { color: hsl(-210, 30%, 60%); } |
| 66 | +h1.deg { color: hsl(150deg, 30%, 60%); } |
| 67 | +h1.grad { color: hsl(166.7grad, 30%, 60%); } |
| 68 | +h1.turn { color: hsl(0.41667turn, 30%, 60%); } |
| 69 | +h1.tuac { color: hsl(0.41667turn, 30%, 60%, 1); } |
| 70 | +h1.tuas { color: hsl(0.41667turn 30% 60% / 1); } |
| 71 | + |
| 72 | +/* hwb(), hue/whiteness/blackness |
| 73 | + * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hwb |
| 74 | + * These are all the same color: */ |
| 75 | +a.a { color: hwb(90 10% 10%); } |
| 76 | +a.b { color: hwb(90 10% 10% / 0.5); } |
| 77 | +a.c { color: hwb(90deg 10% 10%); } |
| 78 | +a.d { color: hwb(1.5708rad 10% 10%); } |
| 79 | +a.e { color: hwb(0.25turn 10% 10% / 50%); } |
| 80 | + |
| 81 | +q { border-color: tan; } |
| 82 | + |
| 83 | +/* these should NOT be colored */ |
| 84 | +.dont_color_me::after { content: "color: rgb(123, 234, 0)" } |
| 85 | +#abcdef { border-color: unset; } |
| 86 | +p.tan { color: inherit; width: calc(100px * tan(45deg)); } |
| 87 | +a.cs1 { color: rgb(0, 17, 136 / 100%); } /* you can't mix commas and slash */ |
| 88 | +a.cs2 { color: rgb(0 17 136, 100%); } /* you can't mix spaces and commas */ |
| 89 | +a.cs3 { color: rgb(0 17 136 1); } /* alpha with spaces must use slash */ |
| 90 | +a.cs4 { color: rgb(0 17 136 100%); } /* alpha with spaces must use slash */ |
| 91 | +a.cs4 { color: rgb(0turn 17 136); } /* angular units aren't allowed in rgb */ |
| 92 | +h1.nonpct1 { color: hsl(150%, 30%, 60%); } |
| 93 | +h1.nonpct1 { color: hsl(150, 30, 60%); } |
| 94 | +h1.nonpct2 { color: hsl(150, 30%, 60); } |
| 95 | +h1.nonpct3 { color: hsl(150, 30, 60); } |
| 96 | +a.a { color: hwb(90% 10% 10%); } |
| 97 | +a.a { color: hwb(90 10 10%); } |
| 98 | +a.a { color: hwb(90 10% 10); } |
| 99 | +a.h5 { color: #00118; } |
| 100 | +a.h7 { color: #001188f; } |
| 101 | +a.h9 { color: #001188fff; } |
| 102 | + |
0 commit comments