跟讀練習: Build smarter color systems with relative colors - 通過影片學習英語口語

選擇練習模式

每種模式都會開啟全屏練習室。

168 句

如果句子過短或過長，請點選 Edit 進行調整。

Hi there my friend and friend.

If you're maintaining separate variables for lighter, darker, and transparent versions of the same color, there's a much better way to work because of CSS relative colors

that let us generate all of these variations based on a single value.

Let's dive in and see how this works.

I got a demo set up for us right here.

And we can take a look.

So you can see I have some variables set up and I have some, I'm using toast notifications for this

because I think it's a nice example of something where we can have multiple variations of this as well

and we can look at how we're saving a lot of time.

So the very first thing I'm going to do is let's come in

and sort of style the generic one and then we'll sort of fancy things up from there.

And really quickly there, I just made the font size bigger because I think it'd look better for our demo.

So here, let's set things up.

I'm going to come in and we're just going to come in on this to start with and do a, I call it toast color and put a color here.

And I'm going to use the base color for now.

So we're going to say it's our var of base color.

And this is going to help us a little bit out, just base like that.

This will help us out a little bit later on.

This could be a step that we do later.

It could even be a step that you skip

if this is something that you're only doing one thing of

and you don't need a bunch of variations like we're going to have here.

Now, next step, I'm going to do something

that looks a little bit weird because I'm going to say we're going to color.

I'm going to do an HSL from, and this is relative colors.

And I'll explain the syntax of this as we write it out.

I'm going to say var toast color.

And then I'm going to HSL.

and nothing really should change actually and I need a semicolon at the end

and as you can see nothing really much has changed

but what we're saying is the color is an HSL value

that is coming from the toast color and this H

and S and L are just placeholders for the hue saturation

and lightness and we'll see why that's important in a minute just

so we can see quickly that this is working

if I change this over to my info we're going to see

that the color of the text and the border has changed on all of them.

The reason the border color is currently changing is because my border is set to two pixels solid, I haven't declared a color, and borders by default will follow the color of the text.

But for now I'm going to keep this one as my base

and we'll come in with the modifications for the other ones as we go through.

Now where this gets a little bit more useful is let's come in with a background color.

So background color, I'm going to put this on a different line just

so we can keep it all without any horizontal scrolling.

I'm going to say HSL from, same thing, my var of toast, you gotta spell toast right,

toast color, and space, H space S space L, except this time if I do that I can't read my text.

But I want it to always be based on the color of the text.

I can just come here and actually change the lightness value.

So I can actually say this is at like 15%, except that's going to be really dark.

I meant to say something like 85% and go the other way around.

And we can have the exact same color, but 85%.

And maybe even we can come up to a 90 here, something like that.

But we're getting that a little bit of that same color coming in in the background now.

And this is cool, right?

We're just replacing whatever the lightness was with it being 90% now in our HSL.

And just for fun, we can also take this to another level

and we can add like a box shadow here as well.

So I'm going to actually move, we'll do the box shadow here, box shadow.

And again, I'll do this on two lines just so we can see the entire declaration.

And let's come in with zero offset, maybe 12 pixels, 12 pixels.

I'm going to leave it big for now.

Like it really is standing out obviously, but then we can come in with, and this is another really cool thing with our relative colors.

So HSL from var toast color and my H, my S, my L, except in this case, it's really dark and I go,

oh man, I need a shadow, but I want to lower the opacity of it.

We can do that with relative colors, which is amazing.

So I just do a forward slash here because this is the way the space separated syntax works in CSS.

If you'd like to learn more about that, I talked about it last week.

I'll put a link in the description

and there might be a card popping up you can check

that one out and I'll remind you at the end

but I can just come here and say something like 0.25

or whatever I want for the lower opacity of that same color

and you can see that's working I want to make this a bit more subtle

so I'm also going to give it a spread of negative

eight just to pull it in a little bit just give

us a little subtle shadow underneath each one of those cards

or toasts or whatever we want to call them awesome

so that's all working now this is where the other cool

thing comes in here is I have my info my warning and my error here.

And I'm just doing these with data attributes because this would be the easiest way to do it with JavaScript.

Especially if you're, you know, instead of using a class here, I think it makes a lot more sense to do it with a data attribute because if you're setting it with JavaScript, you just set it.

You don't have to worry about removing the info to put a warning or, you know, you just say if it's this one, the text is going to be coming in probably from JavaScript as well.

The whole thing's going to be triggered with JavaScript and you just do the data, what toast is equal to, and you style it that way.

So let's come down here

and we'll start with the first one where we can say the data toast is equal to info.

And because I was set this up with a custom property of toast color, we can just come here and say in this case, my toast color is my, did I call it info?

Yeah, I did.

Look at that.

There we go.

So my info comes in.

Now there's a bit of a problem here.

We're gonna solve that in a second, but let's come in with all three of them.

So that's my info.

And the last one will be, so info, I forget what I called them, warning and error.

So these two, that's a warning.

And then I can come on this one and say those are error.

And all the colors are coming in.

It's looking pretty cool that we can do all of this with a single color and everything is adapting automatically.

There's

So one problem that's coming in is like the text might

100

be a little bit hard to read depending on what color you're using.

101

Especially like, I don't know, I guess this one's okay, but we could definitely make it better.

102

So what I'm going to do is come back up to where we declared all of this.

103

And over here I want this color to actually always be dark no matter what value I'm using.

104

So maybe I come in with a 20% here for the lightness on the color and then it's going to be, you know, based on the red or based on that orange yellow,

105

but I know it's always going to be darker.

106

my borders have sort of gotten darker too, but we just do the same thing for the border where I never actually declared one.

107

I'm just going to copy and paste to speed things up, and this one will just use the original HSL.

108

And I guess I could, if you're not changing the value, you could just do the Vartos color and not worry about it,

109

and that would work, but this just opens up some extra doors I think.

110

So we have the border color always coming in with sort of the more bright, vibrant version

111

and then the text we can darken maybe 20 is a

112

bit low we could try like a 35 you can play with the number

113

that you want on that to just make sure

114

that it's always something that's decently readable but we can do better

115

and before i let you know how we can do better i just want to let you know

116

that this video is inspired by an article or two articles actually

117

that i wrote for picolily and

118

so i'm going to link to both of those down below

119

they're the pragmatic guide to modern colors discolors in css i

120

think is what we called it uh there's two articles in

121

there the first one is really for people who are copying

122

pasting colors the second one is going a little bit further

123

and diving into a lot more of the manipulations and other things

124

that you can do

125

and just you know we're talking about pick a lily people

126

have been asking me for javascript content for a long time

127

they do have a relatively new course called javascript for everyone and so

128

if you're somebody who's looking to learn more about javascript i definitely would recommend going to check it out

129

and no this is not a sponsored bit i just like spreading the word on good quality content

130

that is out there so check out the course check out those articles

131

if you're interested but now let's look at the other improvement

132

that we can make to this which is

133

while i have all of these set up using hsl rgb

134

hex you know your copy pasting from your design software whatever it is

135

and you're setting these here

136

when using relative colors you can often get a little bit of a better result by using oklch

137

and oklch is a newer it's like it's like came around more recently.

138

But the difference between HSL and OKLCH is as you go through the different hues, it works in a much more consistent way.

139

So what I mean by that really quickly is looking at this demo, I've set these both up with OKLCH and HSL.

140

And if I go through the different hues, as you get to here, you can see like this text becomes harder to read.

141

And it really depends on the color that we're using.

142

When you get to yellows, visually it gets a lot brighter, even though the saturation and the lightness values have stayed the same.

143

And the whole point of the OK LCH in general is to keep

144

that consistency as you're going through the different hues in terms of the perception of the brightness of the colors.

145

And so here's an example of looking at the differences between using, I've set these up exactly the same way, I just took away the gray one.

146

but you have the base toast color coming in and I've set them all up with OK LCH here instead.

147

The border I just set with the base color, like I said, we could do if it's staying the same.

148

But one thing you'll notice here, there's two important things is if I'm doing OK LCH on the outside here, I do need to use the LCH values.

149

So LCH instead of an HSL and the lightness being the first one now.

150

and I've done a little bit of extra math in here

151

for the background color to change the chroma a little bit

152

but you can see there's a little bit more consistency between the colors coming in

153

when I'm using the OKLCH versus using the HSL here with

154

the the border color is perceptually looks similar the vibrancy of

155

the color of the background looks much more similar whereas here

156

like the difference in the border color especially I find with

157

this one coming through the border looks much more faded out compared to the blue

158

which one is popping so much more

159

when I'm using the HSL it's not something

160

that a lot of users are going to notice

161

but by using OKLCH even though my base color is set to an HSL

162

or whatever you know hex or RGB it doesn't really matter by using the OKLCH throughout

163

and having my toast colors all set through an OKLCH rather than using an HSL and modifying it that way,

164

you just get a little bit more consistency between the different colors that are being generated for you.

165

So if you enjoyed this video, if you do want a bit of a primer on the space separated syntax, like I mentioned, that video should be showing up on the screen somewhere right now.

166

And also if you want to dive deeper into all of this, do go and check out those two Piccadilly articles and maybe their courses as well.

167

And with that, I would like to thank my enabler of awesome, Johnny, as well as all my other patrons and channel members for their monthly support.

168

And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.

下載應用

流利口語所需的一切

AI 發音評分逐句打分

音標練習掌握每個音

詞彙學習建立你的詞庫

詞彙遊戲邊玩邊學

掃碼

Download on theApp Store Get it onGoogle Play

同頻道

FOR YOU

為什麼要通過這個影片練習口語？

在學習英語的過程中，雅思口語練習的關鍵在於多樣化的練習方式。通過觀看影片，我們不僅可以接觸到真實的對話情境，還能學習到生動有趣的表達方式。這段影片通過介紹CSS相對顏色的概念，幫助我們理解如何簡化顏色系統的開發，這種技術性的討論為口語練習提供了豐富的上下文。把技術性內容融入到口語練習中，使學習者能夠有效地提高在特定領域的交流能力。看YouTube學英語是一種新穎而有效的學習方式，特別適合希望通過實際對話和討論來增強自信心的學生。

語法與表達的具體分析

在影片中，演講者使用了一些關鍵的表達結構，值得學習者在練習中注意：

使用變數 (variables)：演講者提到維護不同狀態的變數，例如 lighter、darker 和 transparent。這個結構不僅在程式設計中常用，對於日常口語交流也同樣適用，例如在描述不同的選項或變化時。
說明與解釋 (explanation and elaboration)：影片中反覆使用"我會說"或"我將演示"的句型，適合用於引入主題，清晰地講述自己的觀點或觀點。這個結構對於練習英語口語練習非常重要，因為它有助於清晰地傳達資訊。
比較與對比 (comparison and contrast)：演講者通過將不同的顏色設定進行對比，成功引導聽眾瞭解兩者之間的區別。這一技能在日常交流中能夠幫助表述更為複雜的想法。

常見的發音陷阱

在觀看影片時，學習者應該特別注意一些可能導致發音錯誤的詞彙和表達方式。例如：

在提到“color”時，可能會因母語的影響而出現發音不準確的現象。通過反覆模仿（如使用 shadow speech 方法），能夠幫助糾正此類問題。
另外，“HSL”縮寫的發音，許多學習者可能不熟悉。提高對於行業用語的發音把握，可以幫助在相關領域的交流中變得顯得更加專業。

在進行口語練習時，使用shadowspeak的方式完全聽懂並說出這些詞彙，不僅能提升口語流暢度，還能增強對難點詞彙的掌握。這對學習者的雅思備考來說，尤其重要。

影片中的語法

說話人最常用的結構，並附上影片中的原話：

結構	影片中的用法
被動語態 be + 過去分詞 — 強調發生了什麼，而不是誰做的	is let · is set · be based
現在完成時 have/has + 過去分詞 — 過去發生但與現在仍有關聯的事	has changed · haven't declared · I've set
定語從句 who / which + 從句 — 補充說明人或事物	colors, which is · people who are · this which is

什麼是跟讀法？

跟讀法 (Shadowing) 是一種有科學依據的語言學習技巧，最初開發用於專業口譯員的培訓，並由多語言者Alexander Arguelles博士普及。這個方法簡單而強大：您在聽英語母語原聲的同時立即大聲重複——就像是一個延遲1-2秒緊跟說話者的影子。與被動聽力或語法練習不同，跟讀法強迫您的大腦和口腔肌肉同時處理並模模擬實的講話模式。研究表明它能顯著提高發音準確性，語調，節奏，連讀，聽力理解和口語流利度——使其成為雅思口語備考和真實英語交流最有效的方法之一。

影子跟讀法: 閱讀完整分步指南 →

跟讀練習: Build smarter color systems with relative colors - 通過影片學習英語口語

選擇練習模式

下載應用

同頻道

Handy CSS layout patterns, and fun ways to elevate them

Use these CSS features instead of JavaScript

Transition to and from display: none

Your AI broke the layout. Now what?

This library changes how JS and CSS work together

No more magic numbers for your breakpoints

More CSS quick tips

Native popovers with smooth animations (no JS required)

3 modern CSS properties to add to your reset

5 CSS fouls that I see way too often

Has AI killed Tailwind?

Why I use single-color gradients in my CSS

推薦影片

Claude Code: The Advanced Guide (99% of Devs Skip These Features)

#02 Common Pitfalls of building Human Resources Strategies

The psychology of color and its influence on marketing

JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue

Video

Design Systems vs. Style Guides

Blender Tutorial: Photorealistic Puddles

How to Make Anything - Learn to Think Like an Engineer

CAP Theorem in System Design Interviews

Make Your Notion Setup Aesthetic! Hidden Notion Design Tips 2023

為什麼要通過這個影片練習口語？

語法與表達的具體分析

常見的發音陷阱

影片中的語法

什麼是跟讀法？