#4466EEBase color#5775F010%#6985F120%#7C94F330%#8FA3F540%#A2B3F750%#B4C2F860%#C7D1FA70%#DAE0FC80%#ECF0FD90%#FFFFFF100%#4466EEBase color#3D5CD610%#3652BE20%#3047A730%#293D8F40%#22337750%#1B295F60%#141F4770%#0E143080%#070A1890%#000000100%#4466EEBase color#4A69E310%#506BD820%#566ECD30%#5C70C240%#6273B750%#6876AC60%#6E78A170%#747B9680%#7A7D8B90%#808080100%色調產生器採用一種基色並建立其較淺和較暗版本的單色比例。從#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 顏色名稱,所有這些都標準化為相同的樣本。
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.
Convert color codes between HEX, RGB, HSL, HWB, and CMYK instantly
Generate harmonious color palettes from any base color - shades and tints, complementary, analogous, triadic, and monochromatic - with HEX, RGB, and HSL values you can copy.
Pick colors and convert between HEX, RGB, and HSL formats
0 comments
No comments yet. Be the first to share your thoughts!