Color Tools & References

Free color conversion, accessibility, and reference tools for web developers and designers.

All Tools

Hex to RGB Converter

Convert hex color codes to RGB, HSL, and CMYK values instantly. Supports both 3-digit and 6-digit hex codes with live color preview. Includes the conversion formula, common color values table, and CSS usage examples.

RGB to HSL Converter

Convert RGB color values to HSL (hue, saturation, lightness) format. Understand the HSL color model, see the conversion algorithm, and learn why HSL is preferred for palette generation. Includes ready-to-use CSS hsl() output.

Color Contrast Checker

Check WCAG 2.1 color contrast ratios for accessibility compliance. Test text and background color combinations against AA (4.5:1) and AAA (7:1) standards. Includes the luminance calculation formula and practical tips for fixing low contrast.

Tailwind CSS Color Reference

Complete reference for the default Tailwind CSS color palette. All 22 color families with hex values across 11 shade levels (50-950). Learn how to customize colors in tailwind.config.js and implement effective dark mode color strategies.

CSS Gradient Generator

Generate CSS linear and radial gradients with custom angles and multiple color stops. Covers gradient syntax, direction options, multi-stop techniques, layered gradients, and browser compatibility.

Main Tool

Looking for the palette generator? Head to the Color Palette Generator to create harmonious 5-color palettes with export to CSS, Tailwind, SCSS, and JSON.

Built by Michael Lip. 100% client-side.