Генератор на тонове и нюанси
21 цвята
#ffffffrgb(255, 255, 255)#ebf3fergb(235, 243, 254)#d8e6fdrgb(216, 230, 253)#c4dafcrgb(196, 218, 252)#b1cdfbrgb(177, 205, 251)#9dc1fbrgb(157, 193, 251)#89b4fargb(137, 180, 250)#76a8f9rgb(118, 168, 249)#629bf8rgb(98, 155, 248)#4f8ff7rgb(79, 143, 247)#3b82f6rgb(59, 130, 246)#3575ddrgb(53, 117, 221)#2f68c5rgb(47, 104, 197)#295bacrgb(41, 91, 172)#234e94rgb(35, 78, 148)#1e417brgb(30, 65, 123)#183462rgb(24, 52, 98)#12274argb(18, 39, 74)#0c1a31rgb(12, 26, 49)#060d19rgb(6, 13, 25)#000000rgb(0, 0, 0)Технически подробности
Как работи генераторът на тонове и нюанси
Какво прави инструментът
Генераторът на тонове и нюанси създава по-светли тонове (смесени с бяло) и по-тъмни нюанси (смесени с черно) от всеки базов цвят. Въведете цвят и изберете броя стъпки, за да генерирате плавен градиент от вариации. Всяка стъпка показва HEX, RGB стойности и процента на смесване, което улеснява изграждането на последователни цветови скали за UI дизайн, брандинг и визуализация на данни.
Често срещани случаи на употреба от разработчици
Разработчиците използват генератори на тонове и нюанси при изграждане на скали за дизайн токени (напр. blue-100 до blue-900), създаване на състояния hover и active за интерактивни елементи, проектиране на достъпни цветови йерархии и създаване на последователни цветове за фон и повърхности за светли и тъмни теми. Инструментът е ключов за изграждане на персонализирани цветови палитри за Tailwind CSS или цветови системи по Material Design.
Как работят тоновете и нюансите
Тон се създава чрез смесване на цвят с бяло, което увеличава неговата светлина. Нюанс се създава чрез смесване с черно, което намалява светлината. Формулата за тонове е: new = base + (255 - base) × factor. За нюанси: new = base × (1 - factor). Стъпките са равномерно разпределени между базовия цвят и чисто бяло (тонове) или чисто черно (нюанси), като се получава линеен градиент от цветови стойности.
Често срещани капани и гранични случаи
Линейното смесване с бяло или черно може да доведе до избледнели тонове или мътни нюанси при някои оттенъци. Жълтите може да изглеждат зеленикави при потъмняване, а сините може да загубят наситеност при изсветляване. За перцептивно равномерни скали обмислете използването на цветови пространства OKLCH или CIELAB. Винаги проверявайте дали най-светлите тонове и най-тъмните нюанси запазват достатъчен контраст спрямо предвидените фонове.
Кога да използвате този инструмент вместо код
Използвайте този браузърен инструмент за бързо изследване и генериране на цветови скали по време на дизайн работа. За производствени дизайн системи генерирайте тонове и нюанси програмно, използвайки цветови библиотеки като chroma.js или culori, които поддържат перцептивно равномерни цветови пространства и могат да извеждат дизайн токени във всеки формат.