Skip to main content
Color Converter
100% Client-Side & Private

Color & Colour Converter – HEX, RGB, RGBA, HSL & HSLA

Convert any color instantly between HEX, RGB, RGBA, HSL, and HSLA formats. Adjust opacity, copy CSS & Tailwind snippets, verify WCAG contrast, and generate tints and shades.

1.00
0% 100%
Live Preview
Dark Text Recommended Alpha: 1.00

#A398EB

rgb(163, 152, 235)

Converted Formats

Click any format to copy
HEX (6-digit) #A398EB
HEX (8-digit / Alpha) #A398EBFF
RGB rgb(163, 152, 235)
RGBA rgba(163, 152, 235, 1)
HSL hsl(248, 69%, 76%)
HSLA hsla(248, 69%, 76%, 1)

CSS Snippets

Standard CSS
color: #A398EB;
background-color: #A398EB;
border-color: #A398EB;
--color-primary: #A398EB;

Tailwind Arbitrary Utilities

Tailwind CSS
bg-[#A398EB]
text-[#A398EB]
border-[#A398EB]
ring-[#A398EB]

WCAG Accessibility Contrast Checker

Evaluate the readability of the active color against a comparison surface.

Against:
Calculated Contrast Ratio:
4.52 : 1
AA Normal ✓ Pass (4.5:1)
AA Large ✓ Pass (3.0:1)
AAA Normal ✗ Fail (7.0:1)
AAA Large ✓ Pass (4.5:1)

Headline Text Sample

The quick brown fox jumps over the lazy dog. WCAG 2.1 requires minimum contrast for legibility.

Derived Tints & Shades

Click swatch to set as active color
Tints (Lighter)
Shades (Darker)

Favorite Colors

0 saved
No favorite colors saved yet. Click "Favorite" above to save.

Recent Colors

Recently selected colors will appear here.

Understanding Color Formats: HEX, RGB, RGBA, HSL & HSLA

Modern digital design and web development rely on multiple mathematical representations of light and color. While each format produces identical visual outputs on digital screens (sRGB gamut), each format offers distinct advantages depending on whether you are writing CSS stylesheets, working with graphics software, or scripting dynamic UI animations.

HEX

Hexadecimal Notation

Hexadecimal (HEX) represents red, green, and blue light channels using base-16 numbers (0-9 and A-F). Standard 6-digit hex format (e.g., #A398EB) allocates two digits per channel (00 = 0 to FF = 255). An 8-digit variant (#A398EBCC) appends an additional byte for alpha opacity. HEX is compact, widely supported across graphics tools (Figma, Photoshop), and ideal for CSS variables.

RGB / RGBA

Red, Green, Blue & Alpha

RGB uses decimal integers from 0 to 255 for each primary additive light channel: rgb(163, 152, 235). RGBA adds an alpha channel from 0.0 (transparent) to 1.0 (fully opaque), like rgba(163, 152, 235, 0.8). RGB is the native color model for digital displays and canvas rendering contexts.

HSL / HSLA

Hue, Saturation, Lightness & Alpha

HSL maps colors to a cylindrical coordinate model designed to mirror human perception. Hue is an angle (0° to 360°) on the color wheel (0° Red, 120° Green, 240° Blue). Saturation is a percentage (0% neutral gray to 100% vivid pure hue). Lightness represents illumination (0% pitch black, 50% normal color, 100% pure white). HSLA integrates alpha opacity. HSL makes generating consistent design scales and dark-mode themes straightforward.

How Color Conversion Works (The Math Behind It)

Converting between color spaces involves deterministic linear transformations. Here is how our client-side TypeScript engine converts your inputs in real time:

1. Normalizing HEX to RGB

Each pair of hexadecimal digits is parsed as base 16: R = parseInt(hex.slice(0, 2), 16). For shorthand 3-digit hex strings (such as #F53), each digit is doubled (F → FF = 255, 5 → 55 = 85, 3 → 33 = 51).

2. Converting RGB to HSL

RGB values are normalized between 0.0 and 1.0. We calculate max = max(R, G, B), min = min(R, G, B), and Δ = max - min. Lightness is L = (max + min) / 2. If Δ = 0, saturation is 0%. Otherwise, saturation is Δ / (1 - |2L - 1|). Hue is determined by which channel is dominant, multiplied by 60 degrees.

3. Generating Tints and Shades

Tints are created by linearly interpolating each RGB channel toward pure white (255, 255, 255) by step percentages. Shades are created by interpolating toward pure black (0, 0, 0).

Common Use Cases in Modern Web & Product Design

Web & Frontend Development

Convert design mockups (HEX) to RGBA or modern CSS rgb(r g b / a) notation for semi-transparent overlays, borders, and backdrop filters.

Design System Tokenization

Translate brand master colors into HSL scales to easily construct consistent 50–900 lightness ramps for UI components and dark mode surfaces.

SVG & Canvas Animation

Seamlessly convert color strings for HTML5 Canvas 2D contexts, WebGL fragment shaders, and SVG fill/stroke attributes.

Frequently Asked Questions

How do I convert a HEX color code to RGB or HSL?

Simply paste or type your HEX code (e.g., #A398EB or #F53) into the color input box. The tool automatically detects the 6-digit or 3-digit hexadecimal format, converts it to 0–255 RGB decimal channels, computes HSL angles and percentages, and displays all formats with instant copy buttons.

What is the difference between RGB and RGBA?

RGB specifies a color using three 8-bit channels: Red, Green, and Blue (each ranging from 0 to 255). RGBA includes a fourth channel, Alpha, which represents opacity from 0.0 (fully transparent) to 1.0 (fully opaque).

What does HSL stand for and why do developers use it?

HSL stands for Hue (the color family on a 0–360° color wheel), Saturation (the intensity from 0% gray to 100% pure color), and Lightness (the illumination from 0% black to 100% white). Developers prefer HSL when building UI design tokens, hover states, and dynamic palettes because adjusting lightness or saturation is more intuitive than recalculating combined RGB channels.

How does the WCAG accessibility contrast checker work?

The contrast checker calculates relative luminance using the official WCAG 2.1 formula ((L1 + 0.05) / (L2 + 0.05)). It tests compliance across four criteria: AA Normal Text (4.5:1), AA Large Text (3.0:1), AAA Normal Text (7.0:1), and AAA Large Text (4.5:1), and renders real-time headline and body typography samples.

How do I use the generated Tailwind CSS classes?

The tool generates Tailwind-compatible arbitrary value classes (e.g., bg-[#A398EB], text-[#A398EB], border-[#A398EB]) that you can paste directly into your components without needing to define custom color palettes in your Tailwind configuration.

Does this Color Converter send my colors to a server?

No. All color conversions, calculations, tints, shades, contrast audits, favorites, and recent history happen 100% locally inside your web browser using client-side JavaScript. No color data or requests are ever sent to an external server or database.

How do saved Favorites work?

Clicking the Favorite button stores the active color in your browser's local storage (cc_favorite_colors_v1). You can quickly restore or remove any saved favorite at any time without creating an account.

Can I use this color conversion tool on mobile devices?

Yes. The interface is responsive and touch-optimized for smartphones, tablets, and desktops, including support for native mobile color inputs, sliders, and touch-to-copy interactions.

Copied to clipboard!