DevToolbox

Color Converter

Convert colors between HEX, RGB, HSL, and HSB formats. Check contrast ratios, get Tailwind suggestions, and generate palettes.

About This Tool

The Color Converter translates colors between HEX, RGB, HSL, and HSB (also known as HSV) formats. It is essential for web developers and designers who need to switch between CSS color notations, design tool values, and Tailwind CSS utility classes.

Enter a color in any supported format or use the native color picker. All other representations update in real time. The tool also suggests the closest Tailwind CSS color class when a match is found, saving you from hunting through the color palette documentation.

The Contrast Ratio section calculates the WCAG 2.1 contrast ratio between your chosen color and a configurable background color. It shows a live preview and reports the accessibility level — AAA (7:1), AA (4.5:1), AA Large (3:1), or Fail. This helps ensure your color choices meet accessibility standards.

The Palette Generator creates color harmonies based on color theory: complementary (opposite on the color wheel), analogous (adjacent), triadic (three evenly spaced), and split-complementary. Click any swatch to copy its hex value.

All processing happens client-side. Your colors are never sent to any server.

How to Use

  1. Select an input mode: HEX, RGB, HSL, HSB, or Picker.
  2. Enter a color value. All other formats update automatically.
  3. View the color preview swatch and copy any format using the copy icon.
  4. In the Contrast Ratio section, set a background color to check WCAG accessibility compliance.
  5. Use the Palette Generator to explore color harmonies. Click a swatch to copy its hex value.
  6. Press Ctrl+Shift+C to copy the HEX value.

FAQ

What is the difference between HSL and HSB?

Both use Hue and Saturation, but differ in the third component. HSL uses Lightness (0% = black, 100% = white, 50% = full color). HSB uses Brightness (0% = black, 100% = full color). Design tools like Figma and Photoshop typically use HSB, while CSS uses HSL.

What WCAG contrast ratio do I need?

WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text (Level AA) and 7:1 for enhanced contrast (Level AAA). Large text (18pt+ or 14pt bold) requires only 3:1 for Level AA.

How does the Tailwind CSS suggestion work?

The tool compares your color against a built-in palette of common Tailwind CSS colors. If an exact match is found, it shows the class name. If a close match (within a small color distance) is found, it shows it prefixed with ~ to indicate an approximation.

What are complementary and analogous colors?

Complementary colors are opposite each other on the color wheel (180° apart) and create high contrast. Analogous colors are adjacent (30° apart) and create harmonious, low-contrast combinations.

Is my data safe?

Yes. All color calculations run locally in your browser. No data is sent to any server.

Related Tools

JSON Formatter

Format, validate, and beautify JSON with syntax highlighting and tree view.

Regex Tester

Test regular expressions with real-time match highlighting and capture groups.

URL Encode/Decode

Encode and decode URLs, parse query parameters, and build query strings.

Base64 Encode/Decode

Encode and decode Base64 strings and files with drag-and-drop support.