Color Converter

Why Use a Color Converter?

Designers and developers work with colour in different formats depending on the context. CSS stylesheets use HEX codes and RGB values. Design tools like Figma and Adobe expose HSB and HSL controls. Print workflows rely on CMYK percentages. Converting between these formats by hand is error-prone and tedious, especially when you need precise values for accessibility compliance or brand consistency.

A visual colour converter bridges the gap between all these formats. You type a value in any format, and every other representation updates instantly. The visual picker lets you explore colours intuitively, while the info panel gives you the technical data you need to make informed decisions about contrast, accessibility, and colour relationships.

Understanding Colour Models

HEX is the most common web colour format. It encodes red, green, and blue channels as two hexadecimal digits each, prefixed with a hash symbol. For example, #FF5733 means 255 red, 87 green, and 51 blue. It is compact and universally supported in CSS, but not intuitive for picking colours visually.

RGB (Red, Green, Blue) is the additive colour model used by screens. Each channel ranges from 0 to 255. RGB is straightforward but makes it hard to adjust brightness or saturation independently, which is why designers often prefer HSL or HSB.

HSL (Hue, Saturation, Lightness) separates the colour wheel position from the intensity and brightness. Hue is a degree on the colour wheel (0-360), saturation is a percentage of colour intensity, and lightness is how bright or dark the colour appears. HSL makes it easy to create colour variations by adjusting a single axis.

HSB/HSV (Hue, Saturation, Brightness/Value) is similar to HSL but defines brightness differently. In HSB, brightness of 100% means the pure colour, while in HSL, lightness of 50% is the pure colour. HSB is the model used by most design software colour pickers.

CMYK (Cyan, Magenta, Yellow, Key/Black) is the subtractive colour model used in print. Converting between screen colours and print colours is inherently lossy because the colour spaces do not overlap perfectly. This tool provides a standard conversion that works well for digital proofing, but professional print work may require ICC profile-based conversion.

WCAG Contrast and Accessibility

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and background colours. Normal text needs at least 4.5:1 for AA compliance and 7:1 for AAA. Large text (18px bold or 24px regular) needs 3:1 for AA. This tool shows the contrast ratio of your selected colour against both white and black, and suggests the best text colour for readability.

Colour Harmonies and Palette Building

The palette suggestions section shows five related colours based on established colour theory relationships. The complementary colour sits opposite on the colour wheel and creates maximum contrast. Analogous colours are neighbours on the wheel and create harmonious, low-contrast combinations. Triadic colours are evenly spaced at 120-degree intervals and provide a balanced, vibrant palette.

Privacy and Performance

All conversions happen in your browser. No colour data is sent to any server. The tool loads instantly with no external dependencies and works offline once the page has loaded. Your colour history is stored only in the current browser session and is cleared when you close the tab.