Tailwind CSS Color Code Converter
Find the closest Tailwind CSS color match for any HEX, RGB, or HSL code. Instantly convert between formats, generate palettes, and inspect WCAG accessibility.
#800000rgba(128, 0, 0, 1)
Pick Color
Opacity (Alpha Channel)100% (1.00)
RGB Channels (0-255)
HSL Controls
Converted Color Formats
HEX Code#800000
HEXA (Alpha)#800000
RGB Formatrgb(128, 0, 0)
RGBA Formatrgba(128, 0, 0, 1)
HSL Formathsl(0, 100%, 25%)
HSLA Formathsla(0, 100%, 25%, 1)
CMYK Printcmyk(0%, 100%, 100%, 50%)
CSS Variable--color-primary: #800000;
Tailwind CSS Color Matcher & Utilities
Closest matching Tailwind CSS v3/v4 palette shade and copyable utility class names.
Red 90090.0% Match
Background Classbg-red-900
Text Classtext-red-900
Border Classborder-red-900
Arbitrary Syntaxbg-[#800000]
WCAG Accessibility Contrast Analyzer
Evaluates readability scores according to WCAG 2.1 Web Accessibility standards.
Against White (#FFFFFF)10.95:1
AA: PassAAA: Pass
White Sample Text on Color
Against Black (#000000)1.92:1
AA: FailAAA: Fail
Black Sample Text on Color
Color Harmonies & Palettes
Click any generated swatch to select it in the converter.
Complementary
Triadic
Analogous
Monochromatic Tints & Shades
Popular Web & Brand Colors
Frequently Asked Questions
Frequently asked questions
- How do I convert a HEX color to a Tailwind CSS color code?
- Simply enter your HEX or RGB code into the converter. Our tool automatically finds the closest matching Tailwind CSS color (e.g., slate-500, rose-600) so you can directly copy and paste it into your project.
- How do I convert HEX color to RGBA with opacity?
- Enter any 6-character HEX code (e.g. #FF5733) or 8-character HEXA code (e.g. #FF573380) into the input box or adjust the Opacity slider. The converter calculates the exact RGBA and HSLA equivalents for transparent backgrounds.
- Can I find the Tailwind color class for an RGB or HSL value?
- Yes! Whether you input RGB, RGBA, HSL, or HEX, our intelligent matching system will instantly identify the exact or closest Tailwind CSS color variable from the default Tailwind palette.
- What is the WCAG Accessibility Contrast Ratio?
- WCAG (Web Content Accessibility Guidelines) requires text to have sufficient contrast against its background. We evaluate your color for Level AA (4.5:1) and AAA (7.0:1) compliance for accessible web design.
- Can I copy formatted CSS code for my web projects?
- Absolutely. The converter provides one-click copy buttons for Tailwind CSS classes, HEX, HEXA, RGB, RGBA, HSL, HSLA, CMYK, and ready-to-use CSS Custom Variables for modern stylesheets.