Color Converter

DESIGN DEVELOPER HEX HSL RGB

About this tool

Convert colours between HEX, RGB, HSL and CMYK — with live preview.

Convert colours between HEX, RGB, HSL and CMYK instantly. Live preview, one-click copy, CSS variable output, nearest CSS name, and recent colour history. Free.

RT-DEV-005 · Developer Tools

R — Red

G — Green

B — Blue

H — Hue (0–360°)

S — Saturation (0–100%)

L — Lightness (0–100%)

All Formats

HEX #E8622A

RGB rgb(232, 98, 42)

HSL hsl(22, 81%, 54%)

CMYK cmyk(0%, 58%, 82%, 9%)

CSS var --color-primary: #E8622A;

Nearest CSS name: Coral

Recent Colours

How to Use the Colour Converter

Enter a HEX code or use the colour picker

Type any 6-digit hex code (e.g. #1877F2) into the HEX field, or click the pin icon beside the input to open your browser's native colour picker and choose visually.

Or adjust RGB or HSL sliders

Switch to the RGB or HSL tab and drag the sliders to mix your colour interactively. The colourful slider tracks make it easy to see how each channel affects the result in real time.

All formats update instantly

HEX, RGB, HSL, CMYK and CSS variable outputs all update in real time as you type or drag. The large colour preview square at the top also changes live so you always see the exact colour.

Copy any format

Click the Copy button next to any format to copy it to your clipboard, ready to paste into your CSS, design tool, or codebase. The button flashes green to confirm the copy.

Colour Formats in Web Design — When to Use HEX, RGB, HSL or CMYK

HEX vs RGB vs HSL: When to Use Each

Every web designer encounters colour codes daily, but the three main formats — HEX, RGB, and HSL — each have a distinct sweet spot that makes them the right choice in different situations.

HEX (hexadecimal) is the most common colour format on the web and has been since the earliest days of HTML. A HEX code like #E8472F encodes red, green, and blue values as pairs of hexadecimal digits — compact, readable, and universally supported. Its main limitation is that it only represents fully opaque colours; for transparency, you need either an 8-digit HEX with alpha (#E8472FFF) or switch to RGBA. HEX is the best choice for static design tokens, brand colour specifications, and any context where you need a single, shareable colour reference.

RGB (Red, Green, Blue) is the most flexible format for programmatic colour manipulation. Because each channel is a plain integer from 0 to 255, it is trivial to blend two colours, compute midpoints, or fade a colour by adjusting a single channel. CSS also supports rgba() with a fourth alpha parameter for transparency, making RGB the go-to format when you need overlay effects, hover states with opacity, or dynamically computed colours in JavaScript.

HSL (Hue, Saturation, Lightness) is the most human-intuitive format. The hue angle (0–360°) maps to the colour wheel — 0° is red, 120° is green, 240° is blue. Saturation (0–100%) controls vibrancy from grey to pure colour. Lightness (0–100%) runs from black through the colour to white. This maps directly to how designers think: "make this 10% lighter" is simply incrementing l by 10 — something that requires arithmetic in both HEX and RGB. HSL is the best format for design systems, theming, and any situation where you generate colour palettes programmatically.

CMYK (Cyan, Magenta, Yellow, Key/Black) is used exclusively for print. Printers combine physical inks subtractively — mixing more ink makes darker colours — the opposite of how screens combine light. The full RGB colour gamut (the range of colours a screen can display) is significantly wider than what offset printing can reproduce with CMYK inks, which is why digital photos can look noticeably duller when printed. If you are designing for both screen and print, always design in RGB first and convert to CMYK only for the print deliverable.

Colour Theory Basics for Web Designers

Understanding a few colour theory fundamentals helps you make better decisions even when working with tools rather than a physical colour wheel. Colours directly opposite each other on the wheel are complementary — they create maximum contrast and vibrant visual tension (think orange and blue, or red and green). Colours adjacent on the wheel are analogous — they feel harmonious and natural (orange, amber, yellow). A triadic scheme picks three colours evenly spaced 120° apart on the wheel for a balanced, energetic palette.

Colour choices in major digital products are rarely arbitrary. Facebook blue (#1877F2) was reportedly selected partly because Mark Zuckerberg has red-green colour blindness and blue is the colour he perceives most vividly. WhatsApp green (#25D366) positions the brand as fresh, approachable, and associated with communication — the same psychological territory as "go" and "proceed" signals in everyday life. Singapore's Government Digital Services team publishes an open-source Design System (SGDS) with a carefully curated colour palette designed for both accessibility compliance and consistent government branding across all public digital services.

Contrast ratio is the most practically important colour-theory concept for digital designers. It measures the difference in luminance between foreground and background colours on a scale from 1:1 (identical) to 21:1 (black on white). Tools like this converter help you identify your colours precisely so you can then verify contrast ratios in dedicated accessibility checkers.

"Approximately 8% of men worldwide have some form of colour blindness — designing with sufficient contrast benefits everyone, including users in bright ASEAN sunlight."

Accessibility and Colour Contrast in ASEAN Digital Products

The Web Content Accessibility Guidelines (WCAG) 2.1 Level AA — the international standard adopted by governments across ASEAN — require a minimum contrast ratio of 4.5:1 between normal text and its background, and 3:1 for large text (18pt or 14pt bold). These requirements exist because low contrast makes text difficult or impossible to read for users with low vision, cataracts, or colour blindness, and also degrades legibility for all users in bright environments — a particularly relevant consideration in sun-drenched Southeast Asia where mobile usage outdoors is extremely common.

Singapore's Infocomm Media Development Authority (IMDA) has adopted WCAG 2.1 AA as the baseline accessibility standard for Singapore government digital services, and the SGDS Design System includes accessible colour pairings out of the box. Malaysia's MyGOV portal similarly follows accessibility guidelines for its public-facing services. The Philippines, Thailand, and Indonesia are actively developing national digital accessibility frameworks aligned with international standards.

Red-green colour blindness (deuteranopia and protanopia) affects approximately 8% of men and 0.5% of women — a significant portion of any user base. Designers who rely solely on colour to convey status (red = error, green = success) exclude these users entirely. Best practice is to always pair colour with a secondary cue: an icon, a text label, a pattern, or a shape change. This not only helps colour-blind users but also improves comprehension for everyone in contexts where colour rendering varies — such as older screens, e-ink displays, or high-glare outdoor conditions common across Southeast Asia's tropical climate and mobile-first digital landscape.

When building design systems for the ASEAN market, choose base colours with sufficient saturation and contrast headroom to remain accessible across the wide variety of screen qualities found in the region — from budget Android phones to high-end iPhones. Test your palette at both 100% and 50% brightness, and run it through a colour blindness simulator as part of your standard QA process.

10 Facts About Colour in Web Design

The HEX colour system uses base-16 (hexadecimal) — #RRGGBB means two hex digits each for Red, Green, and Blue, giving 16,777,216 possible colours.

The RGB colour model is additive — mixing red, green, and blue light at full intensity creates white. This is the opposite of paint mixing (subtractive/CMYK).

HSL was introduced as a more human-intuitive alternative to RGB — hue is the angle on the colour wheel: 0°=red, 120°=green, 240°=blue.

CMYK is used exclusively for print — printers cannot reproduce the full RGB colour gamut, which is why photos often look different printed vs on screen.

Facebook's signature blue (#1877F2) was reportedly chosen because Mark Zuckerberg is red-green colour blind — blue is the colour he can see most vividly.

The Web Content Accessibility Guidelines (WCAG) require a minimum 4.5:1 contrast ratio between text and background for Level AA compliance.

Singapore's Government Digital Services team publishes an open-source Design System (SGDS) with a specific colour palette designed for both accessibility and government branding.

The full visible light spectrum covers wavelengths from approximately 380 nm (violet) to 700 nm (red) — computers simulate this using only three numbers per pixel.

CSS named colours date back to 1996 — the 140 official CSS named colours range from "aliceblue" to "yellowgreen", with some unusual names like "rebeccapurple".

The colour "rebeccapurple" (#663399) was added to CSS in honour of Rebecca Meyer, daughter of CSS Working Group member Eric Meyer, who passed away in 2014.

Frequently Asked Questions

HEX and RGB represent the same colour model (red, green, blue channels) but in different notations. HEX uses base-16 pairs — #FF6347 — while RGB uses decimal integers — rgb(255, 99, 71). They are mathematically identical and fully interconvertible. HEX is more compact and widely used in CSS design files; RGB is preferred when you need to manipulate channels programmatically or add an alpha (transparency) value using rgba().
Use HSL when building design systems or programmatically generating colour palettes. Because hue, saturation, and lightness are intuitive properties, it is easy to create tints (increase L), shades (decrease L), or desaturated variants (decrease S) of a base colour without any mathematical conversion. For example, a hover state that is 10% lighter is simply hsl(22, 81%, 64%) — trivial in HSL, but requires full conversion in HEX. HSL is also excellent for accessible colour generation: you can lock the hue and saturation while varying lightness to ensure contrast ratios are met.
CMYK stands for Cyan, Magenta, Yellow, and Key (Black) — the four ink channels used in colour printing. You need CMYK values when preparing artwork for physical print: brochures, business cards, packaging, signage, or any offset or digital print job. Screen-to-print conversion is lossy because the CMYK gamut is narrower than RGB, so bright saturated digital colours (especially oranges, greens, and blues) often appear duller in print. Always request CMYK proofs from your printer before final production runs.
Use this converter to identify the precise HEX or RGB values of your foreground text and background colours, then enter them into a WCAG contrast checker. WCAG 2.1 Level AA requires a 4.5:1 contrast ratio for normal text and 3:1 for large text (18pt or 14pt bold). Level AAA requires 7:1 for normal text. Free tools like WebAIM Contrast Checker or the browser DevTools accessibility panel can compute these ratios instantly once you have your exact colour codes.
The current version converts between fully opaque HEX, RGB, HSL and CMYK. Alpha transparency is not included because CMYK and many print workflows do not support alpha, and adding it would complicate the conversion chain. For CSS use, you can manually append alpha after converting — e.g. take the RGB output rgb(232, 98, 42) and write rgba(232, 98, 42, 0.75) for 75% opacity, or use the CSS color-mix() function. Alpha support is planned for a future version of this tool.
The CSS variable output generates a ready-to-paste custom property declaration: --color-primary: #E8622A;. Paste this into your CSS :root {} block and reference it throughout your stylesheet with var(--color-primary). CSS custom properties (variables) are a best practice in modern design systems because they let you change a colour in one place and have it update everywhere. You can then extend the naming convention for your full palette — e.g. --color-primary-dark, --color-primary-light.
Screens display colours using light (additive colour mixing — RGB), while printers deposit ink on paper (subtractive colour mixing — CMYK). The sRGB colour space that most screens use contains colours — particularly bright oranges, cyans, and purples — that simply cannot be reproduced with standard CMYK inks. Your printer converts those out-of-gamut colours to the closest printable equivalent, which is often noticeably less saturated. To minimise surprises, always request a physical proof before large print runs, and use a colour profile (ICC profile) supplied by your print shop when preparing artwork in Adobe Illustrator or InDesign.
The "Nearest CSS name" feature computes which of the 140 official CSS named colours is closest to your current colour using Euclidean distance in RGB space — essentially finding the named colour whose red, green, and blue values are most similar to yours. This is useful for quickly communicating a colour verbally ("it's closest to Coral"), for understanding unfamiliar HEX codes, or for selecting a close named colour as a fallback. The match is approximate — the named colour shown is the closest in the list, not necessarily a visually identical match.
Most modern browsers include a built-in eyedropper tool in their DevTools. In Chrome and Edge, open DevTools (F12), go to the Elements panel, click any colour swatch in the Styles pane, and the colour picker appears — it includes an eyedropper to sample any colour on screen. Firefox has a standalone colour picker in the Accessibility tab. On macOS, the built-in Digital Colour Meter app (Utilities folder) lets you sample any pixel on screen and displays its HEX, RGB, or HSB values. You can then paste the HEX code directly into this converter.
100% free, forever. No account required, no subscription, no hidden limits. RECATOOLS is funded by contextual advertising, not paywalls. All conversions happen entirely in your browser — no data is sent to any server, and your colours remain completely private. The tool works with or without ad consent enabled.

Color Converter

How to Use the Colour Converter