授權(quán)轉(zhuǎn)載?|?Scratch格物堂?scratchGeWuTang

原文作者 |?小阿斌

原文標(biāo)題 |?從數(shù)據(jù)類型到計(jì)算思維

標(biāo)簽：難度初級(jí)；教程；顏色；色彩模式；

本文主要介紹Scratch使用的兩種色彩模式及關(guān)于顏色積木的正確使用方式。

01

顏色模式

顏色的實(shí)質(zhì)是一種光波。它的存在是因?yàn)橛腥齻€(gè)實(shí)體：光線、被觀察的對(duì)象以及觀察者。人眼是把顏色當(dāng)作由被觀察對(duì)象吸收或者反射不同波長(zhǎng)的光波形成的。

顏色模式，是將某種顏色表現(xiàn)為數(shù)字形式的模型，或者說是一種記錄圖像顏色的方式。分為：RGB模式、CMYK模式、HSB模式、Lab顏色模式、位圖模式、灰度模式、索引顏色模式、雙色調(diào)模式和多通道模式。

在這里僅介紹Scratch中涉及的兩種色彩模式。

RGB顏色模式

雖然可見光的波長(zhǎng)有一定的范圍，但我們?cè)谔幚眍伾珪r(shí)并不需要將每一種波長(zhǎng)的顏色都單獨(dú)表示。因?yàn)樽匀唤缰兴械念伾伎梢杂眉t、綠、藍(lán)(RGB)這三種顏色波長(zhǎng)的不同強(qiáng)度組合而得，這就是人們常說的三基色原理。因此，這三種光常被人們稱為三基色或三原色。有時(shí)候我們亦稱這三種基色為添加色(Additive Colors)，這是因?yàn)楫?dāng)我們把不同光的波長(zhǎng)加到一起的時(shí)候，得到的將會(huì)是更加明亮的顏色。把三種基色交互重疊，就產(chǎn)生了次混合色：青(Cyan)、洋紅(Magenta)、黃(Yellow)。這同時(shí)也引出了互補(bǔ)色(Complement Colors)的概念。基色和次混合色是彼此的互補(bǔ)色，即彼此之間最不一樣的顏色。例如青色由藍(lán)色和綠色構(gòu)成，而紅色是缺少的一種顏色，因此青色和紅色構(gòu)成了彼此的互補(bǔ)色。在數(shù)字視頻中，對(duì)RGB三基色各進(jìn)行8位編碼就構(gòu)成了大約1677萬種顏色，這就是我們常說的真彩色。順便提一句，電視機(jī)和計(jì)算機(jī)的監(jiān)視器都是基于RGB顏色模式來創(chuàng)建其顏色的。

ARGB

ARGB是一種色彩模式，也就是RGB色彩模式附加上Alpha（透明度）通道，常見于32位位圖的存儲(chǔ)結(jié)構(gòu)。

HSB顏色模式（HSV、HSL）

從心理學(xué)的角度來看，顏色有三個(gè)要素：色澤(Hue)、飽和度(Saturation)和亮度(Brightness)。HSB顏色模式便是基于人對(duì)顏色的心理感受的一種顏色模式。它是由RGB三基色轉(zhuǎn)換為L(zhǎng)ab模式，再在Lab模式的基礎(chǔ)上考慮了人對(duì)顏色的心理感受這一因素而轉(zhuǎn)換成的。因此這種顏色模式比較符合人的視覺感受，讓人覺得更加直觀一些。它可由底與底對(duì)接的兩個(gè)圓錐體立體模型來表示，其中軸向表示亮度，自上而下由白變黑；徑向表示色飽和度，自內(nèi)向外逐漸變高；而圓周方向，則表示色調(diào)的變化，形成色環(huán)。

AHSB

類似于ARGB，同樣是在HSB原色彩模式的基礎(chǔ)上加入透明度屬性。

02

HSB模式使用方法

Scratch2.0

在Scratch2.0中，對(duì)于HSB顏色模式的應(yīng)用主要體現(xiàn)在以下兩對(duì)積木（【將畫筆顏色增加()】和【將畫筆亮度增加()】積木同理，略）

按照HSB模式將畫筆顏色設(shè)定為指定數(shù)值，范圍是【0-200】(閉區(qū)間)，組成一個(gè)完整的色相環(huán)，顏色200與顏色0相同（因此也可以說范圍是【0-199】）。常見的數(shù)值：?0 代表 紅、?70 代表 綠、?130 代表 藍(lán)、?170 代表品紅。

按照HSB模式將畫筆亮度設(shè)定為指定數(shù)值，范圍是【0-100】(閉區(qū)間)，50為初始值，也即純粹色。亮度為0時(shí)，顏色趨近于黑，亮度為100時(shí)，趨近于白。

總結(jié)

Scratch2.0中對(duì)于HSB模式的支持較弱，只能改變顏色和亮度，無法改變飽和度，只能說是閹割版的HSB模式——HB。但是【將畫筆顏色設(shè)定為()】積木的使用頻率還是非常高的，在使用RGB模式相對(duì)比較麻煩的情況下，用這種方法較為便捷。

Scratch3.0

在Scratch3.0中，大大加強(qiáng)了對(duì)于HSB模式的支持，體現(xiàn)在幾種顏色積木功能的增強(qiáng)和繪圖編輯器的UI優(yōu)化。

可以根據(jù)HSB模式在Scratch2.0設(shè)置畫筆顏色和亮度的基礎(chǔ)上完善了飽和度設(shè)置，并在正式版中加入了Scratch3.0Beta版中沒有的透明度設(shè)置功能，這使得Scratch3.0支持AHSB模式！(要是3.0列表內(nèi)容的更新有這么給力就好了)

另外需要注意的是，在Scratch3.0的這個(gè)積木中，顏色的設(shè)置范圍為【0-100】，不同于2.0的【0-200】，這也是一個(gè)常見的在3.0編輯器中打開原先2.0的項(xiàng)目，項(xiàng)目效果與原先不同甚至出BUG的原因。

????

3.0對(duì)于HSB模式的強(qiáng)力支持還體現(xiàn)在【將筆的顏色設(shè)為()】(取色器)積木上，在2.0中，這個(gè)積木的作用僅僅只能用來獲取編輯器中指定位置的顏色（或是另一種較麻煩的使用方法，下文將會(huì)提到），但是在3.0中，可以用這個(gè)積木很方便將畫筆顏色設(shè)置為我們期望的顏色，分別拖動(dòng)滑桿設(shè)置顏色、飽和度和亮度數(shù)值即可，且變化是實(shí)時(shí)的，非常直觀。同時(shí)這個(gè)積木還保留了原來的取色功能，雖然UI有所優(yōu)化（高亮舞臺(tái)），但因此取色范圍也局限在舞臺(tái)，而不是原先的整個(gè)編輯器界面。

另外繪圖編輯器中的填充顏色功能也采用了類似的優(yōu)化

總結(jié)

無論是顏色積木的功能還是繪圖編輯器中的填充功能，總之Scratch3.0的HSB模式功能十分強(qiáng)大。

03

RGB模式的使用方法

公式

可以利用公式分別控制R，G和B的值來混合RGB顏色。代碼如下

其中使用的是【將筆的顏色設(shè)為()】(取色器)積木，如此才能正確使用RGB模式設(shè)置顏色。

R、G、B每個(gè)變量的范圍要設(shè)置為1-255（滑桿模式），且僅支持整數(shù)

事實(shí)上，Scratch也支持ARGB模式，即加入透明度alpha通道，代碼如下

來看一個(gè)利用此公式制作的案例

十六進(jìn)制碼

在計(jì)算機(jī)中，RGB顏色通常以十六進(jìn)制表示法編寫，Scratch也不例外。使用十六個(gè)不同的數(shù)字（0-9，然后是AF）。前兩位數(shù)字表示從0（00）到255（FF）的紅色數(shù)量。后兩位數(shù)字表示從0（00）到255（FF）的綠色量。第三個(gè)兩位數(shù)表示從0（00）到255（FF）的藍(lán)色量。例如，紅色為100％紅色，0％藍(lán)色和0％綠色。因此，十六進(jìn)制值將＃FF?00?00（FF，00，00），其中FF是最大的2位十六進(jìn)制數(shù)（因此顏色包含最多的紅色）。這也稱為24位RGB，因?yàn)檫@種表示法有24位，每個(gè)十六進(jìn)制數(shù)字有4位。以下代碼可用于使用十六進(jìn)制格式顏色：

需要在變量前通過【連接()和()】積木加上“0x”，告訴編輯器，這是一串十六進(jìn)制數(shù)字。顏色對(duì)應(yīng)的十六進(jìn)制碼可以通過一些在線工具查詢獲得（無需輸入“#”），如：

http://tool.oschina.net/commons?type=3&tdsourcetag=s_pctim_aiomsg

通過這種方法，可以十分精確地將畫筆顏色設(shè)置為我們想要的顏色。

順帶提一句：

可以看出，【將筆的顏色設(shè)為()】(取色器)積木本身就是用十六進(jìn)制來設(shè)置的。

總結(jié)

Scratch無論是2.0還是3.0，對(duì)于RGB模式的支持都比較隱晦，但是還是十分有用的

聲明：本文章由網(wǎng)友投稿作為教育分享用途，如有侵權(quán)原作者可通過郵件及時(shí)和我們聯(lián)系刪除