Color Converter

The hexadecimal format represents a color as six digits in base 16 (0–9, A–F), grouped in three pairs: red, green, and blue. For example, #FF0000 is pure red. It is the most common format in HTML and CSS.

RGB (Red, Green, Blue) describes a color using three numeric values between 0 and 255, one per channel. rgb(255, 0, 0) is pure red. CSS also supports rgba(), which adds an opacity (alpha) channel.

HSL represents color in terms of Hue (0–360°), Saturation (0–100%) and Lightness (0–100%). It is the most intuitive format for manually adjusting colors because its dimensions match how we perceive color.

Use HEX for fixed brand colors (CSS variables or design tokens). Use RGB/RGBA when you need dynamic opacity. Use HSL when building palettes or varying hue/saturation/lightness programmatically — for example in themes or color variant generation.

OKLCH is a perceptually uniform color space introduced in CSS Color Level 4. Unlike HSL, colors sharing the same L (lightness) value appear equally bright to the human eye, making it far more predictable for building accessible, harmonious palettes. Its three values are: L (lightness, 0–1), C (chroma, roughly 0–0.4) and H (hue, 0–360°). Chrome, Firefox and Safari already support it via the oklch() function.

The alpha channel defines a color's opacity from 0 (fully transparent) to 1 (fully opaque). In CSS use rgba(255, 0, 0, 0.5) or the 8-digit hex notation #FF000080. You can also separate opacity from color using the opacity property. The key difference: rgba() makes only that color transparent without affecting child elements; opacity applies transparency to the entire element and all its contents.

Color contrast is the relative luminance difference between two colors — typically text and background. WCAG 2.1 requires a minimum ratio of 4.5:1 for normal text (AA level) and 3:1 for large text (18pt or 14pt bold). Insufficient contrast makes reading difficult for people with low vision or color blindness. You can measure the ratio directly in Chrome's accessibility panel or with the WebAIM Contrast Checker.

Web and UI/UX designers use it daily to convert colours between HEX, RGB, HSL, and HSB when working with CSS, Figma, Sketch, or Adobe XD — each tool has its preferred format. Front-end developers need it to apply colours precisely in CSS and Tailwind, and to understand which numeric values correspond to a visual colour. Graphic and branding designers consult it to transfer brand palettes between software (Illustrator, Canva, Photoshop) and ensure the colour is identical across all formats. Print designers use it to convert between RGB (screen) and the closest equivalent values before exporting to CMYK. Accessibility specialists use it to obtain precise luminance values and verify contrast ratios according to WCAG 2.1 guidelines.

On desktop, press Ctrl + D (Windows/Linux) or Cmd + D (Mac) in Chrome, Firefox, or Edge to add this page to your bookmarks instantly. In Safari for Mac, use Cmd + D or go to Bookmarks → Add Bookmark. On mobile with Chrome (Android), tap the three-dot menu (⋮) and choose "Add to Home screen" or "Add to bookmarks." On mobile with Safari (iPhone/iPad), tap the share button (□↑) and then "Add to Home Screen." Saving it means the next time you spot a HEX value in a design and need the RGB for CSS, it is already one click away.