Colour Picker

CSS COLOUR DEVELOPER HEX HSL RGB

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

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 ensure your text colours meet accessibility standards for Singapore IMDA and international compliance.

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 supported in every browser since IE6. 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, the CSS Working Group recommends oklch() as the future-proof colour space. Unlike HSL, oklch is perceptually uniform — equal numeric steps produce equal perceived brightness differences. As browser support matures in 2025–2026, oklch will likely replace HSL in professional design systems.

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 compliance levels: AA (the legal minimum in most jurisdictions) 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? Approximately 8% of men and 0.5% of women worldwide have some form of colour vision deficiency. Red-green colour blindness (deuteranopia and protanopia) is the most common form. For these users, low-contrast colour combinations — like light grey text on white, or green text on red — are effectively invisible. Many Singapore government websites have been audited and found to fail these basic standards, despite the Infocomm Media Development Authority (IMDA) aligning its Accessibility Standards with WCAG 2.1.

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 brand colour #E8472F scores 3.09:1 contrast against white — it passes WCAG AA for large text but not normal text, which is why the brand uses it for headings and buttons, not 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 dominates the palettes of Singapore and Malaysia's largest financial brands. DBS Bank's deep red (#DA1310) and OCBC's orange-red were both chosen in part because red is inseparable from prosperity, luck, and celebration in Chinese culture — critical symbolism in markets where ethnic Chinese form a major consumer demographic.

Gold and near-gold tones convey premium quality and heritage. Singapore Airlines pairs navy blue with gold — the gold referencing the brand's Asian luxury positioning, the blue communicating trust and professionalism. Tiger Beer's gold is deliberately warm, evoking the richness of Southeast Asian tradition. Petronas, Malaysia's national oil company, uses green and gold: green signalling the Islamic and natural heritage of Malay culture, gold the economic prosperity the brand represents.

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 brands. It also reads as growth and environmental responsibility — which Grab exploited deliberately when choosing its distinctive lime green (#00B14F). Gojek chose a similar green (#00AA13), creating a visual brand battle that played out across ride-hailing apps across six countries.

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. A predominantly white luxury brand entering the Indonesian or Vietnamese market without cultural colour adaptation risks unintended associations. Colour is never just aesthetic: in ASEAN, it is always also cultural.

10 Facts About Web Colours and Design

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.

Approximately 8% of men and 0.5% of women worldwide have some form of colour blindness — most commonly red-green (deuteranopia).

Singapore's DBS Bank uses #DA1310 as its primary red — chosen for high visibility and strong association with Chinese prosperity symbolism.

The WCAG Level AA contrast ratio of 4.5:1 is a minimum for normal text accessibility — many government websites globally still fail this standard.

CSS custom properties combined with HSL allow dark mode to be implemented by changing a single lightness value — a technique popularised by developer Josh Comeau.

oklch() is the modern CSS colour space recommended by the CSS Working Group — providing perceptually uniform colour manipulation that HSL cannot achieve.

Singapore's DesignSingapore Council published colour guidelines for government communications — specifying exact Pantone, CMYK and HEX values for the national palette.

Grab's green (#00B14F) was chosen to convey growth, trust and environmental awareness — contrasting with Gojek's green (#00AA13) in a visual brand battle.

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.

WebP images support alpha transparency like PNG but with significantly smaller file sizes — important for logos and UI elements displayed over any colour background.

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, #E8472F means red=232, green=98, blue=42. 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 IMDA Accessibility Standards for websites align with WCAG 2.1 — so compliance matters for both users and regulatory requirements. 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 #E8472F80 — a HEX code with an extra two digits for the alpha channel (80 in hex = 128 = 50%). HSL also has an alpha form: hsla(21, 80%, 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 brand colour is #E8472F — a coral-orange. In RGB it is rgb(232, 98, 42); in HSL it is approximately hsl(21, 80%, 54%). It scores a contrast ratio of approximately 3.09:1 against white, which passes WCAG AA for large text (3:1 threshold) but not for normal body text (4.5:1 threshold). For that reason it is used for headings, buttons and highlights on a white or warm-white background — never for body copy.
100% free, forever. No account, no subscription, no hidden limits. RECATOOLS is funded by contextual advertising, not paywalls. 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.

Colour Picker