顏色混色器：快速上手指南

第一次使用就能成功所需的全部內容：該貼上什麼、哪個選項真正重要、以及如何讀懂結果。

輸入 顏色混色器 輸出 100% 在瀏覽器內執行——資料不會離開您的裝置。
顏色混色器 — 輸入 → 輸出. 100% 在瀏覽器內執行——資料不會離開您的裝置。

使用方法

  1. 開啟工具，將內容貼上到左側輸入框。
  2. 只調整任務真正需要的選項——多數情況下預設值就是正確的。
  3. 在右側檢視結果，輸入時結果會即時更新。
  4. 用「複製」取走結果，或用「下載」儲存為檔案。
使用方法 · 顏色混色器 1 將資料貼上到輸入框（或載入範例）。 2 依目標格式或使用情境調整選項。 3 複製、下載或檢視輸出——輸入時結果即時更新。
使用方法 — 3

範例

Mix against #ffffff at 50% and switch the space to CIE Lab for a perceptually even ramp.

輸入

#0ea5b7

輸出 — 搜尋結果

#0ea5b7 + #ffffff at 50% (mixed in RGB)

Result
  HEX   #87d2db
  RGB   rgb(135, 210, 219)
  HSL   hsl(186.4, 54.0%, 69.3%)

Contrast against white : 1.71:1
Contrast against black : 12.26:1

Ramp (9 steps)
    0%  #0ea5b7
   13%  #2cb0c0
   25%  #4abcc9
   38%  #68c7d2
   50%  #87d2db
   63%  #a5dde4
   75%  #c3e9ed
   88%  #e1f4f6
  100%  #ffffff

CSS
  --mix: #87d2db;
  background: linear-gradient(90deg, #0ea5b7, #ffffff);

執行

說明

Blend two colours in sRGB, HSL or perceptual CIE Lab and generate a ramp with contrast ratios.

顏色混色器 → · 使用方法 → · 顏色工具 →

相關工具

十六進位顏色選擇器Interactive picker with HEX, RGB and HSL output.顏色 Code 轉換器Convert between HEX, RGB, HSL and named colors.顏色對比度檢查器(WCAG)Verify text contrast ratios against WCAG AA/AAA.顏色調色板產生器Shades, tints and complementary schemes from one color.隨機顏色產生器Batch random colors with copyable codes.CSS 命名顏色參考表All 148 CSS color names with codes and previews.