Day 39: comma-separated functional color notations

On day 11 I’ve introduced you to space-separated functional color notations. Early color functions like rgb() and hsl() support both the old comma-separated and the new space-separated syntax./* ✅ works */
div {
backg…


This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović

On day 11 I've introduced you to space-separated functional color notations. Early color functions like rgb() and hsl() support both the old comma-separated and the new space-separated syntax.

/* ✅ works */
div {
  background-color: rgb(255, 210, 210);
  color: hsl(150, 76%, 20%);
}

/* ✅ works */
div {
  background-color: rgb(255 210 210);
  color: hsl(150 76% 20%);
}

On the other hand, new color functions like lab(), hwb(), lch(), or oklch() only support the space-separated syntax.

/* ✅ works */
div {
  background-color: hwb(0deg 82% 0%);
  color: lab(33% -31 16);
}

/*  ❌ doesn't work */
div {
  background-color: hwb(0deg, 82%, 0%);
  color: lab(33%, -31, 16);
}

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.


This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović


Print Share Comment Cite Upload Translate Updates
APA

Manuel Matuzović | Sciencx (2022-11-17T00:00:00+00:00) Day 39: comma-separated functional color notations. Retrieved from https://www.scien.cx/2022/11/17/day-39-comma-separated-functional-color-notations-2/

MLA
" » Day 39: comma-separated functional color notations." Manuel Matuzović | Sciencx - Thursday November 17, 2022, https://www.scien.cx/2022/11/17/day-39-comma-separated-functional-color-notations-2/
HARVARD
Manuel Matuzović | Sciencx Thursday November 17, 2022 » Day 39: comma-separated functional color notations., viewed ,<https://www.scien.cx/2022/11/17/day-39-comma-separated-functional-color-notations-2/>
VANCOUVER
Manuel Matuzović | Sciencx - » Day 39: comma-separated functional color notations. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/11/17/day-39-comma-separated-functional-color-notations-2/
CHICAGO
" » Day 39: comma-separated functional color notations." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2022/11/17/day-39-comma-separated-functional-color-notations-2/
IEEE
" » Day 39: comma-separated functional color notations." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2022/11/17/day-39-comma-separated-functional-color-notations-2/. [Accessed: ]
rf:citation
» Day 39: comma-separated functional color notations | Manuel Matuzović | Sciencx | https://www.scien.cx/2022/11/17/day-39-comma-separated-functional-color-notations-2/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.