00:00:06
um welcome to my talk uh I titled it
00:00:10
what the hashtag hacks in OK lch which
00:00:13
is kind of ambiguous um I I'm basically
00:00:17
going to talk about modern and old CSS
00:00:21
color functions and then move on to
00:00:25
color spaces and what all that means uh
00:00:28
and to begin I'm I'm going to start with
00:00:30
good old trusted hex and
00:00:33
RGB um yeah so if you've done CSS you
00:00:39
know both of these very basic we have
00:00:41
hashtag badass and the RGB equivalent
00:00:44
which gives us that
00:00:45
lovely puke green
00:00:49
color um now in the recent CSS versions
00:00:54
we now have a new notation which I will
00:00:58
use from now on uh you can now write
00:01:00
instead of using commas you can now just
00:01:02
use spaces and separate Alpha with a
00:01:05
slash so we have red green blue and then
00:01:08
SL
00:01:09
Alpha um then next up we have
00:01:14
hsl as you may also know um this one
00:01:18
unlike RGB doesn't use red green and
00:01:20
blue values uh it has Hue in degrees
00:01:23
from0 to 360 uh and then you can provide
00:01:26
saturation and lightness and Alpha um
00:01:29
saturation and Light I think are pretty
00:01:32
um self-explanatory so saturation is how
00:01:34
much color there is and lightness is how
00:01:36
bright it is but the Hue is a bit weird
00:01:39
and non-intuitive at first because what
00:01:42
do degrees mean uh well it refers to the
00:01:44
color wheel as we see on the picture
00:01:46
here uh which goes from 0 to
00:01:48
360° uh red being zero yellow being 60
00:01:51
and so on uh now both hex RGB and hsl
00:01:56
operate on the srgb color space but what
00:02:00
exactly is that well srgb has some
00:02:03
amount of color that you can display
00:02:04
with it um but in modern days now we
00:02:09
can have wider color gamuts as it's
00:02:12
known such as P3
00:02:15
which I'm guessing this display doesn't
00:02:18
really support because they these look
00:02:19
the same but um if you were to compare
00:02:22
them on a P3 bci3 supported monitor like
00:02:25
the right one would be slightly more
00:02:28
saturated looking
00:02:30
um which you cannot get with RGB and hsl
00:02:35
so if you want to go into wider color
00:02:37
gamuts you can technically use the color
00:02:41
function and provide the you can tell at
00:02:44
which color space you want to work with
00:02:46
for example the P3 here and then C1 C2
00:02:49
and C3 basically refer to a refer to the
00:02:54
coordinates in that color space say
00:02:56
similar to RGB but not entirely the
00:03:01
same um now the thing with these is for
00:03:04
example if you want to make a color
00:03:06
theme on the for for example for a front
00:03:08
end it maybe isn't the most intuitive to
00:03:12
for example say oh I want to have a
00:03:14
slightly desaturated version of this
00:03:16
color when I when I hover off it or
00:03:19
something because you're dealing with
00:03:21
RGB values so it's not the most obvious
00:03:24
where to go uh unless if you use hsl uh
00:03:28
which works uh um but if you want to go
00:03:31
to something modern that supports more
00:03:34
color like white color gamuts we go we
00:03:37
get to the title of the presentation OK
00:03:39
okl ch um which at first glance looks
00:03:44
very similar to hsl so we have and kind
00:03:47
of importantly perceived lightness uh
00:03:49
chroma and Hue um chroma chroma is
00:03:53
basically the same as saturation Hue is
00:03:55
same as in hsl uh except it's using
00:03:59
different values it's not in degrees it
00:04:00
has its
00:04:01
own um numbering system uh but the
00:04:05
difference here is the lightness cuz in
00:04:07
hsl the lightness does technically refer
00:04:10
to how light a color is but that's not
00:04:16
always consistent if you go through
00:04:18
different Hues through the color wheel
00:04:21
uh which is why okl okl CH is better um
00:04:25
because it maintains lightness
00:04:28
throughout so it's the way we perceive
00:04:30
lightness with our eyes instead of um
00:04:34
just some arbitrary value for a color uh
00:04:38
and it operates in the OK La OAB um
00:04:42
color space which is modeled to
00:04:44
basically
00:04:45
represent all colors visible to human
00:04:48
eyes as opposed to just some set of
00:04:52
colors that machines can
00:04:53
reproduce uh and when I mentioned
00:04:56
perceived lightness uh we can now
00:04:58
compare h cell
00:05:00
to lch so the order here is mixed up
00:05:05
because we have hug saturation and
00:05:07
lightness and in lch it's slightly
00:05:09
flipped uh but the important thing is uh
00:05:12
we can see lightness in both looks the
00:05:14
same and chroma looks the same between
00:05:18
saturation and chroma but then in hsl as
00:05:22
we go through Hues we can see that
00:05:25
they're not very consistent in terms of
00:05:27
lightness so you go from
00:05:30
dark to brighter to dark to brighter
00:05:33
depending on the angle of color you have
00:05:35
whereas in lch as you go through hu it's
00:05:38
much more consistent in terms of
00:05:40
lightness um the why that's important is
00:05:44
if we take examp for an example for
00:05:46
example buttons uh in hsl if you were to
00:05:50
keep the uh lightness and uh saturation
00:05:55
values the same but just rotated the
00:05:57
Hue you would get into like low contrast
00:06:02
problems which can lead to issues in the
00:06:05
front on the front end for like user
00:06:06
experience whereas in okl
00:06:09
okl um it's much more consistent in
00:06:12
terms of
00:06:13
lightness um another benefit is when we
00:06:17
talk about gradients which was also a
00:06:19
working title for this
00:06:20
presentation um in lch when you have
00:06:24
gradients they sometime they usually
00:06:26
look nicer than if you were using hsl
00:06:29
RGB uh transitions just because of how
00:06:33
the color space Works uh now I've been
00:06:36
talking about color spaces and color
00:06:40
gamuts uh but what is this really um in
00:06:44
general we usually see our
00:06:46
representation like this uh we have a
00:06:49
mapping
00:06:50
of colors we can see but our computers
00:06:55
and displays and phones cannot reproduce
00:06:57
all of them uh most commonly um we had
00:07:01
the srgb color space which is the
00:07:02
brightest here and as we can see even if
00:07:05
you go up to DCI P3 which I also
00:07:07
mentioned we already cover I think
00:07:09
roughly 30% more colors uh don't quote
00:07:13
me on that one uh and then of course as
00:07:15
you go up to Adobe RGB or Rec 2020 you
00:07:18
get even more possible color
00:07:20
reproduction
00:07:22
uh
00:07:24
now yeah um the thing with OK okl CH is
00:07:29
is as I mentioned it's mapped to
00:07:32
represent all colors that we can
00:07:34
perceive as humans which means that if
00:07:38
you have a regular display at some point
00:07:42
when you go through some values you stop
00:07:45
noticing differences between colors
00:07:46
because you actually run out of like
00:07:48
color space your monitor cannot
00:07:50
reproduce these
00:07:51
colors um and I have a demo here as well
00:07:57
if I'll just use this one
00:08:02
this is if you're used to hsl color
00:08:05
Pickers you know we usually get the
00:08:07
square with the colors and then you set
00:08:10
uh saturation and and lightness but here
00:08:12
we can see uh as we go
00:08:15
through uh for example different Hues or
00:08:21
lightness
00:08:23
the the chroma part like changes based
00:08:27
on what's available and when I mention
00:08:31
color spaces I currently have selected
00:08:33
the srgb color space here and then you
00:08:37
can go beyond into dcp3 for example
00:08:40
which as we can see is not available on
00:08:42
this monitor so nothing really changes
00:08:44
in terms of this the the browser just
00:08:46
falls back to the closest srgb
00:08:49
Value
00:08:52
um yes but I okay I think I think we're
00:08:55
good
00:08:57
now can we can we get the yes yes so uh
00:09:02
moving on I don't see what my next slide
00:09:04
is for some
00:09:06
reason yes uh and I when I I also
00:09:09
mentioned that modern monitors have like
00:09:11
limited color uh reproduction
00:09:14
capabilities so when you go shopping for
00:09:15
a new screen you may
00:09:17
see the color gamut listed in percentage
00:09:20
of like what the display can reproduce
00:09:23
um
00:09:23
so I I took an example of one that I
00:09:26
have that now I think Victor has uh
00:09:28
which covers like 99% of adobe RGB and
00:09:32
98% of
00:09:34
dcp3 yes uh I mean b basically if you do
00:09:39
professional work with color you want as
00:09:41
much color reproduction as you can uh so
00:09:45
I hope this helps you now understand at
00:09:48
least what these numbers mean uh it's
00:09:51
basically the amount of color from that
00:09:53
color space you can
00:09:55
reproduce uh and since we have a bit
00:09:57
more time I have
00:10:00
another St that will probably break my
00:10:02
presentation uh I wanted to see if we
00:10:04
can do the daily hex call if any of you
00:10:07
know know what wle is um we have hex Cod
00:10:14
yes the the idea here is we have to
00:10:18
guess what this target color is so if
00:10:21
anyone has any idea where to start uh we
00:10:25
could although I can see it's it diff
00:10:28
between that and that I think that's a
00:10:29
bit bright
00:10:30
but yeah
00:10:33
um
00:10:35
D are you sure that's a bit
00:10:38
bright maybe maybe maybe
00:10:42
90 do we have any green or blue I don't
00:10:44
know possibly 32 17 let's go we are way
00:10:51
off
00:10:54
well the L the good thing with uh hex
00:10:57
hex codal is it gives you like it tells
00:10:59
you how far off you are so I'm guessing
00:11:02
this is like a bit lower so it might be
00:11:05
76
00:11:08
20 7
00:11:11
29 I got more
00:11:13
close uh so it's 84
00:11:19
20
00:11:24
27 it's much lower than
00:11:27
okay two
00:11:32
c29
00:11:39
no let's do
00:11:42
81 no no because it's slower uh 81 20 to
00:11:48
be
00:11:50
to8 hey we didn't do
00:11:53
it almost
00:11:56
yeah uh
00:12:00
and then yeah I I hope any of this
00:12:04
information will be useful when you chop
00:12:06
for monitors from now on or use make CSS
00:12:10
color themes and stuff um it's I always
00:12:13
was interested in in CSS and colors So
00:12:17
yeah thank
00:12:22
you with with only minor technical
00:12:27
difficulties much
00:12:30
yeah any
00:12:37
questions what if we write the new
00:12:39
notation and the browser doesn't support
00:12:42
uh I think all browsers now support this
00:12:46
as part of the CSS color module level
00:12:49
four I
00:12:50
believe um but otherwise I think the
00:12:54
browser also falls back to the old
00:12:56
notation so probably we need to write it
00:12:59
two times just in case uh possibly I
00:13:03
would I have I'll check
00:13:09
yeah so for your uh main screens where
00:13:12
you have some uh gradients what are the
00:13:15
Cod is it the new one is it based
00:13:19
on the okay low calorie high fat oh I I
00:13:23
I I haven't I haven't sadly had a use
00:13:25
for gradients in a web app in a while so
00:13:29
uh it's I guess it's more a concern if
00:13:31
you write color themes like theming in
00:13:34
an app um which I'm not that experienced
00:13:37
with but I assume if you want a really
00:13:40
robust system you could go with okay
00:13:43
okay
00:13:44
lch uh
00:13:46
yeah I've I've used color systems which
00:13:49
is like hex codes which ended up needing
00:13:52
a lot of uh different variables with
00:13:57
specific hex codes which
00:14:00
yeah there there's also a lot of new
00:14:02
like functions you can use with colors
00:14:05
to I think uh there's upcoming support
00:14:08
even uh for
00:14:11
um you can you can create things from a
00:14:14
color so for example you can you can say
00:14:17
from this color add some chroma or
00:14:19
lightness or or saturation and stuff
00:14:21
like that so you can very easily
00:14:23
manipulate uh stuff
00:14:27
yeah I think about access ability uh
00:14:30
let's say I want I'm aiming it some
00:14:32
contrast uh or a button have right and
00:14:35
then I'm rotating the color of a button
00:14:38
around the SK uh does it uh retain the
00:14:41
contrast or that's that's the that's the
00:14:43
benefit of okl C ch um it's the
00:14:48
perceived lightness is always the same
00:14:51
so if you rotate the whole color wheel
00:14:52
it's it should always have consistent
00:14:55
contrast whereas if you had hsl you
00:14:57
might go from a blue where the contrast
00:15:00
is okay to way yellow where the contrast
00:15:02
just falls off uh so yeah the idea is
00:15:04
that it's more consistent throughout the
00:15:08
the colors um you were showing the
00:15:11
example with
00:15:13
the website how did the browser exactly
00:15:16
know like what colors your screen
00:15:20
supported uh I think that's a that's
00:15:24
what the it's up to the browser to
00:15:27
support colors and then I think with
00:15:30
possibly JavaScript you can you can
00:15:31
check it was actually the browser not
00:15:34
supporting those ranges that's
00:15:37
why I I I guess it's in multiple stages
00:15:40
it's first on the OS level you have what
00:15:42
display you have so the OS knows which
00:15:45
color like for example if you have like
00:15:47
10 bit color 12 bit or 8 bit it knows
00:15:50
that and then it goes to the browser um
00:15:53
which then I guess can read from the OS
00:15:56
and then down passes down the support to
00:15:59
your JavaScript and stuff uh that's why
00:16:02
um for example the the demo I had uh
00:16:05
with the Color Picker if you open it in
00:16:07
Firefox it defaults to only showing srgb
00:16:10
because Firefox I think still doesn't
00:16:12
support like white color gamuts but if
00:16:14
you open it it in Chrome it supports the
00:16:16
wider color gamut um which yeah then
00:16:20
shows more color and what about
00:16:22
saari I didn't check but I I think
00:16:25
Safari was one of the first ones that
00:16:27
supported this stuff uh at least
00:16:29
According to some articles I read like
00:16:30
oh this is only supported in Safari U
00:16:32
but now I think all of them have like
00:16:34
Baseline support
00:16:36
so thank you that's it one more Applause
00:16:38
for tamas
