#FFFBEBamber
amber-50
Ámbar Tailwind 50Copiar token, HEX o RGB
- Texto negro
- 20.25:1
- Texto blanco
- 1.04:1
Referencia de colores del framework
Paleta de colores de Tailwind CSS 3.4.17
Consulta toda la paleta opaca predeterminada por familia o tono, compara valores exactos y contraste de texto, y abre fichas revisadas de Hexees sin convertir tokens duplicados en muestras repetidas.
- 244apariciones de tokens opacos
- 243colores sRGB distintos
- 22familias de color
Fuente y alcance
Valores predeterminados versionados, no una guía de marca de Tailwind.
Los nombres y valores proceden de la exportación colors predeterminada de Tailwind CSS 3.4.17. Hexees reúne el #FAFAFA repetido en una sola muestra, pero conserva ambas apariciones; cada aplicación puede personalizar o sustituir estos valores.
Hexees es una referencia independiente y no está afiliada a Tailwind Labs ni cuenta con su respaldo.
- Versión
- Tailwind CSS 3.4.17
- Licencia
- Licencia MIT
Consulta completa
Busca, filtra, compara y copia.
Los filtros y la ordenación funcionan de forma local. El texto buscado permanece en tu navegador y no genera otra URL indexable.
Coinciden 243 de 243 colores; ahora se muestran 24
#FEF3C7amber
amber-100
Ámbar Tailwind 100Copiar token, HEX o RGB
- Texto negro
- 18.86:1
- Texto blanco
- 1.11:1
#FDE68Aamber
amber-200
Ámbar Tailwind 200Copiar token, HEX o RGB
- Texto negro
- 16.86:1
- Texto blanco
- 1.25:1
#FCD34Damber
amber-300
Ámbar Tailwind 300Copiar token, HEX o RGB
- Texto negro
- 14.56:1
- Texto blanco
- 1.44:1
#FBBF24amber
amber-400
Ámbar Tailwind 400Copiar token, HEX o RGB
- Texto negro
- 12.58:1
- Texto blanco
- 1.67:1
#F59E0Bamber
amber-500
Ámbar Tailwind 500Copiar token, HEX o RGB
- Texto negro
- 9.78:1
- Texto blanco
- 2.15:1
#D97706amber
amber-600
Ámbar Tailwind 600Copiar token, HEX o RGB
- Texto negro
- 6.59:1
- Texto blanco
- 3.19:1
#B45309amber
amber-700
Ámbar Tailwind 700Copiar token, HEX o RGB
- Texto negro
- 4.18:1
- Texto blanco
- 5.02:1
#92400Eamber
amber-800
Ámbar Tailwind 800Copiar token, HEX o RGB
- Texto negro
- 2.96:1
- Texto blanco
- 7.09:1
#78350Famber
amber-900
Ámbar Tailwind 900Copiar token, HEX o RGB
- Texto negro
- 2.31:1
- Texto blanco
- 9.07:1
#451A03amber
amber-950
Ámbar Tailwind 950Copiar token, HEX o RGB
- Texto negro
- 1.40:1
- Texto blanco
- 14.98:1
#000000black
black
NegroCopiar token, HEX o RGB
- Texto negro
- 1.00:1
- Texto blanco
- 21.00:1
#EFF6FFblue
blue-50
Azul Tailwind 50Copiar token, HEX o RGB
- Texto negro
- 19.30:1
- Texto blanco
- 1.09:1
#DBEAFEblue
blue-100
Azul Tailwind 100Copiar token, HEX o RGB
- Texto negro
- 17.21:1
- Texto blanco
- 1.22:1
#BFDBFEblue
blue-200
Azul Tailwind 200Copiar token, HEX o RGB
- Texto negro
- 14.78:1
- Texto blanco
- 1.42:1
#93C5FDblue
blue-300
Azul Tailwind 300Copiar token, HEX o RGB
- Texto negro
- 11.65:1
- Texto blanco
- 1.80:1
#60A5FAblue
blue-400
Azul Tailwind 400Copiar token, HEX o RGB
- Texto negro
- 8.26:1
- Texto blanco
- 2.54:1
#3B82F6blue
blue-500
Azul Tailwind 500Copiar token, HEX o RGB
- Texto negro
- 5.71:1
- Texto blanco
- 3.68:1
#2563EBblue
blue-600
Azul Tailwind 600Copiar token, HEX o RGB
- Texto negro
- 4.06:1
- Texto blanco
- 5.17:1
#1D4ED8blue
blue-700
Azul Tailwind 700Copiar token, HEX o RGB
- Texto negro
- 3.13:1
- Texto blanco
- 6.70:1
#1E40AFblue
blue-800
Azul Tailwind 800Copiar token, HEX o RGB
- Texto negro
- 2.41:1
- Texto blanco
- 8.72:1
#1E3A8Ablue
blue-900
Azul Tailwind 900Copiar token, HEX o RGB
- Texto negro
- 2.03:1
- Texto blanco
- 10.36:1
#172554blue
blue-950
Azul Tailwind 950Copiar token, HEX o RGB
- Texto negro
- 1.43:1
- Texto blanco
- 14.69:1
#ECFEFFcyan
cyan-50
Cian Tailwind 50Copiar token, HEX o RGB
- Texto negro
- 20.19:1
- Texto blanco
- 1.04:1
Colores opacos de 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
Alias obsoletos
Cinco nombres antiguos de familia aún remiten a los actuales.
Tailwind mantiene estos alias por compatibilidad, aunque su código fuente muestra una advertencia al utilizarlos. En código nuevo, emplea los nombres de sustitución.
- Usa sky en lugar de lightBlue (obsoleto desde {since}).v2.2
- Usa stone en lugar de warmGray (obsoleto desde {since}).v3.0
- Usa neutral en lugar de trueGray (obsoleto desde {since}).v3.0
- Usa gray en lugar de coolGray (obsoleto desde {since}).v3.0
- Usa slate en lugar de blueGray (obsoleto desde {since}).v3.0
Valores que dependen del contexto
Tres valores exportados no son muestras opacas.
Su aspecto calculado depende de la herencia, de la propiedad color o de la superficie inferior; por eso se explican fuera de los valores sRGB fijos.
inheritinherit toma el color calculado del elemento padre y no tiene canales sRGB fijos propios.
currentColorEl token current se resuelve como currentColor y sigue la propiedad color calculada del elemento, no un valor HEX constante.
transparenttransparent tiene alfa cero. Su resultado visible depende de lo que haya debajo, así que no se puede evaluar por sí solo como una muestra opaca.
Límites de accesibilidad
Prueba la pareja real y todos los estados de la interfaz.
Las tarjetas comparan cada valor sRGB opaco solo con negro y blanco. WCAG 2.2 AA exige al menos 4,5:1 para texto normal y 3:1 para texto grande, pero el resultado numérico solo describe la pareja probada.
La opacidad, los degradados, las imágenes, el tamaño y peso del texto, los estados de interacción, los indicadores de foco y los colores cercanos requieren comprobaciones propias. Un token o un cálculo de contraste no certifican toda la interfaz.
No comuniques errores, éxitos, selecciones ni acciones obligatorias solo mediante el color; añade texto, forma, un icono u otra señal disponible mediante programación.