#FFFBEBamber
amber-50
Ambre Tailwind niveau 50Copier le jeton, HEX ou RGB
- Texte noir
- 20.25:1
- Texte blanc
- 1.04:1
Référence des couleurs du framework
Palette de couleurs Tailwind CSS 3.4.17
Parcourez toute la palette opaque par défaut selon la famille ou le niveau, comparez les valeurs exactes et le contraste du texte, puis ouvrez les fiches Hexees relues sans multiplier les échantillons identiques.
- 244occurrences de jetons opaques
- 243couleurs sRGB distinctes
- 22familles de couleurs
Source et périmètre
Des valeurs par défaut versionnées, pas un guide de marque Tailwind.
Les noms et les valeurs viennent de l’export colors par défaut de Tailwind CSS 3.4.17. Hexees regroupe le #FAFAFA répété dans un seul échantillon tout en conservant ses deux occurrences ; une application peut personnaliser ou remplacer ces valeurs.
Hexees est une référence indépendante, sans affiliation avec Tailwind Labs et sans approbation de sa part.
- Version
- Tailwind CSS 3.4.17
- Licence
- Licence MIT
Recherche complète
Recherchez, filtrez, comparez et copiez.
Le filtrage et le tri se font localement. Le texte recherché reste dans votre navigateur et ne crée pas d’autre URL indexable.
243 couleurs sur 243 correspondent ; 24 sont affichées
#FEF3C7amber
amber-100
Ambre Tailwind niveau 100Copier le jeton, HEX ou RGB
- Texte noir
- 18.86:1
- Texte blanc
- 1.11:1
#FDE68Aamber
amber-200
Ambre Tailwind niveau 200Copier le jeton, HEX ou RGB
- Texte noir
- 16.86:1
- Texte blanc
- 1.25:1
#FCD34Damber
amber-300
Ambre Tailwind niveau 300Copier le jeton, HEX ou RGB
- Texte noir
- 14.56:1
- Texte blanc
- 1.44:1
#FBBF24amber
amber-400
Ambre Tailwind niveau 400Copier le jeton, HEX ou RGB
- Texte noir
- 12.58:1
- Texte blanc
- 1.67:1
#F59E0Bamber
amber-500
Ambre Tailwind niveau 500Copier le jeton, HEX ou RGB
- Texte noir
- 9.78:1
- Texte blanc
- 2.15:1
#D97706amber
amber-600
Ambre Tailwind niveau 600Copier le jeton, HEX ou RGB
- Texte noir
- 6.59:1
- Texte blanc
- 3.19:1
#B45309amber
amber-700
Ambre Tailwind niveau 700Copier le jeton, HEX ou RGB
- Texte noir
- 4.18:1
- Texte blanc
- 5.02:1
#92400Eamber
amber-800
Ambre Tailwind niveau 800Copier le jeton, HEX ou RGB
- Texte noir
- 2.96:1
- Texte blanc
- 7.09:1
#78350Famber
amber-900
Ambre Tailwind niveau 900Copier le jeton, HEX ou RGB
- Texte noir
- 2.31:1
- Texte blanc
- 9.07:1
#451A03amber
amber-950
Ambre Tailwind niveau 950Copier le jeton, HEX ou RGB
- Texte noir
- 1.40:1
- Texte blanc
- 14.98:1
#000000black
black
NoirCopier le jeton, HEX ou RGB
- Texte noir
- 1.00:1
- Texte blanc
- 21.00:1
#EFF6FFblue
blue-50
Bleu Tailwind niveau 50Copier le jeton, HEX ou RGB
- Texte noir
- 19.30:1
- Texte blanc
- 1.09:1
#DBEAFEblue
blue-100
Bleu Tailwind niveau 100Copier le jeton, HEX ou RGB
- Texte noir
- 17.21:1
- Texte blanc
- 1.22:1
#BFDBFEblue
blue-200
Bleu Tailwind niveau 200Copier le jeton, HEX ou RGB
- Texte noir
- 14.78:1
- Texte blanc
- 1.42:1
#93C5FDblue
blue-300
Bleu Tailwind niveau 300Copier le jeton, HEX ou RGB
- Texte noir
- 11.65:1
- Texte blanc
- 1.80:1
#60A5FAblue
blue-400
Bleu Tailwind niveau 400Copier le jeton, HEX ou RGB
- Texte noir
- 8.26:1
- Texte blanc
- 2.54:1
#3B82F6blue
blue-500
Bleu Tailwind niveau 500Copier le jeton, HEX ou RGB
- Texte noir
- 5.71:1
- Texte blanc
- 3.68:1
#2563EBblue
blue-600
Bleu Tailwind niveau 600Copier le jeton, HEX ou RGB
- Texte noir
- 4.06:1
- Texte blanc
- 5.17:1
#1D4ED8blue
blue-700
Bleu Tailwind niveau 700Copier le jeton, HEX ou RGB
- Texte noir
- 3.13:1
- Texte blanc
- 6.70:1
#1E40AFblue
blue-800
Bleu Tailwind niveau 800Copier le jeton, HEX ou RGB
- Texte noir
- 2.41:1
- Texte blanc
- 8.72:1
#1E3A8Ablue
blue-900
Bleu Tailwind niveau 900Copier le jeton, HEX ou RGB
- Texte noir
- 2.03:1
- Texte blanc
- 10.36:1
#172554blue
blue-950
Bleu Tailwind niveau 950Copier le jeton, HEX ou RGB
- Texte noir
- 1.43:1
- Texte blanc
- 14.69:1
#ECFEFFcyan
cyan-50
Cyan Tailwind niveau 50Copier le jeton, HEX ou RGB
- Texte noir
- 20.19:1
- Texte blanc
- 1.04:1
Couleurs opaques 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 obsolètes
Cinq anciens noms de familles renvoient encore aux noms actuels.
Tailwind conserve ces alias pour compatibilité, mais son code source affiche un avertissement lorsqu’ils sont utilisés. Préférez les noms de remplacement dans tout nouveau code.
- Utilisez sky au lieu de lightBlue (obsolète depuis {since}).v2.2
- Utilisez stone au lieu de warmGray (obsolète depuis {since}).v3.0
- Utilisez neutral au lieu de trueGray (obsolète depuis {since}).v3.0
- Utilisez gray au lieu de coolGray (obsolète depuis {since}).v3.0
- Utilisez slate au lieu de blueGray (obsolète depuis {since}).v3.0
Valeurs dépendantes du contexte
Trois valeurs exportées ne sont pas des échantillons opaques.
Leur rendu dépend de l’héritage, de la propriété color ou de la surface sous-jacente ; elles sont donc décrites à part des valeurs sRGB fixes.
inheritinherit prend la couleur calculée de l’élément parent et ne possède pas de canaux sRGB fixes.
currentColorLe jeton current devient currentColor et suit la propriété color calculée de l’élément plutôt qu’une valeur HEX constante.
transparenttransparent possède une alpha nulle. Son résultat visible dépend de ce qui se trouve dessous ; il ne peut donc pas être évalué seul comme un échantillon opaque.
Limites d’accessibilité
Testez la paire réelle et chaque état de l’interface.
Les cartes comparent chaque valeur sRGB opaque uniquement au noir et au blanc. WCAG 2.2 AA exige au moins 4,5:1 pour le texte courant et 3:1 pour le grand texte, mais le résultat numérique ne décrit que la paire testée.
L’opacité, les dégradés, les images, la taille et la graisse du texte, les états interactifs, les indicateurs de focus et les couleurs voisines demandent leurs propres contrôles. Un jeton ou un rapport de contraste ne certifie pas toute l’interface.
Ne signalez pas une erreur, une réussite, une sélection ou une action requise par la seule couleur ; ajoutez du texte, une forme, une icône ou un autre indice disponible par programmation.