Colour Picker

CSS COLOUR DEVELOPER HEX HSL RGB

By AI Tools Desk Checked against sources by Jeffrey Tan, Founder & Architect, RECATOOLS Published 6 Jun 2026 Updated 28 Sep 2026 Last reviewed 28 Sep 2026

About this tool

Pick colours and convert between HEX, RGB, HSL and CMYK — with CSS snippets ready to copy.

Pick colours and convert between HEX, RGB, HSL and CMYK instantly. Get CSS snippets, check WCAG contrast ratios, and explore colour harmonies. Free, no signup.

RT-DEV-006 · Developer Tools

Your browser is too old for this tool’s interactive features. Please update to Safari 13.1, Chrome or Edge 80, Firefox 74 or newer.

Click the circle to open the colour picker, or type any HEX, RGB or HSL value into the fields below.

HEX

RGB

HSL

CMYK

CSS

Recent Colours

Colour Harmonies

WCAG Contrast Ratios

How to Use the Colour Picker

Open the colour picker

Click the colour circle to open your browser's native colour picker. Drag the selector to any colour — the preview swatch at the top and all output fields update instantly as you drag.

Type any format directly

You can type a HEX code (e.g. #1a2b3c), an RGB value (e.g. rgb(26, 43, 60)), or an HSL value (e.g. hsl(210, 40%, 17%)) into any field and press Enter — all other formats update automatically.

Copy your format

Click Copy next to any format row to copy it to your clipboard — HEX for web hex codes, RGB for CSS with transparency (rgba()), HSL for design tokens and dark mode, or the ready-to-paste CSS snippet.

Check WCAG contrast

The WCAG contrast section shows your colour's contrast ratio against both white and black text. Look for AA or AAA badges to see whether your text colours meet the WCAG 2.1 contrast thresholds.

Colour in Web Design — From Hex Codes to Accessibility Standards

HEX vs RGB vs HSL: Which Should You Use in Your Stylesheet?

HEX is the most widely used colour format in web development. Its compact six-character form — #1a2b3c — is immediately recognisable, well-understood by every design tool, and understood by every browser. For most static colour assignments, HEX is the pragmatic default.

RGB shines when you need programmatic manipulation or when you want to add transparency. The CSS rgba(26, 43, 60, 0.5) form gives you a clean half-transparent variant of any colour without needing a design tool. When writing JavaScript that generates colours dynamically — data visualisation, generative art, interactive UI — RGB's numeric channels are the easiest to compute with.

HSL is the format designers think in. Hue is the colour wheel angle (0–360°), saturation is the vibrance (0% is grey; 100% is fully saturated), and lightness is the brightness (0% is black; 100% is white; 50% is the pure colour). Adjusting one axis doesn't inadvertently shift another — you can make any colour lighter simply by increasing its L value.

This predictability makes HSL ideal for design tokens and dark mode. Modern CSS custom properties work beautifully with HSL: define a base hue once, then derive your full palette by varying saturation and lightness. When a user switches to dark mode, you change the lightness variable — one line of code, the entire palette adapts.

Looking forward, CSS Color Module Level 4 adds oklch(), built on the Oklab colour space. Unlike HSL, it is designed to be perceptually uniform, so equal steps in lightness look like equal steps — HSL's 50% lightness is far brighter in yellow than in blue. This tool converts HEX, RGB, HSL and CMYK; it does not output oklch.

Colour Accessibility in Web Design: WCAG Contrast Ratios Explained

The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios that ensure text remains readable for users with low vision or colour blindness. The standard has two levels this tool checks: AA and AAA (enhanced accessibility). For normal body text, AA requires a contrast ratio of at least 4.5:1 and AAA requires 7:1 against the background. Large text — defined as 18pt (24px) or larger, or 14pt (approximately 18.67px) bold — has a lower AA threshold of 3:1.

Why does this matter? Red-green colour deficiency affects about 8% of men of European descent and 4–6.5% of men of Chinese and Japanese ethnicity, against about 0.4% of women (Birch, 2012). For these users, and for anyone with low vision, low-contrast combinations — light grey text on white, or green text on red — are hard or impossible to read. Singapore's Government has committed to making high-traffic government websites conform to WCAG 2.1 AA by 2030 (MDDI, November 2024).

Common accessibility failures to avoid: light grey (#aaaaaa) on white fails AA at 2.32:1; medium blue on dark navy; yellow text on white (particularly problematic as yellow has high luminance). Tools for systematic checking beyond this picker include Chrome DevTools' colour picker with built-in contrast indicator, Google Lighthouse accessibility audit, and the free browser extension WAVE by WebAIM.

RECATOOLS' own accent, #E8622A, scores 3.38:1 against white — enough for large text under WCAG AA, not for body copy.

Colour Psychology in ASEAN Brand Design: Red, Gold and What They Mean

Colour carries deep cultural meaning, and in the ASEAN region those meanings are shaped by Chinese, Malay, Indian, and Western influences layered over centuries of trade and migration. Red is bound up with luck, prosperity and celebration in Chinese culture, which is one reason it is so common in brands and festive design across the region.

Gold and near-gold tones are widely read as premium and celebratory, and pair naturally with red in festive palettes.

Green has a dual significance in the region. It aligns strongly with Islam (it is the colour of the Prophet's banner in Islamic tradition) and thus features prominently in Malaysian and Indonesian design. It also reads as growth and environmental responsibility.

White carries different meanings depending on the cultural context. In Western and Chinese contexts it can represent purity and cleanliness — but in some ASEAN traditions it is associated with mourning and funerals, as it is in Chinese funeral custom. The safe course is to test a palette with people from the market it is for.

Red and green you cannot tell apart, and a hex code with an alpha channel

The HEX colour system uses base-16 notation — #RRGGBB, where each pair ranges from 00 (0) to FF (255), giving 16,777,216 possible colours.

Red-green colour deficiency affects about 8% of European men and 4–6.5% of Chinese and Japanese men, but about 0.4% of women (Birch, 2012).

WCAG contrast runs from 1:1 (identical colours) to 21:1 (black on white), computed from each colour's relative luminance.

WCAG Level AA asks for 4.5:1 for normal text and 3:1 for large text; AAA raises them to 7:1 and 4.5:1.

Light grey #AAAAAA on white scores 2.32:1 — it fails AA even for large text.

oklch(), defined in CSS Color Module Level 4, is built to be perceptually uniform in a way HSL is not.

CSS Color 4 allows an eight-digit hex code, #RRGGBBAA: the last pair is the alpha channel, so #E8622A80 is about half-transparent.

A complementary colour sits 180° round the hue wheel; this tool also shows the two analogous colours at ±30°.

The CMYK model is subtractive (mixing removes light) while RGB is additive (mixing adds light) — which is why RGB colours cannot always be reproduced in print.

The CMYK shown here is a naive formula, not a print profile — for real print work, convert with your printer's ICC profile.

📅 Research current as of 28 Sep 2026 · Sources: Deterministic transformation of the text or numbers you enter — no external rates, reference data or network calls. Reviewed for wording and accuracy.

Standards, published formulas, and reference data are revised over time — check against a current authoritative source before relying on these figures.

Frequently Asked Questions

A HEX colour code is a six-digit base-16 number prefixed with # that represents a colour in RGB format. The first two digits are the red channel (00–FF), the next two green, and the last two blue. For example, #E8622A means red=232 (E8), green=98 (62), blue=42 (2A). HEX codes are the most common colour format in web development and are supported in every browser and CSS preprocessor.
Use HEX for static colour definitions — it is compact and universally understood by designers and developers. Use RGB (or its rgba() form) when you need transparency: rgba(232, 98, 42, 0.5) gives a 50% transparent version of a colour. RGB is also easier to manipulate programmatically in JavaScript when generating colours dynamically.
HSL stands for Hue, Saturation, Lightness. Hue is the colour wheel position (0–360°), saturation is the intensity (0% is greyscale, 100% is fully vibrant), and lightness is the brightness (0% is black, 50% is the pure colour, 100% is white). Designers prefer HSL because it matches how humans think about colour — you can create a lighter tint or darker shade simply by adjusting the L value. It is ideal for design tokens, colour palettes, and implementing dark mode in CSS.
CMYK (Cyan, Magenta, Yellow, Key/Black) is the colour model used by inkjet and commercial printers. Unlike RGB (which is additive — mixing light), CMYK is subtractive — inks absorb light. This means not all RGB colours can be reproduced in print. You will need CMYK values when supplying artwork to a print shop, designing business cards, or specifying brand colours for print media. This tool shows CMYK values as percentages of each ink channel.
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and its background to ensure readability for users with low vision or colour blindness. Level AA requires a minimum ratio of 4.5:1 for normal text and 3:1 for large text (18pt+). Level AAA requires 7:1 for normal text. Singapore's Government has committed to WCAG 2.1 AA for its high-traffic websites by 2030 (MDDI, November 2024). This tool computes the contrast ratio for your chosen colour against both white and black backgrounds.
CSS supports transparency via the alpha channel. Copy the RGB value from this tool and modify it to use rgba() — for example, rgba(232, 98, 42, 0.5) for 50% opacity. Modern CSS also supports #E8622A80 — a HEX code with an extra two digits for the alpha channel (80 in hex = 128, about 50%). HSL also has an alpha form: hsla(18, 81%, 54%, 0.5).
RGB is an additive model: red, green and blue light are added together, with all three at full intensity producing white. It is used for screens, monitors and digital displays. CMYK is a subtractive model: cyan, magenta, yellow and black inks are laid on paper, each absorbing (subtracting) wavelengths of light, with all four at full density producing near-black. It is used for printing. Because the two models have different gamuts (range of reproducible colours), some vivid RGB colours — especially saturated oranges and greens — cannot be exactly reproduced in CMYK.
The complementary colour is directly opposite on the colour wheel — it is calculated by adding 180° to the hue value in HSL. For example, the complement of orange (hue ≈ 21°) is a blue (hue ≈ 201°). Complementary colour pairs create maximum contrast and visual vibrance. This tool shows the complementary colour alongside two analogous colours (hue ±30°) in the Colour Harmonies section — click any swatch to set it as the active colour.
The RECATOOLS accent colour is #E8622A — a coral-orange. In RGB it is rgb(232, 98, 42); in HSL it is hsl(18, 81%, 54%). It scores 3.38:1 against white, which passes WCAG AA for large text (3:1) but not for normal body text (4.5:1) — so it suits headings and highlights, not body copy.
100% free, forever. No account, no subscription, no hidden limits. RECATOOLS is free to use, with no paywall — we plan to fund it with contextual advertising, shown only with your consent. The tool runs entirely in your browser — no colour data is sent to any server. The colour history is stored only in your browser's localStorage and never leaves your device.

Method & sources

How it computes

Converts between HEX, RGB, HSL and a naive CMYK, computes WCAG 2.1 contrast against white and black from sRGB relative luminance (linearised with the 0.04045 threshold, weights 0.2126/0.7152/0.0722), and shows the complement (hue + 180°) and two analogous colours (±30°). Defaults to the site accent #E8622A.

What this tool implements

WCAG 2.1 SC 1.4.3: 4.5:1 for normal text, 3:1 for large text (at least 18 point, or 14 point bold); AAA 7:1 and 4.5:1.
The page said #E8472F was rgb(232, 98, 42) scoring 3.09:1; that RGB is #E8622A, which scores 3.38:1 (#E8472F is 3.91:1). The HEX field defaulted to one colour and the RGB, HSL and CMYK fields to the other; all four now agree.
Birch (2012): red-green deficiency affects about 8% of European men, 4–6.5% of Chinese and Japanese men and about 0.4% of women.

Sources

W3C. Web Content Accessibility Guidelines (WCAG) 2.1, SC 1.4.3 Contrast (Minimum) and the definition of relative luminance. https://www.w3.org/TR/WCAG21/
W3C. CSS Color Module Level 4 (hex with alpha, oklch). https://www.w3.org/TR/css-color-4/
Birch J. Worldwide prevalence of red-green color deficiency. J Opt Soc Am A. 2012;29(3):313-320. https://doi.org/10.1364/JOSAA.29.000313
Ministry of Digital Development and Information. Response to PQ on ensuring high-traffic Government websites conform to WCAG (12 November 2024). https://www.mddi.gov.sg/newsroom/pq-on-ensuring-high-traffic-gove…