Генератор на цветови тонове
Генерирайте тонове на цвят, като го смесите с неутрално сиво на равни стъпки. Така наситеността намалява, а нюансът се запазва. Въведете цвят във формат CSS, изберете от 2 до 20 стъпки и цветово пространство и получете таблица със стойности HEX, RGB, HSL и OKLCH за всеки тон, започвайки с оригиналния цвят. Полезно за приглушени палитри, неактивни състояния, ненатрапчиви повърхности и по-спокойни варианти на бранда.
Често задавани въпроси
Какво е тон?
Тонът е цвят, смесен със сиво. Той запазва нюанса си и става по-приглушен, за разлика от оттенъка, който се смесва с бяло, или сянката, която се смесва с черно.
Какво сиво се използва?
Използва се средното сиво в sRGB #808080, rgb(128 128 128). Затова светлите цветове стават малко по-тъмни, а тъмните — малко по-светли, докато се доближават до него. За смесване с друго сиво използвайте Color Mixer със собствено сиво.
Как са разпределени стъпките?
При N стъпки ред k смесва цвета с (k - 1) / N сиво, така че при 10 стъпки се получават 0%, 10%, 20% и т.н. до 90%. Първият ред винаги е оригиналният цвят, а чистото сиво не се включва в списъка.
По какво тонът се различава от намаляването на наситеността в HSL?
Намаляването на наситеността в HSL запазва светлостта в HSL, докато смесването със сиво също приближава светлостта към средната стойност. Затова тоновете изглеждат като цвета, видян през сив филтър — подходящи са за приглушени фонове и неактивни състояния.
Каква е разликата между смесването в sRGB и OKLab?
Смесването в sRGB усреднява стойностите на гама-кодираните канали — класическият подход в подобните на боя цветови таблици и Sass mix(). Смесването в OKLab се извършва в перцептивно пространство, затова наситеността намалява по-равномерно с всяка стъпка.
Кои формати за въвеждане мога да използвам?
Шестнадесетични кодове със или без #, CSS имена на цветове, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() и cmyk(). Въведете по един цвят на изпълнение.
Колко тона мога да генерирам?
Между 2 и 20 на изпълнение, като стойността по подразбиране е 10. Броят включва оригиналния цвят на първия ред.
Какви стойности показва таблицата?
За всяка стъпка се показват делът на сивото, hex кодът, rgb(), hsl() и oklch() в съвременен синтаксис на CSS. Каналите RGB са цели числа, процентите HSL имат до два знака след десетичната запетая, а светлостта и наситеността в OKLCH — до четири.
Какво се случва с прозрачните цветове и цветовете с широка гама?
Алфата на входния цвят се запазва за всеки тон, затова hex кодовете са с 8 цифри. Стъпките извън цветовия обхват се преобразуват в sRGB чрез алгоритъма CSS Color 4 в колоните HEX, RGB и HSL, докато колоната OKLCH запазва непреобразуваната стойност.
Как да възпроизведа тон в CSS?
Копирайте стойността hex или oklch(), или оставете браузъра да смеси цветовете с color-mix(in oklab, var(--brand) 70%, #808080), за да получите тон от 30% според настройката OKLab. color-mix() работи във всички съвременни основни браузъри.