Генератор на цветове за Tailwind
Генерирайте палета от 11 нюанса (50–950) и конфигурационния код на Tailwind CSS от един Hex код
Характеристики
Автоматично генериране на 11 нюанса от 1 цвят
Задайте входния цвят като 500 и изчислете тъмнините за 50–950
Поддръжка на v3 и v4 формат
Превключвайте между config и @theme писане чрез раздели
Копирайте Hex за всеки нюанс
Копирайте кодовете на цветовете един по един чрез бутони за всяка цветна проба
Обновяване на палетата при въвеждане
Няма нужда от бутон за изпълнение — пробвайте цветовете и сравнявайте в реално време
Как да използвате
Въведете Hex кода на основния цвят
Въведете Hex код или кликнете на цветната проба отляво, за да изберете чрез цветния подбор
Въведете цветното име по желание
Въведете цветното име (английски малки букви) за използване в кода. Ако е празно, ще се използва primary
Проверете 11-нюансите цветни проби
Проверете цветните проби и Hex кодовете за 50–950, след което копирайте един по един чрез бутоните на пробите
Изберете формат на изхода и копирайте
Изберете v3 или v4 и кликнете "Копирайте кода", за да го вставите в tailwind.config.js или CSS файл
Случаи на използване
Създаване на нюанси на цвета на марката
Съберете нюансите за хувер на бутони и фонове от един цвят на марката
Добавяне на цветове извън стандартната палета
Добавете уникални за проекта цветове в 11 нюанса във файла за конфигурация, които липсват в стандартните цветове на Tailwind
Създаване на @theme конфигурация за v4
Създайте CSS променливи на Tailwind v4 от основния цвят на сайта
Подготовка за реализация на дизайнерски макета
Подгответе кодовете на 11 нюанса от посочения цвят на макета и ги пренесете и в дизайн инструмента
Основни знания
Какво представляват 50–950 в Tailwind
Цветовете в Tailwind CSS се представят чрез 11 числови нива (50–950), което показва яркостта, където 50 е най-светлото, 950 е най-тъмното, а 500 е базовият цвят. Числата се използват в края на имената на класовете, например "bg-primary-500" или "text-primary-700".
- Нива 50–300：Нива 50–300 са светли цветове, често използвани за фонове и светли пълнежи, които остават разбираеми дори когато се преслагат с тъмен текст.
- Нива 600–950：Нива 600–950 са тъмни цветове, често използвани за хувер на бутони и цвят на текста на заглавията, които са ясно видими на светел фон.
Разлика в начина на дефинирането на цветовете между v3 и v4
В Tailwind CSS v3 цветовете се дефинират в JavaScript в tailwind.config.js, а в v4 се дефинират като CSS променливи в @theme в CSS файл. Независимо от писането, дефинираните цветове могат да се използват със същото име на клас, например "bg-primary-500".
- Начин на писане за v3：Начинът на писане за v3 е вложен формат, например "primary: { 500: '#3B82F6' }" в theme.extend.colors.
- Начин на писане за v4：Начинът на писане за v4 е формат с променлива, например "--color-primary-500: #3B82F6;" в @theme, където цветното име и нивото се свързват с тирета.
Безопасност и поверителност
Изцяло в браузъра
Въведените данни се обработват само във вашия браузър и не се изпращат навън.
Обработка само в браузъра
Изчисляване на палетата и генериране на кода се извършва изцяло във вашия браузър, входните данни не се изпращат на сервър.
Комуникацията е шифрована с HTTPS
Зареждането на страницата също е шифровано чрез TLS, съдържанието не може да бъде прочетено от трети лица.
Без изпращане на трети лица
Входното съдържание не се изпраща към външни услуги като рекламни мрежи или проследяватели.
Без автоматично запазване на резултатите
Въведени цветове и имена на цветовете и входни предложения не се съхраняват на сървъра.
Следете RAKKOTOOLS в Google Search
187 полезни инструмента, които лесно се намират от Google Search и AI Search!
- Намиране в Search
- Показване и в AI Search
- Откривай нови инструменти
Новини за обновления
- update #318
Добавена Tailwind генерация на цветове, създаване на 11 цветови нюанса и конфигурационен код от един цвят
Избрани инструменти
187 безплатни уеб инструмента са готови за употреба сега!