Color Converter
Convert colors between HEX, RGB, and HSL formats. Generate harmonious palettes and check accessibility compliance.
Color Input
Supports HEX, RGB, and HSL formats
Color Formats
About Color Conversion
A color converter translates color values between the formats used in web development: HEX (#ff6b35), RGB (rgb(255,107,53)), HSL (hsl(20,100%,60%)), and HSB/HSV. All four formats represent the identical color—they simply express it using different mathematical models. HEX is compact and memory-efficient (used everywhere from design tools to CSS). RGB is intuitive for direct pixel control and camera-based workflows. HSL separates color tone (hue), intensity (saturation), and brightness (lightness), making it ideal for creating color harmonies and adjusting brightness programmatically. Understanding how to convert between these formats is essential for web designers, developers, and anyone working with digital color across multiple platforms and tools.
Beyond format conversion, color tools address critical accessibility needs. WCAG 2.1 contrast ratio standards ensure text and UI elements are readable for users with low vision or color blindness. A contrast ratio of 4.5:1 is the minimum for normal text; 7:1 is recommended for AAA compliance. By converting colors and checking contrast ratios, developers ensure their designs are inclusive and meet legal accessibility requirements (ADA, Section 508). Color palette generation via harmony theory (complementary, analogous, triadic) helps designers quickly create cohesive color schemes that feel balanced and professional.
Common Use Cases
- Converting Figma colors to CSS: Designers export hex colors from Figma; developers convert them to RGB or HSL for CSS custom properties and component libraries.
- WCAG accessibility contrast checks: Verify text and background combinations meet AA/AAA contrast ratios before deployment to ensure compliance and readability.
- Building brand color palettes: Start with a primary brand color and generate complementary or analogous palettes for consistent, harmonious visual design.
- Matching colors across design tools: Translate colors between Figma (hex), CSS (rgb/hsl), design systems, and other tools using a single unified converter.
How to Use This Tool
- Converter tab: Input a color via color picker, hex code, RGB, or HSL values. Adjust opacity with the alpha slider. View instant conversion results in all four formats with copy buttons.
- Palettes tab: Generate complementary (180° hue shift), analogous (±30°), triadic (120° apart), or split-complementary (150°/210°) palettes. Click any color to load it into the converter.
- Accessibility tab: Input foreground and background colors to check WCAG 2.1 contrast ratio. View pass/fail for AA/AAA compliance levels and see a live preview.
Features
Multi-Format Conversion
Convert between HEX, RGB, RGBA, and HSL formats with live preview swatch. Supports alpha/opacity for transparency.
Color Harmony Generation
Generate complementary, analogous, triadic, and split-complementary palettes using color theory for professionally balanced designs.
WCAG Contrast Checker
Validate foreground/background combinations against WCAG 2.1 AA (4.5:1) and AAA (7:1) standards with compliance badges.
Recent Colors History
Automatic tracking of recently used colors (up to 10) for quick access to colors you've worked with, stored locally.
Frequently Asked Questions
What is the difference between HEX and RGB?
HEX is a hexadecimal notation (#RRGGBB) where each pair represents red, green, blue intensity (0-255 in decimal, 00-FF in hex). RGB is the decimal notation rgb(r,g,b) using 0-255 for each channel. They represent the same color; HEX is compact for code, RGB is human-readable for direct color specification.
What is HSL and when should I use it?
HSL (Hue, Saturation, Lightness) separates color into three components: hue (0-360°, the color tone), saturation (0-100%, color intensity), and lightness (0-100%, brightness). HSL is ideal for programmatic color manipulation—to darken a color, decrease lightness; to create harmonies, rotate the hue. CSS prefers HSL for these reasons.
How do I check WCAG contrast ratio?
Use the Accessibility tab, select your foreground (text) and background colors, and the tool calculates the contrast ratio automatically. A ratio of 4.5:1 passes AA (minimum), 7:1 passes AAA (enhanced). The visual preview shows how readable the text appears at that contrast level.
What is the alpha channel?
Alpha is the opacity/transparency component (0.0 = fully transparent, 1.0 = fully opaque). RGBA includes an alpha value: rgba(255,107,53,0.8). The alpha slider in the converter lets you adjust transparency and see the effect in the preview swatch.