Создание палитры занимает меньше минуты
Недавно я был одержим стеком T3 (Next.js, TypeScript, Tailwind CSS, Prisma и tRPC). В рамках этого я использовал Tailwind CSS для быстрой компоновки формата каждого проекта, над которым я работал в течение последнего месяца. Это делает стиль таким же символом, как написание классов в ваш JSX или HTML.
Но хотелось больше возможностей. Цвета по умолчанию, предоставленные командой Tailwind, — замечательный, но я начал слишком много проектов с bg-slate-700. Я решил, что пришло время мне что-то изменить. И что может быть лучше, чем сделать свой собственный инструмент.
HueWind — это сайт, посвященный максимальному упрощению связанных CSS-тем Tailwind. Черпая вдохновение у создателей палитр пиксель-арта, я уделял большое внимание чистоте смешивания между самым светлым значением темы, основными цветами и самым темным значением.
Попробуйте здесь, huewind.jordantwells.com, и, как всегда, исходный код можно найти на моем GitHub по адресу github.com/jordantwells42/huewind.
Зачем использовать это вместо любого другого генератора палитр?
В основе этого проекта лежит осведомленность обо всех цветах вашего сайта. Типичные образцы цветов создаются в вакууме, где базовые цвета не знают о своей связи с другими базовыми цветами, а весь образец не знает о своей связи с самыми светлыми и самыми темными тонами на веб-сайте.
HueWind автоматически генерирует для вас дополнительные цвета темы в рамках тетрадной цветовой схемы. Это обеспечивает четкую взаимосвязь между вашим основным цветом темы и теми, которые его поддерживают.
Что еще более важно, образцы цветов генерируются с учетом самых светлых и самых темных тонов на вашем сайте.
Типичные автоматически сгенерированные образцы цвета преобразуют ваш целевой цвет в сторону чистого белого (#FFFFFF) для создания более светлых оттенков и чистого черного (#000000) для создания более темных. Хотя этот дизайн может выглядеть современно, ему также не хватает души, которую имеют подобранные вручную художественные палитры.
Вместо этого HueWind использует выбранный вами самый светлый оттенок и самый темный оттенок, чтобы создать свои образцы. Простой переход от чистого черного к темно-фиолетовому или от ослепительно белого к бледно-желтому может привести к замечательным изменениям эстетики и ощущения от веб-сайта.
Как это работает?
HueWind использует сплайн-интерполяцию для плавного перехода между оттенками, насыщенностью и значениями ваших светлых, темных и базовых оттенков.
Это использует 3 точки ваших светлых, базовых и темных оттенков, чтобы однозначно определить кривую, которая проходит через все из них, установив значение X оттенков на 0, 500 и 1000 соответственно. Затем он оценивает эту кривую по классическим 50–900 значениям Tailwind CSS, давая окончательные выходные значения.
Важно отметить, что для доступности я автоматически выбираю доступный цвет текста по всему сайту, используя tinycolor. Это включает в себя откат к использованию чистого черного и чистого белого на случай, если пользователь решит, что его любимый светлый оттенок — белый, а его любимый темный оттенок — белый.
Попробуйте!
Создание палитры занимает меньше минуты! Используйте его здесь, на huewind.jordantwells.com! И я уверен, что вы увидите, как я использую его в своих будущих проектах на jordantwells.com.
Иордания
