#FFFBEBamber
amber-50
Янтарный Tailwind 50Скопировать токен, HEX или RGB
- Чёрный текст
- 20.25:1
- Белый текст
- 1.04:1
Справочник цветов фреймворка
Палитра цветов Tailwind CSS 3.4.17
Ищите по полной стандартной непрозрачной палитре, отбирайте цвета по семейству и ступени, сравнивайте точные значения и контраст текста, а затем открывайте проверенные страницы Hexees без повторения одинаковых образцов.
- 244вхождения непрозрачных токенов
- 243разных цветов sRGB
- 22цветовых семейства
Источник и границы справочника
Версионированные значения по умолчанию, а не руководство по фирменному стилю Tailwind.
Названия токенов и значения взяты из стандартного экспорта colors в Tailwind CSS 3.4.17. Hexees показывает повторяющийся #FAFAFA одним образцом, сохраняя сведения об обоих вхождениях; в приложении эти значения можно настроить или полностью заменить.
Hexees — независимый справочник, не связанный с Tailwind Labs и не одобренный этой компанией.
- Версия
- Tailwind CSS 3.4.17
- Источник
- Официальный исходный файл colors
- Лицензия
- MIT License
Полный поиск
Ищите, отбирайте, сравнивайте и копируйте.
Фильтрация и сортировка выполняются локально. Текст запроса остаётся в браузере и не создаёт отдельный индексируемый URL.
Подходят 243 из 243 цветов; сейчас показано 24
#FEF3C7amber
amber-100
Янтарный Tailwind 100Скопировать токен, HEX или RGB
- Чёрный текст
- 18.86:1
- Белый текст
- 1.11:1
#FDE68Aamber
amber-200
Янтарный Tailwind 200Скопировать токен, HEX или RGB
- Чёрный текст
- 16.86:1
- Белый текст
- 1.25:1
#FCD34Damber
amber-300
Янтарный Tailwind 300Скопировать токен, HEX или RGB
- Чёрный текст
- 14.56:1
- Белый текст
- 1.44:1
#FBBF24amber
amber-400
Янтарный Tailwind 400Скопировать токен, HEX или RGB
- Чёрный текст
- 12.58:1
- Белый текст
- 1.67:1
#F59E0Bamber
amber-500
Янтарный Tailwind 500Скопировать токен, HEX или RGB
- Чёрный текст
- 9.78:1
- Белый текст
- 2.15:1
#D97706amber
amber-600
Янтарный Tailwind 600Скопировать токен, HEX или RGB
- Чёрный текст
- 6.59:1
- Белый текст
- 3.19:1
#B45309amber
amber-700
Янтарный Tailwind 700Скопировать токен, HEX или RGB
- Чёрный текст
- 4.18:1
- Белый текст
- 5.02:1
#92400Eamber
amber-800
Янтарный Tailwind 800Скопировать токен, HEX или RGB
- Чёрный текст
- 2.96:1
- Белый текст
- 7.09:1
#78350Famber
amber-900
Янтарный Tailwind 900Скопировать токен, HEX или RGB
- Чёрный текст
- 2.31:1
- Белый текст
- 9.07:1
#451A03amber
amber-950
Янтарный Tailwind 950Скопировать токен, HEX или RGB
- Чёрный текст
- 1.40:1
- Белый текст
- 14.98:1
#000000black
black
ЧёрныйСкопировать токен, HEX или RGB
- Чёрный текст
- 1.00:1
- Белый текст
- 21.00:1
#EFF6FFblue
blue-50
Синий Tailwind 50Скопировать токен, HEX или RGB
- Чёрный текст
- 19.30:1
- Белый текст
- 1.09:1
#DBEAFEblue
blue-100
Синий Tailwind 100Скопировать токен, HEX или RGB
- Чёрный текст
- 17.21:1
- Белый текст
- 1.22:1
#BFDBFEblue
blue-200
Синий Tailwind 200Скопировать токен, HEX или RGB
- Чёрный текст
- 14.78:1
- Белый текст
- 1.42:1
#93C5FDblue
blue-300
Синий Tailwind 300Скопировать токен, HEX или RGB
- Чёрный текст
- 11.65:1
- Белый текст
- 1.80:1
#60A5FAblue
blue-400
Синий Tailwind 400Скопировать токен, HEX или RGB
- Чёрный текст
- 8.26:1
- Белый текст
- 2.54:1
#3B82F6blue
blue-500
Синий Tailwind 500Скопировать токен, HEX или RGB
- Чёрный текст
- 5.71:1
- Белый текст
- 3.68:1
#2563EBblue
blue-600
Синий Tailwind 600Скопировать токен, HEX или RGB
- Чёрный текст
- 4.06:1
- Белый текст
- 5.17:1
#1D4ED8blue
blue-700
Синий Tailwind 700Скопировать токен, HEX или RGB
- Чёрный текст
- 3.13:1
- Белый текст
- 6.70:1
#1E40AFblue
blue-800
Синий Tailwind 800Скопировать токен, HEX или RGB
- Чёрный текст
- 2.41:1
- Белый текст
- 8.72:1
#1E3A8Ablue
blue-900
Синий Tailwind 900Скопировать токен, HEX или RGB
- Чёрный текст
- 2.03:1
- Белый текст
- 10.36:1
#172554blue
blue-950
Синий Tailwind 950Скопировать токен, HEX или RGB
- Чёрный текст
- 1.43:1
- Белый текст
- 14.69:1
#ECFEFFcyan
cyan-50
Голубой Tailwind 50Скопировать токен, HEX или RGB
- Чёрный текст
- 20.19:1
- Белый текст
- 1.04:1
Непрозрачные цвета Tailwind CSS 3.4.17
- black
#000000 - white
#FFFFFF - slate-50
#F8FAFC - slate-100
#F1F5F9 - slate-200
#E2E8F0 - slate-300
#CBD5E1 - slate-400
#94A3B8 - slate-500
#64748B - slate-600
#475569 - slate-700
#334155 - slate-800
#1E293B - slate-900
#0F172A - slate-950
#020617 - gray-50
#F9FAFB - gray-100
#F3F4F6 - gray-200
#E5E7EB - gray-300
#D1D5DB - gray-400
#9CA3AF - gray-500
#6B7280 - gray-600
#4B5563 - gray-700
#374151 - gray-800
#1F2937 - gray-900
#111827 - gray-950
#030712 - zinc-50 / neutral-50
#FAFAFA - zinc-100
#F4F4F5 - zinc-200
#E4E4E7 - zinc-300
#D4D4D8 - zinc-400
#A1A1AA - zinc-500
#71717A - zinc-600
#52525B - zinc-700
#3F3F46 - zinc-800
#27272A - zinc-900
#18181B - zinc-950
#09090B - neutral-100
#F5F5F5 - neutral-200
#E5E5E5 - neutral-300
#D4D4D4 - neutral-400
#A3A3A3 - neutral-500
#737373 - neutral-600
#525252 - neutral-700
#404040 - neutral-800
#262626 - neutral-900
#171717 - neutral-950
#0A0A0A - stone-50
#FAFAF9 - stone-100
#F5F5F4 - stone-200
#E7E5E4 - stone-300
#D6D3D1 - stone-400
#A8A29E - stone-500
#78716C - stone-600
#57534E - stone-700
#44403C - stone-800
#292524 - stone-900
#1C1917 - stone-950
#0C0A09 - red-50
#FEF2F2 - red-100
#FEE2E2 - red-200
#FECACA - red-300
#FCA5A5 - red-400
#F87171 - red-500
#EF4444 - red-600
#DC2626 - red-700
#B91C1C - red-800
#991B1B - red-900
#7F1D1D - red-950
#450A0A - orange-50
#FFF7ED - orange-100
#FFEDD5 - orange-200
#FED7AA - orange-300
#FDBA74 - orange-400
#FB923C - orange-500
#F97316 - orange-600
#EA580C - orange-700
#C2410C - orange-800
#9A3412 - orange-900
#7C2D12 - orange-950
#431407 - amber-50
#FFFBEB - amber-100
#FEF3C7 - amber-200
#FDE68A - amber-300
#FCD34D - amber-400
#FBBF24 - amber-500
#F59E0B - amber-600
#D97706 - amber-700
#B45309 - amber-800
#92400E - amber-900
#78350F - amber-950
#451A03 - yellow-50
#FEFCE8 - yellow-100
#FEF9C3 - yellow-200
#FEF08A - yellow-300
#FDE047 - yellow-400
#FACC15 - yellow-500
#EAB308 - yellow-600
#CA8A04 - yellow-700
#A16207 - yellow-800
#854D0E - yellow-900
#713F12 - yellow-950
#422006 - lime-50
#F7FEE7 - lime-100
#ECFCCB - lime-200
#D9F99D - lime-300
#BEF264 - lime-400
#A3E635 - lime-500
#84CC16 - lime-600
#65A30D - lime-700
#4D7C0F - lime-800
#3F6212 - lime-900
#365314 - lime-950
#1A2E05 - green-50
#F0FDF4 - green-100
#DCFCE7 - green-200
#BBF7D0 - green-300
#86EFAC - green-400
#4ADE80 - green-500
#22C55E - green-600
#16A34A - green-700
#15803D - green-800
#166534 - green-900
#14532D - green-950
#052E16 - emerald-50
#ECFDF5 - emerald-100
#D1FAE5 - emerald-200
#A7F3D0 - emerald-300
#6EE7B7 - emerald-400
#34D399 - emerald-500
#10B981 - emerald-600
#059669 - emerald-700
#047857 - emerald-800
#065F46 - emerald-900
#064E3B - emerald-950
#022C22 - teal-50
#F0FDFA - teal-100
#CCFBF1 - teal-200
#99F6E4 - teal-300
#5EEAD4 - teal-400
#2DD4BF - teal-500
#14B8A6 - teal-600
#0D9488 - teal-700
#0F766E - teal-800
#115E59 - teal-900
#134E4A - teal-950
#042F2E - cyan-50
#ECFEFF - cyan-100
#CFFAFE - cyan-200
#A5F3FC - cyan-300
#67E8F9 - cyan-400
#22D3EE - cyan-500
#06B6D4 - cyan-600
#0891B2 - cyan-700
#0E7490 - cyan-800
#155E75 - cyan-900
#164E63 - cyan-950
#083344 - sky-50
#F0F9FF - sky-100
#E0F2FE - sky-200
#BAE6FD - sky-300
#7DD3FC - sky-400
#38BDF8 - sky-500
#0EA5E9 - sky-600
#0284C7 - sky-700
#0369A1 - sky-800
#075985 - sky-900
#0C4A6E - sky-950
#082F49 - blue-50
#EFF6FF - blue-100
#DBEAFE - blue-200
#BFDBFE - blue-300
#93C5FD - blue-400
#60A5FA - blue-500
#3B82F6 - blue-600
#2563EB - blue-700
#1D4ED8 - blue-800
#1E40AF - blue-900
#1E3A8A - blue-950
#172554 - indigo-50
#EEF2FF - indigo-100
#E0E7FF - indigo-200
#C7D2FE - indigo-300
#A5B4FC - indigo-400
#818CF8 - indigo-500
#6366F1 - indigo-600
#4F46E5 - indigo-700
#4338CA - indigo-800
#3730A3 - indigo-900
#312E81 - indigo-950
#1E1B4B - violet-50
#F5F3FF - violet-100
#EDE9FE - violet-200
#DDD6FE - violet-300
#C4B5FD - violet-400
#A78BFA - violet-500
#8B5CF6 - violet-600
#7C3AED - violet-700
#6D28D9 - violet-800
#5B21B6 - violet-900
#4C1D95 - violet-950
#2E1065 - purple-50
#FAF5FF - purple-100
#F3E8FF - purple-200
#E9D5FF - purple-300
#D8B4FE - purple-400
#C084FC - purple-500
#A855F7 - purple-600
#9333EA - purple-700
#7E22CE - purple-800
#6B21A8 - purple-900
#581C87 - purple-950
#3B0764 - fuchsia-50
#FDF4FF - fuchsia-100
#FAE8FF - fuchsia-200
#F5D0FE - fuchsia-300
#F0ABFC - fuchsia-400
#E879F9 - fuchsia-500
#D946EF - fuchsia-600
#C026D3 - fuchsia-700
#A21CAF - fuchsia-800
#86198F - fuchsia-900
#701A75 - fuchsia-950
#4A044E - pink-50
#FDF2F8 - pink-100
#FCE7F3 - pink-200
#FBCFE8 - pink-300
#F9A8D4 - pink-400
#F472B6 - pink-500
#EC4899 - pink-600
#DB2777 - pink-700
#BE185D - pink-800
#9D174D - pink-900
#831843 - pink-950
#500724 - rose-50
#FFF1F2 - rose-100
#FFE4E6 - rose-200
#FECDD3 - rose-300
#FDA4AF - rose-400
#FB7185 - rose-500
#F43F5E - rose-600
#E11D48 - rose-700
#BE123C - rose-800
#9F1239 - rose-900
#881337 - rose-950
#4C0519
Устаревшие псевдонимы
Пять прежних названий семейств всё ещё указывают на современные.
Tailwind сохраняет эти псевдонимы для совместимости, но при обращении к ним исходный код выводит предупреждение. В новом коде используйте актуальные названия.
- Вместо lightBlue используйте sky (устарело с {since}).v2.2
- Вместо warmGray используйте stone (устарело с {since}).v3.0
- Вместо trueGray используйте neutral (устарело с {since}).v3.0
- Вместо coolGray используйте gray (устарело с {since}).v3.0
- Вместо blueGray используйте slate (устарело с {since}).v3.0
Значения, зависящие от контекста
Три экспортируемых значения нельзя показать непрозрачными образцами.
Их вид зависит от наследования, свойства color или поверхности под элементом, поэтому они описаны отдельно от фиксированных значений sRGB.
inheritinherit получает вычисленный цвет родительского элемента, поэтому у него нет собственных фиксированных каналов sRGB.
currentColorТокен current преобразуется в currentColor и следует за вычисленным свойством color элемента, а не за постоянным значением HEX.
transparentУ transparent нулевая альфа. Видимый результат зависит от поверхности под ним, поэтому отдельно оценивать его как непрозрачный образец нельзя.
Ограничения проверки доступности
Проверяйте фактическую пару и каждое состояние интерфейса.
На карточках каждый непрозрачный цвет sRGB сравнивается только с чёрным и белым. Для уровня WCAG 2.2 AA требуется не менее 4,5:1 для обычного текста и 3:1 для крупного, но числовой результат относится лишь к проверенной паре.
Прозрачность, градиенты, изображения, размер и насыщенность шрифта, состояния наведения и отключения, индикаторы фокуса и соседние цвета нужно проверять отдельно. Токен палитры и расчёт контраста не подтверждают доступность всего интерфейса.
Не передавайте ошибку, успех, выбор или требуемое действие одним цветом: добавьте текст, форму, значок или другую программно доступную подсказку.