什麼是色調產生器?
色調產生器採用一種基色並建立其較淺和較暗版本的單色比例。從#4466EE 等單一輸入,它會產生一排向白色移動的色調、一排向黑色移動的色調以及一排向灰色移動的色調。每個樣本都是真實顏色,您可以複製為 HEX、RGB 或 HSL,然後直接放入 CSS、設計檔案或主題配置中。
這三個尺度來自色彩理論中使用的經典定義。色調是與白色混合的底色,這提高了它的亮度,同時保持相同的色調。色調是底色與黑色混合,使其變暗。色調是與灰色混合的底色,它降低了其強度並給出了柔和、更複雜的顏色版本。從一個輸入中獲得所有三個按鈕可以讓您建立連貫的調色板:按鈕及其懸停狀態、一組圖表系列或介面的明暗表面,所有這些都源自單一品牌顏色。
生成器完全在您的瀏覽器中運行。您輸入的顏色已解析,比例尺是使用客戶端 JavaScript 計算的,因此不會上傳任何內容,沒有帳戶,並且您的工作永遠不會被追蹤。它接受 HEX、rgb ()、hsl () 和常見的 CSS 顏色名稱,可讓您設定每個比例包含的步驟數,並立即更新每個樣本。頁面載入後即可離線運作。
如何使用色調產生器?
輸入基色
以任何常見語法鍵入或貼上顏色:HEX 代碼(如 #4466EE)、rgb () 或 hsl () 值或 CSS 顏色名稱(如青色)。
設定步驟數
選擇每個音階應包含多少變化。更多的步驟提供了從底部到白色、黑色或灰色的更精細的漸變。
查看色調、色調和色調
該工具並排顯示三個刻度,每個樣本都標有其 HEX 值以及混合到目標顏色的百分比。
複製您需要的顏色
點擊任何樣本以複製其值。在 HEX、RGB 和 HSL 之間切換複製格式以符合您的專案期望的語法。
主要特點
色調、色調和色調
一種底色同時產生三種全色:淺色調、深色調和向灰色的柔和色調。
每個值均可複製
每個樣本都有 HEX、RGB 和 HSL 版本,因此您可以將其直接貼上到 CSS、設計工具或主題檔案中。
可調步驟
每個比例設定 2 到 20 個步驟,以控制基色與白色、黑色或灰色之間的漸變細度。
寬容輸入
接受 3 位元和 6 位元 HEX、rgb () 和 hsl () 值以及常見的 CSS 顏色名稱,所有這些都標準化為相同的樣本。
Frequently Asked Questions
Related Tools
Color Contrast Checker
Check the contrast ratio between a text color and its background against WCAG 2.2 AA and AAA thresholds, with a live preview and one-click accessible-color suggestions.
Color Converter
Convert color codes between HEX, RGB, HSL, HWB, and CMYK instantly
Color Mixer
Blend two colors with adjustable ratio and blend modes, and build a gradient between them
Color Palette Generator
Generate harmonious color palettes from any base color - shades and tints, complementary, analogous, triadic, and monochromatic - with HEX codes you can copy and a CSS variables export.
Comments
0 comments
No comments yet. Be the first to share your thoughts!