Справочник по цветовой палитре CSS Tailwind

• Полное руководство по цветам Tailwind: просмотрите все 22 семейства цветов CSS Tailwind с 242 отдельными образцами цветов. Каждое семейство отображает свой полный спектр от оттенка 50 (самый светлый) до 950 (самый темный), что позволяет легко сравнивать и выбирать идеальный оттенок для вашего дизайна.
• Мгновенный поиск и фильтрация: поиск по названию семейства цветов или шестнадцатеричному значению или фильтрация по категории (нейтрально-серый, теплый, зеленый, синий, фиолетовый). Справочник обновляется мгновенно по мере ввода, показывая только соответствующие семейства с полным диапазоном оттенков.
• 100% конфиденциальность — без загрузки: все данные о цвете встроены в страницу и обрабатываются локально в вашем браузере. Никакие данные никогда не отправляются ни на один сервер — это безопасно для клиентских проектов и собственных систем проектирования.
• Бесплатно и всегда доступно: получите доступ к полному справочнику по цветовой палитре Tailwind CSS в любое время, без регистрации, подписки и ограничений на использование. Полностью бесплатно навсегда, без рекламы, блокирующей интерфейс.

• Разработка CSS для Tailwind: разработчики Tailwind используют справочник по цветовой палитре, чтобы быстро найти точное значение HEX оттенка для своих служебных классов. Вместо того, чтобы запоминать шестнадцатеричные коды, например #3b82f6 для blue-500, просмотрите визуальную палитру и скопируйте значение одним щелчком мыши.
• Передача дизайна в разработку: дизайнеры используют ссылку на цвет Tailwind, чтобы сопоставить свои проекты Figma или Sketch с ближайшим оттенком Tailwind. Визуальная палитра позволяет легко определить, какой оттенок использовать для согласованной реализации дизайна и кода.
• Пользовательская конфигурация темы. При расширении темы Tailwind по умолчанию разработчики используют ссылку на цвет, чтобы выбрать собственные цвета, которые гармонируют с существующими оттенками Tailwind. Просмотрите связанные семейства, чтобы найти цвета, которые естественным образом соответствуют вашей расширенной палитре.
• Документация системы проектирования. Инженеры системы проектирования используют ссылку на цвет для быстрого поиска документации по токенам дизайна на основе Tailwind. Организованное семейное представление позволяет легко ссылаться и документировать цветовые шкалы для вашей команды.
• Проверка доступности и контрастности. Специалисты по доступности используют эталон цвета Tailwind для определения цветовых комбинаций, соответствующих требованиям контрастности WCAG. Полный диапазон оттенков позволяет легко найти более светлые или темные варианты, сохраняющие достаточный контраст.
• Обучение и исследование цвета. Студенты-дизайнеры и новые пользователи Tailwind используют справочник по цветам, чтобы понять цветовую систему Tailwind. Узнайте, как каждое семейство меняется от светлого к темному, и узнайте, какие семейства лучше всего подходят для разных элементов пользовательского интерфейса.

Цветовая палитра Tailwind CSS — это тщательно подобранный набор цветовых семейств, предназначенный для современной веб-разработки. Он включает 22 цветовых семейства, каждое из которых содержит 11 оттенков от 50 (самых светлых) до 950 (самых темных) — всего 242 цвета. Палитра охватывает весь спектр — от холодных серых и ярких основных тонов до нежных пастельных и глубоких темных оттенков — все они созданы для гармоничного сочетания.

1. Просмотр по семейству: каждое из 22 семейств (шиферное, серое, красное, синее и т. д.) отображается в виде карты, показывающей полный диапазон оттенков от 50 до 950. В описании объясняются характер и лучшие варианты использования каждого семейства цветов.
2. Поиск или фильтр: используйте панель поиска, чтобы найти семьи по имени или шестнадцатеричному значению. Используйте фильтры категорий («Нейтральный серый», «Теплый», «Зеленый», «Синий», «Фиолетовый»), чтобы сузить список связанных семейств цветов. Все фильтры обновляются мгновенно.
3. Копирование любого цвета. Наведите указатель мыши на любой образец оттенка и щелкните, чтобы скопировать его шестнадцатеричное значение в буфер обмена. Вы также можете использовать кнопку «Копировать HEX» под каждым столбцом оттенка. При копировании цвета появляется всплывающее сообщение с визуальным подтверждением.

• Фамилии: цвета сгруппированы в такие семейства, как синий, красный, серый и изумрудный. Каждое семейство представляет собой отдельный оттенок с одинаковой насыщенностью всех оттенков.
• Номера оттенков: каждое семейство содержит 11 оттенков с номерами 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 и 950. Оттенок 500 обычно является «базовым» цветом, при этом меньшие номера означают более светлые варианты (оттенки), а более высокие номера — более темные варианты (оттенки).
• Синтаксис служебного класса. В CSS Tailwind цвета используются как служебные классы, такие как bg-blue-500, text-gray-900 или border-emerald-300. Номер оттенка напрямую соответствует суффиксу класса.
• Настройка: Tailwind позволяет расширять или переопределять эти цвета по умолчанию в файле Tailwind.config.js, что позволяет вам поддерживать то же соглашение об именах, что и цвета вашего бренда.

Оттенки 50–200 лучше всего подходят для цветов фона, тонких состояний наведения и легкой заливки элементов пользовательского интерфейса. Они обеспечивают достаточно цвета, чтобы быть заметными, не перегружая контент. Используйте их для фона карточек, чередования строк таблицы и эффектов наведения навигации.

Оттенки 300–500 идеально подходят для основных цветов, кнопок, ссылок и элементов пользовательского интерфейса среднего веса. Оттенок 500 используется по умолчанию для большинства утилит цвета Tailwind и обеспечивает наилучший баланс видимости и универсальности.

Оттенки 600–950 хорошо подходят для текста, границ и высококонтрастных элементов. Используйте более темные оттенки для читаемого основного текста (обычно от серого от 700 до серого 900) и для акцентных элементов, которые должны выделяться на более светлом фоне. Оттенок 950 был добавлен в Tailwind v3.3 для еще более темных вариантов.