標題:&引用;顏色轉換器:以正確的方式轉換 HEX、RGB、HSL、HWB 和 CMYK; slug:顏色轉換器引導工具:顏色轉換器類別:顏色類型:簇
色彩轉換器:以正確的方式轉換 HEX、RGB、HSL、HWB 和 CMYK
第一次用顏色咬我是在列印中。我為我的一款 WordPress 產品建立了一個登陸頁面,在瀏覽器中簽下了藍色品牌,然後發送了相同的 "藍色&報價;去印刷店買一批貼紙。回來的是一個扁平的、略帶灰色的海軍藍,看起來一點也不像螢幕。沒有人將 RGB 螢幕顏色轉換為 CMYK,所以印表機猜到了,猜測是錯誤的。那天我不再將一種顏色視為單一字串,而是開始將其視為必須同時使用多種語言使用的值。
這正是顏色轉換器的用途。您以一種語法賦予它一種顏色,然後將其交還給所有其他語法,因此 CSS 中的藍色、設計文件中的藍色以及印表機接收到的藍色都可以證明是相同的顏色。我建造了 toolz。dev 上的顏色轉換器 因為我厭倦了將十六進位代碼貼上到三個不同的網站以分別取得 RGB、HSL 和 CMYK。
TL;DR: 顏色轉換器採用一種顏色,並立即以 HEX、RGB、HSL、HWB 和 CMYK 重新表達,加上最近的 CSS 顏色名稱。使用 RGB 和 HEX 表示螢幕,當您想要用手推送顏色時使用 HSL 或 HWB,使用 CMYK 表示列印。 Toolz。dev 轉換器完全在瀏覽器中運行,保持 alpha 通道完整,並且永遠不會上傳您貼上內容。
什麼是顏色轉換器?
顏色轉換器解析以任何常見 CSS 語法編寫的顏色,並計算其在其他語法中的等效顏色。存在哪些語法以及每個語法轉換的具體方式由下式定義 CSS 色彩模組等級 4. 數學並不複雜,但手工計算很乏味且容易出錯。轉換 #4466EE RGB 意味著將六個十六進位數字分成三對,並將每對讀作以 16 為底的數字: 44 68歲, 66 是102,並且 EE 是238,給予 rgb(68, 102, 238). 反之亦然意味著將每個通道分成兩位數的六角形字串並連接起來。使用 HSL 意味著對通道進行歸一化,找到最小值和最大值,並從中計算色調、飽和度和亮度。你不想在凌晨 2 點在腦海中這樣做。
轉換器的價值不僅僅是保存算術。它保證了一致性。當一個工具從單一解析顏色產生所有格式時,您複製的 RGB 和您複製的 HSL 不可能描述略有不同的顏色,因為您在步驟之間的捨入方式不同。一種來源,一種真理,每種格式。
為什麼顏色格式存在?
每種顏色格式都得以保留,因為它確實擅長一項工作。
RGB 是螢幕的工作原理。顯示器發出紅光、綠光和藍光,以不同強度混合這三種光會產生您看到的每種顏色。這使得 RGB 成為瀏覽器的母語:無論您在 CSS 中編寫什麼語法,渲染引擎都會在點亮像素之前將其解析為 RGB。
HEX 是 RGB 的簡寫。 #4466EE 與相同 rgb(68, 102, 238),只需打包成一個緊湊的字串,即可輕鬆貼上到樣式表或設計工具中。它之所以受歡迎,是因為它簡短且明確,而不是因為它更有能力。
HSL 透過色調、飽和度和亮度來描述顏色。這是我手動調整 UI 時達到的格式。要使懸停時的按鈕變暗,我會將亮度降低幾個點,而不要使用色調和飽和度。嘗試在原始 RGB 中這樣做意味著將所有三個通道改變不等量,並希望色調不會漂移。
HWB,在 CSS 顏色模組 4 級規範中定義 (https://www.w3.org/TR/css-color-4/),透過混合多少白色和多少黑色來描述相同的色調。它乾淨地映射到人們實際如何思考色調和色調:添加白色來淡化,添加黑色來淡化。它更新了,所以我主要在程式碼的可讀性比瀏覽器覆蓋範圍更重要時使用它。
CMYK 是列印模型。印表機在白紙上放置青色、洋紅色、黃色和黑色墨水,每種墨水都會減去而不是添加光線。這就是為什麼生動的螢幕顏色在紙上看起來會更暗淡:兩種型號可以產生的顏色範圍(稱為色域)是不同的。轉換器為您提供 CMYK 近似值,但它無法發明不存在的墨水。
如何將 HEX 轉換為 RGB 並轉換回來?
最常見的轉換(大幅)是 HEX 到 RGB 以及 RGB 到 HEX。這是手動方法,因此您可以理智地檢查任何工具,包括我的工具。
若要將 HEX 轉換為 RGB,請將六位數字分成三對,並將每對讀作從 0 到 255 的十六進制數字。三位數簡寫,例如 #46E 透過將每個數字加倍來擴展 #4466EE 首先。要將 RGB 轉換為 HEX,請取得每個通道值,如果需要,將其轉換為前導零的兩位十六進位字串,並將它們加入雜湊後面。
不要重複執行此操作,而是將值貼上到 中 顏色轉換器 並一次閱讀每種格式。如果您還需要直觀地選擇顏色並查看其即時更新,則 選色器 是更好的起點,兩個工具共享相同的轉換核心,因此它們的數量一致。
我什麼時候應該使用 CMYK 而不是 RGB?
僅當輸出為紙上墨水時才使用 CMYK。名片、貼紙、包裝和任何商業列印作業都期望 CMYK 值,將 RGB 傳送到印表機意味著印表機或其軟體為您轉換,通常結果您沒有簽字。這是我在句子中的貼紙錯誤。
對於螢幕上顯示的任何內容,請使用 RGB 及其 HEX 速記:網站、應用程式、社交圖形、影片。如果一個專案跨越兩個世界,請保留 RGB 或 HEX 作為您的真相來源,並在您切換列印時使用轉換器產生 CMYK 近似值,以便您可以查看 CMYK 值並標記任何會發生嚴重變化的顏色,然後再計算列印費用。
顏色格式如何比較?
| 格式 | 最好 | 阿爾法支持 | 例子 |
|---|---|---|---|
| 十六進位 | 緊湊型 CSS,設計切換 | 僅 8 位數字形式 | #4466EE |
| RGB/RGBA | 螢幕,程式顏色 | 是的(rgba) | rgb(68, 102, 238) |
| HSL/HSLA | 手工調諧色調和輕盈度 | 是的(hsla) | hsl(228, 83%, 60%) |
| HWB | 可讀的色調和色調 | 是的(帶有斜線阿爾法) | hwb(228 27% 7%) |
| CMYK | 印刷,紙上墨水 | 不 | cmyk(71%, 57%, 0%, 7%) |
該表值得記住,因為它整齊地映射到工作流程:使用 HEX 進行設計或直觀選擇,使用 HSL 或 HWB 進行調諧,運送到 RGB 或 HEX 中的螢幕,並僅在列印邊界處轉換為 CMYK。
透明度如何在格式之間傳播?
Alpha 是許多轉換悄悄出錯的地方。 alpha 通道控制不透明度,從 0(完全透明)到 1(完全不透明)。 RGBA 和 HSLA 將其作為第四個值,8 位 HEX 將其作為第四對: #4466EECC 是藍色,不透明度約為 80%,因為 CC 是 255 中的 204。普通十六進位和 cmyk() 根本沒有阿爾法通道。
Toolz。dev 轉換器透過支援它的每種格式保留 alpha。如果你貼上 rgba(0, 0, 0, 0.5) 你得到 #00000080 在 HEXA 行中 hsla(0, 0%, 0%, 0.5) 在 HSLA 行中,所有內容都描述相同的半透明黑色。當你複製純 HEX 或 CMYK 行時,你正在複製完全不透明的顏色,這是一個刻意的選擇,而不是一個錯誤:這些格式無法表達不透明度,因此它們顯示顏色就好像它是實心的一樣。當透明度很重要時,請從 alpha 感知行進行複製。
我可以轉換 CSS 顏色名稱嗎?
是的,而且它雙向工作。輸入關鍵字,例如 tomato, rebeccapurple,或者 slategray 轉換器將其解析為 HEX、RGB、HSL、HWB 和 CMYK。全套 148 種命名顏色來自 CSS 顏色模組等級 4 規範,因此這些值與瀏覽器解析的內容完全匹配。
反之亦然,它才真正有用。貼上數字顏色,如果匹配,轉換器會報告確切的 CSS 名稱,如果匹配,則總是透過 RGB 距離顯示最近的命名顏色。最接近的匹配對於命名變數和編寫可讀設計文件很方便: #663399 回來時為 rebeccapurple,接近它的東西又回來了,"最近:rebeccapurple"所以你知道你所在的是哪個街區。
這如何適應真實的設計工作流程?
以下是我如何在專案中實際使用顏色,以及每個工具適合的位置。
我首先選擇原色,通常是視覺上的 選色器. 一旦我擁有了我的藍色品牌,我就會把它貫穿其中 顏色轉換器 將其 HEX、RGB、HSL 和 CMYK 值鎖定在一處,然後將這些值貼到設計系統中,以便每個隊友和每個供應商都從相同的數字進行工作。
然後我建立調色板。支援色調來自 HSL 中的輕盈感,我用 來檢查每個背景文字對 顏色對比度檢查器 因此,調色板可以在發貨前訪問,而不是在投訴後訪問。當我需要豐富的背景時,我會將其中兩種顏色輸入其中 梯度發生器.
最後,為了在所有顏色周圍響應式間距和排版,我將調色板與 CSS 箝位產生器 因此,尺寸可以平滑地縮放,因為顏色是一致的。顏色和佈局是相同拋光度的兩半。
如果您在工作時關心資料流向何處,那麼值得一讀這些工具如何處理它。顏色轉換器中的所有內容都運行客戶端,這是我在 中寫的設計選擇 線上工具中的資料隱私指南,它與我日常套件的其餘部分放在一起 web 開發人員工具包.
生產時是否足夠準確?
對於螢幕工作,是的,沒有條件。 HEX、RGB、HSL 和 HWB 都是相同 sRGB 顏色的精確表示,因此它們之間的轉換乾淨:將顏色轉換為 HSL 並返回,然後您降落在相同的 RGB 三元組上,給出或取一個單位的捨入一個通道。這種舍入是在整數通道中表示連續顏色所固有的,而不是任何一種工具的缺陷。
對於 CMYK,將輸出視為可靠的、標準的近似值,而不是顏色管理的證明。真正的列印顏色取決於印表機使用的特定紙張、墨水和 ICC 設定文件,這是任何基於瀏覽器的工具都無法知道的。轉換器使用標準的樸素 CMYK 公式,這正是大多數設計工具預設顯示的內容,並且是一個可靠的起點。當工作對顏色至關重要時,在完整運行之前從印表機獲取實體證明。這是我的灰色海軍藍貼紙教給我的教訓,從這一段中學習比從一盒錯誤的貼紙中學習更便宜。
LAB 和 OKLCH 等較新的色彩空間怎麼樣?
如果您密切遵循 CSS,您已經看到了 lab(), lch(), oklab(), 和 oklch() 出現在樣式表和設計工具中。這些來自 CSS 顏色模組 4 級規範,它們解決了一個真正的問題:RGB、HSL 和 HWB 都與 sRGB 螢幕模型相關,因此兩種看起來與眼睛同樣不同的顏色之間的數字距離可能非常不同,寬色域顯示器可以顯示sRGB 根本無法描述的顏色。 OK 色彩空間在感知上是均勻的,這使得它們非常適合產生均勻的階梯調色板和插值中間不混濁的漸變。
我特意讓這個轉換器專注於你貼上到日常生產 CSS 和手動印表機的格式:HEX、RGB、HSL、HWB 和 CMYK。這是涵蓋絕大多數實際任務的集合,並且每個任務都乾淨地映射到相同的 sRGB 顏色,因此它們之間的轉換是精確且可逆的。更寬的色域空間涉及很容易犯微妙錯誤的色域映射決策,將它們混合到一個簡單的轉換器中會以清晰度換取大多數人不需要的覆蓋範圍。
我遵循的實用規則是:當您透過演算法產生調色板或漸層並且您想要感知均勻的步驟時,請聯絡 OKLCH,並保留 HEX、RGB 和 HSL 來完成編寫元件的日常工作。當您在 OKLCH 中進行設計時,請在切換前使用設計工具將產生的錨顏色轉換為 HEX 或 RGB,以便樣式表中的值與該轉換器和您的隊友可以讀取的值相同。
常見問題
如何將 HEX 轉換為 RGB?
將六位數的 HEX 代碼分成三對,並將每對讀作 0 到 255 之間的十六進制數字 #4466EE, 44 是68(紅色), 66 是 102(綠色),並且 EE 是238(藍色),給予 rgb(68, 102, 238). 將 HEX 程式碼貼到轉換器中,RGB 值會立即與所有其他格式一起出現。
如何將 RGB 轉換為十六進位?
將紅色、綠色和藍色值(0 到 255)轉換為兩位十六進制數,並在雜湊後將它們連接起來。 rgb(68, 102, 238) 成為 #4466EE. 轉換器會立即執行此操作,並在存在 alpha 值時為您提供 8 位元 HEXA 表單。
HSL 和 HWB 有什麼不同?
HSL 透過色調、飽和度和亮度來描述顏色,而 HWB 透過混合多少白色和多少黑色來描述相同的色調。 HWB 通常對色調和色調更直觀:增加白色會使顏色變淺,增加黑色會使其變暗。兩者都映射到完全相同的 RGB 值,因此您可以在它們之間自由切換。
我什麼時候應該使用 CMYK 而不是 RGB?
使用 CMYK 進行列印,使用 RGB 進行螢幕。 CMYK 是一種基於青色、洋紅色、黃色和黑色墨水的減色模型,因此這是商業印表機的期望。 RGB 是加性的,描述顯示器發出的光。螢幕顏色具有 CMYK 近似值,但兩個色域不同,因此生動的螢幕顏色在列印中可能看起來更暗淡。
轉換器支援透明度嗎?
是的。提供 alpha 值 rgba(), hsla(),或 8 位元 HEX,並且每個 alpha 感知輸出中都保留不透明度。沒有 alpha 通道的格式,例如普通 HEX 和 cmyk(),顯示完全不透明的顏色,因此當透明度很重要時檢查 RGBA 或 HEXA 輸出。
我可以轉換 CSS 顏色名稱嗎?
是的。輸入 CSS 關鍵字,例如 tomato, rebeccapurple,或者 slategray 轉換器將其解析為 HEX、RGB、HSL、HWB 和 CMYK。它也可以反向工作:貼上數字顏色,如果匹配則報告確切的 CSS 名稱,加上最接近的命名顏色以供參考。
顏色轉換器是免費且私有的嗎?
是的。轉換器完全免費,沒有註冊,沒有限制,也沒有浮水印。所有解析和轉換都使用客戶端 JavaScript 在瀏覽器中運行,因此您輸入的顏色永遠不會離開您的設備,並且頁面加載後工具將繼續離線工作。
