summaryrefslogtreecommitdiffstats
path: root/2024
diff options
context:
space:
mode:
Diffstat (limited to '2024')
-rw-r--r--2024/captions/emacsconf-2024-color--colour-your-emacs-with-ease--ryota--main--chapters.vtt20
-rw-r--r--2024/captions/emacsconf-2024-color--colour-your-emacs-with-ease--ryota--main.vtt541
-rw-r--r--2024/info/color-after.md202
-rw-r--r--2024/info/color-before.md10
4 files changed, 772 insertions, 1 deletions
diff --git a/2024/captions/emacsconf-2024-color--colour-your-emacs-with-ease--ryota--main--chapters.vtt b/2024/captions/emacsconf-2024-color--colour-your-emacs-with-ease--ryota--main--chapters.vtt
new file mode 100644
index 00000000..8ea4ab36
--- /dev/null
+++ b/2024/captions/emacsconf-2024-color--colour-your-emacs-with-ease--ryota--main--chapters.vtt
@@ -0,0 +1,20 @@
+WEBVTT
+
+
+00:00:00.000 --> 00:00:58.667
+Introduction
+
+00:00:58.668 --> 00:03:42.119
+What colour do you like?
+
+00:03:42.120 --> 00:06:25.884
+Colour spaces: HSL, LCH , and more
+
+00:06:25.885 --> 00:08:08.399
+color.el and ct.el
+
+00:08:08.400 --> 00:11:06.239
+Hasliberg theme
+
+00:11:06.240 --> 00:11:48.400
+Wrap up
diff --git a/2024/captions/emacsconf-2024-color--colour-your-emacs-with-ease--ryota--main.vtt b/2024/captions/emacsconf-2024-color--colour-your-emacs-with-ease--ryota--main.vtt
new file mode 100644
index 00000000..e9bbd7ca
--- /dev/null
+++ b/2024/captions/emacsconf-2024-color--colour-your-emacs-with-ease--ryota--main.vtt
@@ -0,0 +1,541 @@
+WEBVTT captioned by sachac
+
+NOTE Introduction
+
+00:00:00.000 --> 00:00:11.327
+Hi, EmacsConf. This is "Colour your Emacs with ease".
+
+00:00:11.328 --> 00:00:14.848
+I'm Ryota Sawada, and today's agenda is:
+
+00:00:14.849 --> 00:00:16.649
+start with a brief introduction.
+
+00:00:16.650 --> 00:00:19.719
+I will be talking about colours quite a bit.
+
+00:00:19.720 --> 00:00:21.452
+What colours do you like?
+
+00:00:21.453 --> 00:00:23.599
+Colour spaces and some packages such
+
+00:00:23.600 --> 00:00:27.879
+as color.el, ct.el. I'll be touching on a theme called
+
+00:00:27.880 --> 00:00:31.056
+Hasliberg theme, which I created,
+
+00:00:31.057 --> 00:00:34.139
+before wrapping up the talk.
+
+00:00:34.140 --> 00:00:36.959
+A quick introduction about the talk. The slide is
+
+00:00:36.960 --> 00:00:40.559
+available as an Org mode file at Codeberg. If you're
+
+00:00:40.560 --> 00:00:43.519
+looking at it from Org mode, you probably want to have
+
+00:00:43.520 --> 00:00:47.639
+rainbow mode turned on for the best viewing. This is the
+
+00:00:47.640 --> 00:00:52.559
+case with the presentation today. I'm Ryota Sawada and I'm
+
+00:00:52.560 --> 00:00:58.667
+available at rytswd at usual places.
+
+NOTE What colour do you like?
+
+00:00:58.668 --> 00:01:01.290
+What colour do you like?
+
+00:01:01.291 --> 00:01:04.999
+You might be able to tell I like orange. That's
+
+00:01:05.000 --> 00:01:07.856
+the colour that I use often.
+
+00:01:07.857 --> 00:01:09.958
+Emacs gives me all the control I want,
+
+00:01:09.959 --> 00:01:13.119
+so naturally I wanted to make it aesthetically
+
+00:01:13.120 --> 00:01:16.023
+pleasing to my taste, which meant that
+
+00:01:16.024 --> 00:01:19.725
+I would like to have a dark theme, subtle theme
+
+00:01:19.726 --> 00:01:23.767
+with orange as a main accent colour, but not
+
+00:01:23.768 --> 00:01:26.803
+too orange, so not everything very orange.
+
+00:01:26.804 --> 00:01:29.673
+Maybe use another blue-ish colour
+
+00:01:29.674 --> 00:01:32.929
+as another accent. Note that this presentation is
+
+00:01:32.930 --> 00:01:36.199
+based on the Hasliberg theme, more on that
+
+00:01:36.200 --> 00:01:40.599
+later. But when I started my Emacs journey, I didn't start
+
+00:01:40.600 --> 00:01:45.199
+with creating a new theme from get-go. I started with a theme
+
+00:01:45.200 --> 00:01:49.479
+called Nova Theme. I really liked it. I made a few tweaks
+
+00:01:49.480 --> 00:01:55.039
+around Org Mode and headings, so that they were a bit more was
+
+00:01:55.040 --> 00:02:00.759
+my liking, which was around orange being sprinkled across.
+
+00:02:00.760 --> 00:02:07.959
+I got to it very nice looking and I really liked it, but when
+
+00:02:07.960 --> 00:02:13.839
+I started a lot of coding tasks with it, I realized one
+
+00:02:13.840 --> 00:02:19.799
+thing: that it was very colourful, and in a way, distracting.
+
+00:02:19.800 --> 00:02:24.039
+it actually wasn't about Nova Theme's fault. It was just
+
+00:02:24.040 --> 00:02:27.479
+many editors, including Emacs and VS Code and other editors
+
+00:02:27.480 --> 00:02:31.679
+and modern themes, are filled with colours. Let's have a
+
+00:02:31.680 --> 00:02:38.039
+look. At the top left, you can see Nova theme with a bit of a
+
+00:02:38.040 --> 00:02:42.239
+pale greenish background with a few colours. Purple,
+
+00:02:42.240 --> 00:02:47.399
+pink, blue, green. You can see some colours like that with
+
+00:02:47.400 --> 00:02:51.519
+Nova theme. Nice looking colours, but still colourful. Modus
+
+00:02:51.520 --> 00:02:56.079
+Vivendi Tinted, bottom left, is also very nice looking
+
+00:02:56.080 --> 00:02:59.360
+modern theme, but quite colourful. The same can be said
+
+00:02:59.361 --> 00:03:03.134
+for ef-themes, owl edition at top right,
+
+00:03:03.135 --> 00:03:07.979
+and Doom Noe as another, bottom right.
+
+00:03:07.980 --> 00:03:13.759
+That led me to think: how can I make my code editing
+
+00:03:13.760 --> 00:03:18.599
+and coding tasks not too distracting, and I can focus on
+
+00:03:18.600 --> 00:03:22.759
+writing code. That was something I could manage with Org
+
+00:03:22.760 --> 00:03:26.399
+Mode, where I just specifically, basically used orange
+
+00:03:26.400 --> 00:03:29.399
+shades and not too much more. That's what you're seeing at
+
+00:03:29.400 --> 00:03:33.519
+the moment. I wanted to do something similar with coding
+
+00:03:33.520 --> 00:03:37.959
+and any general code. That led me to the journey of
+
+00:03:37.960 --> 00:03:42.119
+creating my own theme.
+
+NOTE Colour spaces: HSL, LCH , and more
+
+00:03:42.120 --> 00:03:44.679
+But before going to the theme, I need to talk about colour
+
+00:03:44.680 --> 00:03:49.079
+spaces. sRGB, standard RGB, is probably something that
+
+00:03:49.080 --> 00:03:53.439
+many people are familiar with. HSL is for hue, saturation,
+
+00:03:53.440 --> 00:03:58.359
+lightness. LCH is for luminance or lightness, chroma, and
+
+00:03:58.360 --> 00:04:03.319
+hue. Those are the colour spaces probably common used in
+
+00:04:03.320 --> 00:04:07.999
+various spaces, but when it comes to perceptual uniformity,
+
+00:04:08.000 --> 00:04:11.599
+there is an important difference between the colour
+
+00:04:11.600 --> 00:04:14.799
+spaces. Human perception of colour is not very
+
+00:04:14.800 --> 00:04:17.879
+straightforward. We can see in the reference here...
+
+00:04:17.880 --> 00:04:19.506
+Let's have a look.
+
+00:04:19.507 --> 00:04:23.159
+At the top you can see the shade coming from left
+
+00:04:23.160 --> 00:04:26.370
+green to the right blue,
+
+00:04:26.371 --> 00:04:30.959
+and in the top image, you can see half of
+
+00:04:30.960 --> 00:04:34.520
+it, perhaps, is very similar green colour
+
+00:04:34.521 --> 00:04:36.141
+and then when it comes to blue,
+
+00:04:36.142 --> 00:04:40.239
+you can see more of the different colour gradients
+
+00:04:40.240 --> 00:04:45.559
+coming into play. The bottom colour space is based on a
+
+00:04:45.560 --> 00:04:50.479
+perceptually uniform colour space, which gives us a bit more
+
+00:04:50.480 --> 00:04:55.039
+evenly distributed colour gradient, which will be
+
+00:04:55.040 --> 00:04:59.039
+something more suitable for deciding on the theme setup and
+
+00:04:59.040 --> 00:05:03.999
+the colour setup, where you can have various themes that are
+
+00:05:04.000 --> 00:05:10.439
+defined for human perceptions.
+
+00:05:10.440 --> 00:05:14.319
+Perceptual uniformity is important. For that, it is
+
+00:05:14.320 --> 00:05:17.879
+important to mention about CIE, or "International
+
+00:05:17.880 --> 00:05:23.479
+Commission of Illumination" in English. They created
+
+00:05:23.480 --> 00:05:29.479
+important colour spaces called CIE XYZ which was from 1931,
+
+00:05:29.480 --> 00:05:33.319
+CIELAB, and LUV, 1976,
+
+00:05:33.320 --> 00:05:37.519
+respectively. Those are the colour spaces used in various
+
+00:05:37.520 --> 00:05:41.839
+fields and industries and still relevant. There is a
+
+00:05:41.840 --> 00:05:44.898
+quite a bit that you can read up on.
+
+00:05:44.899 --> 00:05:48.960
+I'm not a colour expert so have some references here,
+
+00:05:48.961 --> 00:05:52.519
+but the TLDR of all of that is
+
+00:05:52.520 --> 00:05:57.525
+consider using LCH variants over RGB or HSL
+
+00:05:57.526 --> 00:06:00.606
+for better perceptual uniformity.
+
+00:06:00.607 --> 00:06:03.959
+Specifically CIE Lab-based LCH,
+
+00:06:03.960 --> 00:06:06.709
+which is often called Lab LCH
+
+00:06:06.710 --> 00:06:10.359
+or just LCH. CIELUV-based LCH
+
+00:06:10.360 --> 00:06:16.519
+is called LUV LCH. There is a new rather modern LCH setup
+
+00:06:16.520 --> 00:06:19.996
+called OK LCH which is based on OK Lab.
+
+00:06:19.997 --> 00:06:22.099
+So those are the colour spaces
+
+00:06:22.100 --> 00:06:24.279
+that are worth looking at when it comes to creating
+
+00:06:24.280 --> 00:06:25.884
+shades.
+
+NOTE color.el and ct.el
+
+00:06:25.885 --> 00:06:29.759
+How do you create shades? Color.el and ct.el are
+
+00:06:29.760 --> 00:06:33.199
+great solutions. You can create shades and different
+
+00:06:33.200 --> 00:06:37.799
+colours based on RGB and hex. You can see in the red example
+
+00:06:37.800 --> 00:06:43.839
+here, FF0000 is a bright red. You can darken it by providing
+
+00:06:43.840 --> 00:06:48.639
+less red values like CC or 88. You can see that the colours
+
+00:06:48.640 --> 00:06:52.839
+are slightly darker than the FF0000. But what if you are
+
+00:06:52.840 --> 00:06:57.439
+working with the complex colours such as FBB151, this
+
+00:06:57.440 --> 00:07:01.879
+particular orange? That's where color.el, ct.el come
+
+00:07:01.880 --> 00:07:05.743
+into play. Color.el is a built-in package in Emacs,
+
+00:07:05.744 --> 00:07:08.340
+so you can use it by just requiring it.
+
+00:07:08.341 --> 00:07:10.399
+color-darken-name and
+
+00:07:10.400 --> 00:07:13.905
+providing the colour with the hex value with 40%
+
+00:07:13.906 --> 00:07:16.886
+gives you a darker orange
+
+00:07:16.887 --> 00:07:20.039
+without doing too much of a colour computation
+
+00:07:20.040 --> 00:07:23.839
+by hand. This hex value is something that Emacs
+
+00:07:23.840 --> 00:07:27.319
+understands and rainbow mode does as well. When it comes
+
+00:07:27.320 --> 00:07:30.839
+to ct.el, it's not a built-in solution, but it's more
+
+00:07:30.840 --> 00:07:34.839
+versatile. It works with various colour spaces so you can
+
+00:07:34.840 --> 00:07:41.239
+see that ct-edit-hsl-l-dec by 40% would give
+
+00:07:41.240 --> 00:07:47.759
+us a darker colour by 40%. We can also use LCH variant which
+
+00:07:47.760 --> 00:07:53.479
+can use the LCH colour spaces for darkening the colour. This
+
+00:07:53.480 --> 00:07:56.919
+results in slightly different colours for this particular
+
+00:07:56.920 --> 00:08:00.199
+orange, but if you're working with the green or blue or some
+
+00:08:00.200 --> 00:08:04.177
+other colours, it might be worth looking at LCH variant
+
+00:08:04.178 --> 00:08:08.399
+rather than other colour spaces.
+
+NOTE Hasliberg theme
+
+00:08:08.400 --> 00:08:11.203
+With that, let's have a look at Hasliberg theme.
+
+00:08:11.204 --> 00:08:13.707
+This is a theme that I created personally
+
+00:08:13.708 --> 00:08:16.409
+and the name is based on the Swiss Alps
+
+00:08:16.410 --> 00:08:20.479
+and with the following ideas in mind. It focuses
+
+00:08:20.480 --> 00:08:25.031
+on setting up shades. Shades, by that...
+
+00:08:25.032 --> 00:08:26.999
+You can see how the top
+
+00:08:27.000 --> 00:08:31.839
+of the heading here is a bright orange colour, and
+
+00:08:31.840 --> 00:08:35.758
+other orange colours, this heading and this heading
+
+00:08:35.759 --> 00:08:37.719
+are based on the top
+
+00:08:37.720 --> 00:08:40.839
+orange colour and then giving some shade and the luminance
+
+00:08:40.840 --> 00:08:44.639
+adjustment essentially. It follows a pattern from web
+
+00:08:44.640 --> 00:08:49.039
+design and tailwind colour shades are a great example that
+
+00:08:49.040 --> 00:08:50.815
+you can have a look.
+
+00:08:50.816 --> 00:08:54.439
+It does not use ct.el as it aims to be fully
+
+00:08:54.440 --> 00:08:57.999
+dependency free and does not consider colour contrast for
+
+00:08:58.000 --> 00:09:02.119
+accessibility. This is because it's personal and I
+
+00:09:02.120 --> 00:09:04.746
+don't have that particular need.
+
+00:09:04.747 --> 00:09:06.839
+This is based on LuvLCh rather
+
+00:09:06.840 --> 00:09:08.788
+than LAB LCH, and that's another reason
+
+00:09:08.789 --> 00:09:11.049
+why I didn't use ct.el,
+
+00:09:11.050 --> 00:09:14.119
+and it is highly experimental. But the code is
+
+00:09:14.120 --> 00:09:18.279
+available at Codeberg and GitHub just for your reference.
+
+00:09:18.280 --> 00:09:23.719
+Let's see Hasliberg theme in action. This is the theme
+
+00:09:23.720 --> 00:09:27.159
+that we were looking at for org-mode as well, but for the
+
+00:09:27.160 --> 00:09:32.199
+code, in this case Elisp. You can see that the colour is
+
+00:09:32.200 --> 00:09:37.559
+mostly white and blue with orange sprinkled across for
+
+00:09:37.560 --> 00:09:41.559
+string input. You can see some pink showing up as well.
+
+00:09:41.560 --> 00:09:46.399
+Essentially, all the colour setup is done by shades, so most of
+
+00:09:46.400 --> 00:09:51.319
+it is based on white or neutral, and there will be lighter and
+
+00:09:51.320 --> 00:09:56.159
+darker variants that can be set for the primary colour of blue.
+
+00:09:56.160 --> 00:09:59.959
+You can see the darker and brighter and lighter colours
+
+00:09:59.960 --> 00:10:05.279
+being used. With that shade setup, I only have to provide a
+
+00:10:05.280 --> 00:10:09.599
+few colours as the base colours. From there, I can define the
+
+00:10:09.600 --> 00:10:15.959
+shades for the theme setup, which leads to creating a more
+
+00:10:15.960 --> 00:10:20.359
+monotonic colour setup, where this one is a very monotonic,
+
+00:10:20.360 --> 00:10:25.059
+very subtle difference of white colours used for the base
+
+00:10:25.060 --> 00:10:29.039
+colours. I don't have to make too many changes to the colour
+
+00:10:29.040 --> 00:10:32.079
+setup. I just have to provide the base colours that are
+
+00:10:32.080 --> 00:10:36.399
+different. The same can be said for this orange, very orange
+
+00:10:36.400 --> 00:10:39.359
+colour theme, which is based on the base colours of
+
+00:10:39.360 --> 00:10:43.639
+orange-like colours and gives the shade of various
+
+00:10:43.640 --> 00:10:50.719
+different setup. This means that I can use Hasliberg
+
+00:10:50.720 --> 00:10:56.159
+Theme Nature colour palette, and that gives me more of a green
+
+00:10:56.160 --> 00:11:00.839
+based colour where all the base colours are set up with a
+
+00:11:00.840 --> 00:11:06.239
+greenish colour setup.
+
+NOTE Wrap up
+
+00:11:06.240 --> 00:11:10.399
+With that, I would like to wrap up with a few ideas when
+
+00:11:10.400 --> 00:11:13.759
+adjusting themes and working with colours. Maybe consider
+
+00:11:13.760 --> 00:11:19.359
+using CIELAB, CIELUV, or OKLab-based colour spaces that
+
+00:11:19.360 --> 00:11:24.719
+would give you different shades which are easier to work
+
+00:11:24.720 --> 00:11:29.199
+with for human perceptions. color.el and ct.el can be a
+
+00:11:29.200 --> 00:11:32.559
+great tool for making shades and working with colour spaces.
+
+00:11:32.560 --> 00:11:36.239
+Hasliberg theme is yet another theme, highly personal
+
+00:11:36.240 --> 00:11:38.999
+and experimental, but could be an inspiration for your
+
+00:11:39.000 --> 00:11:44.119
+theme journey. With that, why not sprinkle your Emacs with
+
+00:11:44.120 --> 00:11:48.400
+your favourite colours? Thank you.
diff --git a/2024/info/color-after.md b/2024/info/color-after.md
index dbd67a8e..0c1c11aa 100644
--- a/2024/info/color-after.md
+++ b/2024/info/color-after.md
@@ -1,6 +1,208 @@
<!-- Automatically generated by emacsconf-publish-after-page -->
+<a name="color-mainVideo-transcript"></a>
+# Transcript
+
+
+[[!template new="1" text="""Introduction""" start="00:00:00.000" video="mainVideo-color" id="subtitle"]]
+
+[[!template text="""Hi, EmacsConf. This is &quot;Colour your Emacs with ease&quot;.""" start="00:00:00.000" video="mainVideo-color" id="subtitle"]]
+[[!template text="""I'm Ryota Sawada, and today's agenda is:""" start="00:00:11.328" video="mainVideo-color" id="subtitle"]]
+[[!template text="""start with a brief introduction.""" start="00:00:14.849" video="mainVideo-color" id="subtitle"]]
+[[!template text="""I will be talking about colours quite a bit.""" start="00:00:16.650" video="mainVideo-color" id="subtitle"]]
+[[!template text="""What colours do you like?""" start="00:00:19.720" video="mainVideo-color" id="subtitle"]]
+[[!template text="""Colour spaces and some packages such""" start="00:00:21.453" video="mainVideo-color" id="subtitle"]]
+[[!template text="""as color.el, ct.el. I'll be touching on a theme called""" start="00:00:23.600" video="mainVideo-color" id="subtitle"]]
+[[!template text="""Hasliberg theme, which I created,""" start="00:00:27.880" video="mainVideo-color" id="subtitle"]]
+[[!template text="""before wrapping up the talk.""" start="00:00:31.057" video="mainVideo-color" id="subtitle"]]
+[[!template text="""A quick introduction about the talk. The slide is""" start="00:00:34.140" video="mainVideo-color" id="subtitle"]]
+[[!template text="""available as an Org mode file at Codeberg. If you're""" start="00:00:36.960" video="mainVideo-color" id="subtitle"]]
+[[!template text="""looking at it from Org mode, you probably want to have""" start="00:00:40.560" video="mainVideo-color" id="subtitle"]]
+[[!template text="""rainbow mode turned on for the best viewing. This is the""" start="00:00:43.520" video="mainVideo-color" id="subtitle"]]
+[[!template text="""case with the presentation today. I'm Ryota Sawada and I'm""" start="00:00:47.640" video="mainVideo-color" id="subtitle"]]
+[[!template text="""available at rytswd at usual places.""" start="00:00:52.560" video="mainVideo-color" id="subtitle"]]
+
+[[!template new="1" text="""What colour do you like?""" start="00:00:58.668" video="mainVideo-color" id="subtitle"]]
+
+[[!template text="""What colour do you like?""" start="00:00:58.668" video="mainVideo-color" id="subtitle"]]
+[[!template text="""You might be able to tell I like orange. That's""" start="00:01:01.291" video="mainVideo-color" id="subtitle"]]
+[[!template text="""the colour that I use often.""" start="00:01:05.000" video="mainVideo-color" id="subtitle"]]
+[[!template text="""Emacs gives me all the control I want,""" start="00:01:07.857" video="mainVideo-color" id="subtitle"]]
+[[!template text="""so naturally I wanted to make it aesthetically""" start="00:01:09.959" video="mainVideo-color" id="subtitle"]]
+[[!template text="""pleasing to my taste, which meant that""" start="00:01:13.120" video="mainVideo-color" id="subtitle"]]
+[[!template text="""I would like to have a dark theme, subtle theme""" start="00:01:16.024" video="mainVideo-color" id="subtitle"]]
+[[!template text="""with orange as a main accent colour, but not""" start="00:01:19.726" video="mainVideo-color" id="subtitle"]]
+[[!template text="""too orange, so not everything very orange.""" start="00:01:23.768" video="mainVideo-color" id="subtitle"]]
+[[!template text="""Maybe use another blue-ish colour""" start="00:01:26.804" video="mainVideo-color" id="subtitle"]]
+[[!template text="""as another accent. Note that this presentation is""" start="00:01:29.674" video="mainVideo-color" id="subtitle"]]
+[[!template text="""based on the Hasliberg theme, more on that""" start="00:01:32.930" video="mainVideo-color" id="subtitle"]]
+[[!template text="""later. But when I started my Emacs journey, I didn't start""" start="00:01:36.200" video="mainVideo-color" id="subtitle"]]
+[[!template text="""with creating a new theme from get-go. I started with a theme""" start="00:01:40.600" video="mainVideo-color" id="subtitle"]]
+[[!template text="""called Nova Theme. I really liked it. I made a few tweaks""" start="00:01:45.200" video="mainVideo-color" id="subtitle"]]
+[[!template text="""around Org Mode and headings, so that they were a bit more was""" start="00:01:49.480" video="mainVideo-color" id="subtitle"]]
+[[!template text="""my liking, which was around orange being sprinkled across.""" start="00:01:55.040" video="mainVideo-color" id="subtitle"]]
+[[!template text="""I got to it very nice looking and I really liked it, but when""" start="00:02:00.760" video="mainVideo-color" id="subtitle"]]
+[[!template text="""I started a lot of coding tasks with it, I realized one""" start="00:02:07.960" video="mainVideo-color" id="subtitle"]]
+[[!template text="""thing: that it was very colourful, and in a way, distracting.""" start="00:02:13.840" video="mainVideo-color" id="subtitle"]]
+[[!template text="""it actually wasn't about Nova Theme's fault. It was just""" start="00:02:19.800" video="mainVideo-color" id="subtitle"]]
+[[!template text="""many editors, including Emacs and VS Code and other editors""" start="00:02:24.040" video="mainVideo-color" id="subtitle"]]
+[[!template text="""and modern themes, are filled with colours. Let's have a""" start="00:02:27.480" video="mainVideo-color" id="subtitle"]]
+[[!template text="""look. At the top left, you can see Nova theme with a bit of a""" start="00:02:31.680" video="mainVideo-color" id="subtitle"]]
+[[!template text="""pale greenish background with a few colours. Purple,""" start="00:02:38.040" video="mainVideo-color" id="subtitle"]]
+[[!template text="""pink, blue, green. You can see some colours like that with""" start="00:02:42.240" video="mainVideo-color" id="subtitle"]]
+[[!template text="""Nova theme. Nice looking colours, but still colourful. Modus""" start="00:02:47.400" video="mainVideo-color" id="subtitle"]]
+[[!template text="""Vivendi Tinted, bottom left, is also very nice looking""" start="00:02:51.520" video="mainVideo-color" id="subtitle"]]
+[[!template text="""modern theme, but quite colourful. The same can be said""" start="00:02:56.080" video="mainVideo-color" id="subtitle"]]
+[[!template text="""for ef-themes, owl edition at top right,""" start="00:02:59.361" video="mainVideo-color" id="subtitle"]]
+[[!template text="""and Doom Noe as another, bottom right.""" start="00:03:03.135" video="mainVideo-color" id="subtitle"]]
+[[!template text="""That led me to think: how can I make my code editing""" start="00:03:07.980" video="mainVideo-color" id="subtitle"]]
+[[!template text="""and coding tasks not too distracting, and I can focus on""" start="00:03:13.760" video="mainVideo-color" id="subtitle"]]
+[[!template text="""writing code. That was something I could manage with Org""" start="00:03:18.600" video="mainVideo-color" id="subtitle"]]
+[[!template text="""Mode, where I just specifically, basically used orange""" start="00:03:22.760" video="mainVideo-color" id="subtitle"]]
+[[!template text="""shades and not too much more. That's what you're seeing at""" start="00:03:26.400" video="mainVideo-color" id="subtitle"]]
+[[!template text="""the moment. I wanted to do something similar with coding""" start="00:03:29.400" video="mainVideo-color" id="subtitle"]]
+[[!template text="""and any general code. That led me to the journey of""" start="00:03:33.520" video="mainVideo-color" id="subtitle"]]
+[[!template text="""creating my own theme.""" start="00:03:37.960" video="mainVideo-color" id="subtitle"]]
+
+[[!template new="1" text="""Colour spaces: HSL, LCH , and more""" start="00:03:42.120" video="mainVideo-color" id="subtitle"]]
+
+[[!template text="""But before going to the theme, I need to talk about colour""" start="00:03:42.120" video="mainVideo-color" id="subtitle"]]
+[[!template text="""spaces. sRGB, standard RGB, is probably something that""" start="00:03:44.680" video="mainVideo-color" id="subtitle"]]
+[[!template text="""many people are familiar with. HSL is for hue, saturation,""" start="00:03:49.080" video="mainVideo-color" id="subtitle"]]
+[[!template text="""lightness. LCH is for luminance or lightness, chroma, and""" start="00:03:53.440" video="mainVideo-color" id="subtitle"]]
+[[!template text="""hue. Those are the colour spaces probably common used in""" start="00:03:58.360" video="mainVideo-color" id="subtitle"]]
+[[!template text="""various spaces, but when it comes to perceptual uniformity,""" start="00:04:03.320" video="mainVideo-color" id="subtitle"]]
+[[!template text="""there is an important difference between the colour""" start="00:04:08.000" video="mainVideo-color" id="subtitle"]]
+[[!template text="""spaces. Human perception of colour is not very""" start="00:04:11.600" video="mainVideo-color" id="subtitle"]]
+[[!template text="""straightforward. We can see in the reference here...""" start="00:04:14.800" video="mainVideo-color" id="subtitle"]]
+[[!template text="""Let's have a look.""" start="00:04:17.880" video="mainVideo-color" id="subtitle"]]
+[[!template text="""At the top you can see the shade coming from left""" start="00:04:19.507" video="mainVideo-color" id="subtitle"]]
+[[!template text="""green to the right blue,""" start="00:04:23.160" video="mainVideo-color" id="subtitle"]]
+[[!template text="""and in the top image, you can see half of""" start="00:04:26.371" video="mainVideo-color" id="subtitle"]]
+[[!template text="""it, perhaps, is very similar green colour""" start="00:04:30.960" video="mainVideo-color" id="subtitle"]]
+[[!template text="""and then when it comes to blue,""" start="00:04:34.521" video="mainVideo-color" id="subtitle"]]
+[[!template text="""you can see more of the different colour gradients""" start="00:04:36.142" video="mainVideo-color" id="subtitle"]]
+[[!template text="""coming into play. The bottom colour space is based on a""" start="00:04:40.240" video="mainVideo-color" id="subtitle"]]
+[[!template text="""perceptually uniform colour space, which gives us a bit more""" start="00:04:45.560" video="mainVideo-color" id="subtitle"]]
+[[!template text="""evenly distributed colour gradient, which will be""" start="00:04:50.480" video="mainVideo-color" id="subtitle"]]
+[[!template text="""something more suitable for deciding on the theme setup and""" start="00:04:55.040" video="mainVideo-color" id="subtitle"]]
+[[!template text="""the colour setup, where you can have various themes that are""" start="00:04:59.040" video="mainVideo-color" id="subtitle"]]
+[[!template text="""defined for human perceptions.""" start="00:05:04.000" video="mainVideo-color" id="subtitle"]]
+[[!template text="""Perceptual uniformity is important. For that, it is""" start="00:05:10.440" video="mainVideo-color" id="subtitle"]]
+[[!template text="""important to mention about CIE, or &quot;International""" start="00:05:14.320" video="mainVideo-color" id="subtitle"]]
+[[!template text="""Commission of Illumination&quot; in English. They created""" start="00:05:17.880" video="mainVideo-color" id="subtitle"]]
+[[!template text="""important colour spaces called CIE XYZ which was from 1931,""" start="00:05:23.480" video="mainVideo-color" id="subtitle"]]
+[[!template text="""CIELAB, and LUV, 1976,""" start="00:05:29.480" video="mainVideo-color" id="subtitle"]]
+[[!template text="""respectively. Those are the colour spaces used in various""" start="00:05:33.320" video="mainVideo-color" id="subtitle"]]
+[[!template text="""fields and industries and still relevant. There is a""" start="00:05:37.520" video="mainVideo-color" id="subtitle"]]
+[[!template text="""quite a bit that you can read up on.""" start="00:05:41.840" video="mainVideo-color" id="subtitle"]]
+[[!template text="""I'm not a colour expert so have some references here,""" start="00:05:44.899" video="mainVideo-color" id="subtitle"]]
+[[!template text="""but the TLDR of all of that is""" start="00:05:48.961" video="mainVideo-color" id="subtitle"]]
+[[!template text="""consider using LCH variants over RGB or HSL""" start="00:05:52.520" video="mainVideo-color" id="subtitle"]]
+[[!template text="""for better perceptual uniformity.""" start="00:05:57.526" video="mainVideo-color" id="subtitle"]]
+[[!template text="""Specifically CIE Lab-based LCH,""" start="00:06:00.607" video="mainVideo-color" id="subtitle"]]
+[[!template text="""which is often called Lab LCH""" start="00:06:03.960" video="mainVideo-color" id="subtitle"]]
+[[!template text="""or just LCH. CIELUV-based LCH""" start="00:06:06.710" video="mainVideo-color" id="subtitle"]]
+[[!template text="""is called LUV LCH. There is a new rather modern LCH setup""" start="00:06:10.360" video="mainVideo-color" id="subtitle"]]
+[[!template text="""called OK LCH which is based on OK Lab.""" start="00:06:16.520" video="mainVideo-color" id="subtitle"]]
+[[!template text="""So those are the colour spaces""" start="00:06:19.997" video="mainVideo-color" id="subtitle"]]
+[[!template text="""that are worth looking at when it comes to creating""" start="00:06:22.100" video="mainVideo-color" id="subtitle"]]
+[[!template text="""shades.""" start="00:06:24.280" video="mainVideo-color" id="subtitle"]]
+
+[[!template new="1" text="""color.el and ct.el""" start="00:06:25.885" video="mainVideo-color" id="subtitle"]]
+
+[[!template text="""How do you create shades? Color.el and ct.el are""" start="00:06:25.885" video="mainVideo-color" id="subtitle"]]
+[[!template text="""great solutions. You can create shades and different""" start="00:06:29.760" video="mainVideo-color" id="subtitle"]]
+[[!template text="""colours based on RGB and hex. You can see in the red example""" start="00:06:33.200" video="mainVideo-color" id="subtitle"]]
+[[!template text="""here, FF0000 is a bright red. You can darken it by providing""" start="00:06:37.800" video="mainVideo-color" id="subtitle"]]
+[[!template text="""less red values like CC or 88. You can see that the colours""" start="00:06:43.840" video="mainVideo-color" id="subtitle"]]
+[[!template text="""are slightly darker than the FF0000. But what if you are""" start="00:06:48.640" video="mainVideo-color" id="subtitle"]]
+[[!template text="""working with the complex colours such as FBB151, this""" start="00:06:52.840" video="mainVideo-color" id="subtitle"]]
+[[!template text="""particular orange? That's where color.el, ct.el come""" start="00:06:57.440" video="mainVideo-color" id="subtitle"]]
+[[!template text="""into play. Color.el is a built-in package in Emacs,""" start="00:07:01.880" video="mainVideo-color" id="subtitle"]]
+[[!template text="""so you can use it by just requiring it.""" start="00:07:05.744" video="mainVideo-color" id="subtitle"]]
+[[!template text="""color-darken-name and""" start="00:07:08.341" video="mainVideo-color" id="subtitle"]]
+[[!template text="""providing the colour with the hex value with 40%""" start="00:07:10.400" video="mainVideo-color" id="subtitle"]]
+[[!template text="""gives you a darker orange""" start="00:07:13.906" video="mainVideo-color" id="subtitle"]]
+[[!template text="""without doing too much of a colour computation""" start="00:07:16.887" video="mainVideo-color" id="subtitle"]]
+[[!template text="""by hand. This hex value is something that Emacs""" start="00:07:20.040" video="mainVideo-color" id="subtitle"]]
+[[!template text="""understands and rainbow mode does as well. When it comes""" start="00:07:23.840" video="mainVideo-color" id="subtitle"]]
+[[!template text="""to ct.el, it's not a built-in solution, but it's more""" start="00:07:27.320" video="mainVideo-color" id="subtitle"]]
+[[!template text="""versatile. It works with various colour spaces so you can""" start="00:07:30.840" video="mainVideo-color" id="subtitle"]]
+[[!template text="""see that ct-edit-hsl-l-dec by 40% would give""" start="00:07:34.840" video="mainVideo-color" id="subtitle"]]
+[[!template text="""us a darker colour by 40%. We can also use LCH variant which""" start="00:07:41.240" video="mainVideo-color" id="subtitle"]]
+[[!template text="""can use the LCH colour spaces for darkening the colour. This""" start="00:07:47.760" video="mainVideo-color" id="subtitle"]]
+[[!template text="""results in slightly different colours for this particular""" start="00:07:53.480" video="mainVideo-color" id="subtitle"]]
+[[!template text="""orange, but if you're working with the green or blue or some""" start="00:07:56.920" video="mainVideo-color" id="subtitle"]]
+[[!template text="""other colours, it might be worth looking at LCH variant""" start="00:08:00.200" video="mainVideo-color" id="subtitle"]]
+[[!template text="""rather than other colour spaces.""" start="00:08:04.178" video="mainVideo-color" id="subtitle"]]
+
+[[!template new="1" text="""Hasliberg theme""" start="00:08:08.400" video="mainVideo-color" id="subtitle"]]
+
+[[!template text="""With that, let's have a look at Hasliberg theme.""" start="00:08:08.400" video="mainVideo-color" id="subtitle"]]
+[[!template text="""This is a theme that I created personally""" start="00:08:11.204" video="mainVideo-color" id="subtitle"]]
+[[!template text="""and the name is based on the Swiss Alps""" start="00:08:13.708" video="mainVideo-color" id="subtitle"]]
+[[!template text="""and with the following ideas in mind. It focuses""" start="00:08:16.410" video="mainVideo-color" id="subtitle"]]
+[[!template text="""on setting up shades. Shades, by that...""" start="00:08:20.480" video="mainVideo-color" id="subtitle"]]
+[[!template text="""You can see how the top""" start="00:08:25.032" video="mainVideo-color" id="subtitle"]]
+[[!template text="""of the heading here is a bright orange colour, and""" start="00:08:27.000" video="mainVideo-color" id="subtitle"]]
+[[!template text="""other orange colours, this heading and this heading""" start="00:08:31.840" video="mainVideo-color" id="subtitle"]]
+[[!template text="""are based on the top""" start="00:08:35.759" video="mainVideo-color" id="subtitle"]]
+[[!template text="""orange colour and then giving some shade and the luminance""" start="00:08:37.720" video="mainVideo-color" id="subtitle"]]
+[[!template text="""adjustment essentially. It follows a pattern from web""" start="00:08:40.840" video="mainVideo-color" id="subtitle"]]
+[[!template text="""design and tailwind colour shades are a great example that""" start="00:08:44.640" video="mainVideo-color" id="subtitle"]]
+[[!template text="""you can have a look.""" start="00:08:49.040" video="mainVideo-color" id="subtitle"]]
+[[!template text="""It does not use ct.el as it aims to be fully""" start="00:08:50.816" video="mainVideo-color" id="subtitle"]]
+[[!template text="""dependency free and does not consider colour contrast for""" start="00:08:54.440" video="mainVideo-color" id="subtitle"]]
+[[!template text="""accessibility. This is because it's personal and I""" start="00:08:58.000" video="mainVideo-color" id="subtitle"]]
+[[!template text="""don't have that particular need.""" start="00:09:02.120" video="mainVideo-color" id="subtitle"]]
+[[!template text="""This is based on LuvLCh rather""" start="00:09:04.747" video="mainVideo-color" id="subtitle"]]
+[[!template text="""than LAB LCH, and that's another reason""" start="00:09:06.840" video="mainVideo-color" id="subtitle"]]
+[[!template text="""why I didn't use ct.el,""" start="00:09:08.789" video="mainVideo-color" id="subtitle"]]
+[[!template text="""and it is highly experimental. But the code is""" start="00:09:11.050" video="mainVideo-color" id="subtitle"]]
+[[!template text="""available at Codeberg and GitHub just for your reference.""" start="00:09:14.120" video="mainVideo-color" id="subtitle"]]
+[[!template text="""Let's see Hasliberg theme in action. This is the theme""" start="00:09:18.280" video="mainVideo-color" id="subtitle"]]
+[[!template text="""that we were looking at for org-mode as well, but for the""" start="00:09:23.720" video="mainVideo-color" id="subtitle"]]
+[[!template text="""code, in this case Elisp. You can see that the colour is""" start="00:09:27.160" video="mainVideo-color" id="subtitle"]]
+[[!template text="""mostly white and blue with orange sprinkled across for""" start="00:09:32.200" video="mainVideo-color" id="subtitle"]]
+[[!template text="""string input. You can see some pink showing up as well.""" start="00:09:37.560" video="mainVideo-color" id="subtitle"]]
+[[!template text="""Essentially, all the colour setup is done by shades, so most of""" start="00:09:41.560" video="mainVideo-color" id="subtitle"]]
+[[!template text="""it is based on white or neutral, and there will be lighter and""" start="00:09:46.400" video="mainVideo-color" id="subtitle"]]
+[[!template text="""darker variants that can be set for the primary colour of blue.""" start="00:09:51.320" video="mainVideo-color" id="subtitle"]]
+[[!template text="""You can see the darker and brighter and lighter colours""" start="00:09:56.160" video="mainVideo-color" id="subtitle"]]
+[[!template text="""being used. With that shade setup, I only have to provide a""" start="00:09:59.960" video="mainVideo-color" id="subtitle"]]
+[[!template text="""few colours as the base colours. From there, I can define the""" start="00:10:05.280" video="mainVideo-color" id="subtitle"]]
+[[!template text="""shades for the theme setup, which leads to creating a more""" start="00:10:09.600" video="mainVideo-color" id="subtitle"]]
+[[!template text="""monotonic colour setup, where this one is a very monotonic,""" start="00:10:15.960" video="mainVideo-color" id="subtitle"]]
+[[!template text="""very subtle difference of white colours used for the base""" start="00:10:20.360" video="mainVideo-color" id="subtitle"]]
+[[!template text="""colours. I don't have to make too many changes to the colour""" start="00:10:25.060" video="mainVideo-color" id="subtitle"]]
+[[!template text="""setup. I just have to provide the base colours that are""" start="00:10:29.040" video="mainVideo-color" id="subtitle"]]
+[[!template text="""different. The same can be said for this orange, very orange""" start="00:10:32.080" video="mainVideo-color" id="subtitle"]]
+[[!template text="""colour theme, which is based on the base colours of""" start="00:10:36.400" video="mainVideo-color" id="subtitle"]]
+[[!template text="""orange-like colours and gives the shade of various""" start="00:10:39.360" video="mainVideo-color" id="subtitle"]]
+[[!template text="""different setup. This means that I can use Hasliberg""" start="00:10:43.640" video="mainVideo-color" id="subtitle"]]
+[[!template text="""Theme Nature colour palette, and that gives me more of a green""" start="00:10:50.720" video="mainVideo-color" id="subtitle"]]
+[[!template text="""based colour where all the base colours are set up with a""" start="00:10:56.160" video="mainVideo-color" id="subtitle"]]
+[[!template text="""greenish colour setup.""" start="00:11:00.840" video="mainVideo-color" id="subtitle"]]
+
+[[!template new="1" text="""Wrap up""" start="00:11:06.240" video="mainVideo-color" id="subtitle"]]
+
+[[!template text="""With that, I would like to wrap up with a few ideas when""" start="00:11:06.240" video="mainVideo-color" id="subtitle"]]
+[[!template text="""adjusting themes and working with colours. Maybe consider""" start="00:11:10.400" video="mainVideo-color" id="subtitle"]]
+[[!template text="""using CIELAB, CIELUV, or OKLab-based colour spaces that""" start="00:11:13.760" video="mainVideo-color" id="subtitle"]]
+[[!template text="""would give you different shades which are easier to work""" start="00:11:19.360" video="mainVideo-color" id="subtitle"]]
+[[!template text="""with for human perceptions. color.el and ct.el can be a""" start="00:11:24.720" video="mainVideo-color" id="subtitle"]]
+[[!template text="""great tool for making shades and working with colour spaces.""" start="00:11:29.200" video="mainVideo-color" id="subtitle"]]
+[[!template text="""Hasliberg theme is yet another theme, highly personal""" start="00:11:32.560" video="mainVideo-color" id="subtitle"]]
+[[!template text="""and experimental, but could be an inspiration for your""" start="00:11:36.240" video="mainVideo-color" id="subtitle"]]
+[[!template text="""theme journey. With that, why not sprinkle your Emacs with""" start="00:11:39.000" video="mainVideo-color" id="subtitle"]]
+[[!template text="""your favourite colours? Thank you.""" start="00:11:44.120" video="mainVideo-color" id="subtitle"]]
+
+
+
+Captioner: sachac
+
Questions or comments? Please e-mail [emacsconf-org-private@gnu.org](mailto:emacsconf-org-private@gnu.org?subject=Comment%20for%20EmacsConf%202023%20color%3A%20Colour%20your%20Emacs%20with%20ease)
diff --git a/2024/info/color-before.md b/2024/info/color-before.md
index c15b43a5..d33841e1 100644
--- a/2024/info/color-before.md
+++ b/2024/info/color-before.md
@@ -8,12 +8,20 @@ The following image shows where the talk is in the schedule for Sat 2024-12-07.
Format: 12-min talk ; Q&A: BigBlueButton conference room <https://media.emacsconf.org/2024/current/bbb-color.html> Etherpad: <https://pad.emacsconf.org/2024-color>
Etherpad: <https://pad.emacsconf.org/2024-color>
Discuss on IRC: [#emacsconf-gen](https://chat.emacsconf.org/?join=emacsconf,emacsconf-gen)
-Status: Quality check
+Status: Now playing on the conference livestream
<div>Times in different time zones:</div><div class="times" start="2024-12-07T16:20:00Z" end="2024-12-07T16:30:00Z"><div class="conf-time">Saturday, Dec 7 2024, ~11:20 AM - 11:30 AM EST (US/Eastern)</div><div class="others"><div>which is the same as:</div>Saturday, Dec 7 2024, ~10:20 AM - 10:30 AM CST (US/Central)<br />Saturday, Dec 7 2024, ~9:20 AM - 9:30 AM MST (US/Mountain)<br />Saturday, Dec 7 2024, ~8:20 AM - 8:30 AM PST (US/Pacific)<br />Saturday, Dec 7 2024, ~4:20 PM - 4:30 PM UTC <br />Saturday, Dec 7 2024, ~5:20 PM - 5:30 PM CET (Europe/Paris)<br />Saturday, Dec 7 2024, ~6:20 PM - 6:30 PM EET (Europe/Athens)<br />Saturday, Dec 7 2024, ~9:50 PM - 10:00 PM IST (Asia/Kolkata)<br />Sunday, Dec 8 2024, ~12:20 AM - 12:30 AM +08 (Asia/Singapore)<br />Sunday, Dec 8 2024, ~1:20 AM - 1:30 AM JST (Asia/Tokyo)</div></div><div><strong><a href="/2024/watch/gen/">Find out how to watch and participate</a></strong></div>
+<div class="vid"><video controls preload="none" id="color-mainVideo"><source src="https://media.emacsconf.org/2024/emacsconf-2024-color--colour-your-emacs-with-ease--ryota--main.webm" />captions="""<track label="English" kind="captions" srclang="en" src="/2024/captions/emacsconf-2024-color--colour-your-emacs-with-ease--ryota--main.vtt" default />"""<track kind="chapters" label="Chapters" src="/2024/captions/emacsconf-2024-color--colour-your-emacs-with-ease--ryota--main--chapters.vtt" /><p><em>Your browser does not support the video tag. Please download the video instead.</em></p></video>[[!template id="chapters" vidid="color-mainVideo" data="""
+00:00.000 Introduction
+00:58.668 What colour do you like?
+03:42.120 Colour spaces: HSL, LCH , and more
+06:25.885 color.el and ct.el
+08:08.400 Hasliberg theme
+11:06.240 Wrap up
+"""]]<div></div>Duration: 11:48 minutes<div class="files resources"><ul><li><a href="https://pad.emacsconf.org/2024-color">Open Etherpad</a></li><li><a href="https://media.emacsconf.org/2024/current/bbb-color.html">Open public Q&A</a></li><li><a href="https://media.emacsconf.org/2024/emacsconf-2024-color--colour-your-emacs-with-ease--ryota--intro.webm">Download --intro.webm</a></li><li><a href="https://media.emacsconf.org/2024/emacsconf-2024-color--colour-your-emacs-with-ease--ryota--main--chapters.vtt">Download --main--chapters.vtt</a></li><li><a href="https://media.emacsconf.org/2024/emacsconf-2024-color--colour-your-emacs-with-ease--ryota--main.vtt">Download --main.vtt</a></li><li><a href="https://media.emacsconf.org/2024/emacsconf-2024-color--colour-your-emacs-with-ease--ryota--main.webm">Download --main.webm (39MB)</a></li></ul></div></div>
# Description
<!-- End of emacsconf-publish-before-page --> \ No newline at end of file