#FFFBEBamber
amber-50
Tailwind Amber 50Copy token, HEX, or RGB
- Black text
- 20.25:1
- White text
- 1.04:1
Framework color reference
Tailwind CSS 3.4.17 color palette
Search the complete default opaque palette by family or shade, compare exact values and text contrast, and open reviewed Hexees color pages without turning duplicate tokens into duplicate swatches.
- 244opaque token occurrences
- 243distinct sRGB colors
- 22color families
Source and scope
Versioned defaults, not a Tailwind-branded color guide.
The token names and values are taken from the default colors export in Tailwind CSS 3.4.17. Hexees groups the repeated #FAFAFA value into one swatch while preserving both token occurrences; applications can customize or replace these defaults.
Hexees is an independent reference and is not affiliated with or endorsed by Tailwind Labs.
- Version
- Tailwind CSS 3.4.17
- Source
- Official colors source
- License
- MIT License
Complete lookup
Search, filter, compare, and copy.
Filtering and sorting happen locally. Search text stays in your browser and does not create another indexable URL.
243 of 243 colors match; 24 are currently shown
#FEF3C7amber
amber-100
Tailwind Amber 100Copy token, HEX, or RGB
- Black text
- 18.86:1
- White text
- 1.11:1
#FDE68Aamber
amber-200
Tailwind Amber 200Copy token, HEX, or RGB
- Black text
- 16.86:1
- White text
- 1.25:1
#FCD34Damber
amber-300
Tailwind Amber 300Copy token, HEX, or RGB
- Black text
- 14.56:1
- White text
- 1.44:1
#FBBF24amber
amber-400
Tailwind Amber 400Copy token, HEX, or RGB
- Black text
- 12.58:1
- White text
- 1.67:1
#F59E0Bamber
amber-500
Tailwind Amber 500Copy token, HEX, or RGB
- Black text
- 9.78:1
- White text
- 2.15:1
#D97706amber
amber-600
Tailwind Amber 600Copy token, HEX, or RGB
- Black text
- 6.59:1
- White text
- 3.19:1
#B45309amber
amber-700
Tailwind Amber 700Copy token, HEX, or RGB
- Black text
- 4.18:1
- White text
- 5.02:1
#92400Eamber
amber-800
Tailwind Amber 800Copy token, HEX, or RGB
- Black text
- 2.96:1
- White text
- 7.09:1
#78350Famber
amber-900
Tailwind Amber 900Copy token, HEX, or RGB
- Black text
- 2.31:1
- White text
- 9.07:1
#451A03amber
amber-950
Tailwind Amber 950Copy token, HEX, or RGB
- Black text
- 1.40:1
- White text
- 14.98:1
#000000#EFF6FFblue
blue-50
Tailwind Blue 50Copy token, HEX, or RGB
- Black text
- 19.30:1
- White text
- 1.09:1
#DBEAFEblue
blue-100
Tailwind Blue 100Copy token, HEX, or RGB
- Black text
- 17.21:1
- White text
- 1.22:1
#BFDBFEblue
blue-200
Tailwind Blue 200Copy token, HEX, or RGB
- Black text
- 14.78:1
- White text
- 1.42:1
#93C5FDblue
blue-300
Tailwind Blue 300Copy token, HEX, or RGB
- Black text
- 11.65:1
- White text
- 1.80:1
#60A5FAblue
blue-400
Tailwind Blue 400Copy token, HEX, or RGB
- Black text
- 8.26:1
- White text
- 2.54:1
#3B82F6blue
blue-500
Tailwind Blue 500Copy token, HEX, or RGB
- Black text
- 5.71:1
- White text
- 3.68:1
#2563EBblue
blue-600
Tailwind Blue 600Copy token, HEX, or RGB
- Black text
- 4.06:1
- White text
- 5.17:1
#1D4ED8blue
blue-700
Tailwind Blue 700Copy token, HEX, or RGB
- Black text
- 3.13:1
- White text
- 6.70:1
#1E40AFblue
blue-800
Tailwind Blue 800Copy token, HEX, or RGB
- Black text
- 2.41:1
- White text
- 8.72:1
#1E3A8Ablue
blue-900
Tailwind Blue 900Copy token, HEX, or RGB
- Black text
- 2.03:1
- White text
- 10.36:1
#172554blue
blue-950
Tailwind Blue 950Copy token, HEX, or RGB
- Black text
- 1.43:1
- White text
- 14.69:1
#ECFEFFcyan
cyan-50
Tailwind Cyan 50Copy token, HEX, or RGB
- Black text
- 20.19:1
- White text
- 1.04:1
Tailwind CSS 3.4.17 opaque colors
- 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
Deprecated aliases
Five old family names still point to current families.
Tailwind keeps these aliases for compatibility, but its source warns when they are accessed. Prefer the replacement names in new code.
- Use sky instead of lightBlue (deprecated since {since}).v2.2
- Use stone instead of warmGray (deprecated since {since}).v3.0
- Use neutral instead of trueGray (deprecated since {since}).v3.0
- Use gray instead of coolGray (deprecated since {since}).v3.0
- Use slate instead of blueGray (deprecated since {since}).v3.0
Context-dependent values
Three exported values are not opaque swatches.
Their computed appearance depends on inheritance, the color property, or the surface underneath, so they are documented separately from fixed sRGB values.
inheritinherit takes the computed color from the parent element and has no fixed sRGB channels of its own.
currentColorThe current token resolves to currentColor, which follows the element's computed color property rather than a fixed HEX value.
transparenttransparent has zero alpha. Its visible result depends on what lies underneath, so it cannot be evaluated as an opaque swatch by itself.
Accessibility limits
Test the actual pair and every interface state.
The card ratios compare each opaque sRGB value only with black and white. WCAG 2.2 AA requires at least 4.5:1 for normal text and 3:1 for large text, but a numerical pass covers only that tested pair.
Opacity, gradients, images, font size and weight, hover and disabled states, focus indicators, and neighboring colors need separate checks. A palette token or contrast result is not a blanket conformance claim.
Do not communicate error, success, selection, or required action through color alone; add text, shape, an icon, or another programmatically available cue.