# Генератор на цветови тонове

Генерирайте тонове на цвят, като го смесите с неутрално сиво на равни стъпки. Така наситеността намалява, а нюансът се запазва. Въведете цвят във формат 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() работи във всички съвременни основни браузъри.

Вашата реклама тук?

[Пишете ни](mailto:hi@dennn.is?subject=%D0%A0%D0%B5%D0%BA%D0%BB%D0%B0%D0%BC%D0%B0%20%D0%B2%20OneClick%20Pro)

[Реклама Комплект плъгини за агенти за WordPress.](https://sleekwp.com/?ref=oneclickpro)