Home›Validators›Data›Colour Code Validator

Colour Code Validator

Data

Validate any colour code — HEX, RGB, RGBA, HSL, or HSLA — instantly. Checks syntax and value ranges. Free, client-side, no sign-up required.

Reviewed by the thecalcu.com team · Last updated July 31, 2026

What is a Colour Code?

A Colour Code Validator checks whether a CSS colour value is correctly formatted and all channel values are within their valid ranges. Web colours are expressed in several formats, hexadecimal (#HEX), RGB, RGBA, HSL, and HSLA, each with specific syntax rules and numeric constraints. A single typo in a colour code causes the browser to silently fall back to a default, which can break visual designs in ways that are difficult to spot without careful inspection.

HEX is the most common format: a # symbol followed by 3, 4, 6, or 8 hexadecimal digits representing red, green, blue, and optionally alpha (transparency) channels. RGB notation uses decimal integers (0–255) per channel. HSL describes colours in terms of hue (0–360 degrees on the colour wheel), saturation (0–100%), and lightness (0–100%), which many designers find more intuitive for creating colour palettes.

This validator checks format and value ranges for all five CSS colour function types. It accepts both uppercase and lowercase hex digits, and strips common formatting variations. Where a value is structurally correct but a channel is out of range (e.g. rgb(300, 0, 0)), it gives a specific error rather than a generic failure.

If you are generating colour values programmatically, you may also find the Colour Converter useful for converting between HEX, RGB, and HSL representations.

Why Use a Colour Code Validator?

Colour code errors are silent, a browser encountering an invalid CSS colour simply ignores the property. In large design systems or theme files with hundreds of colour tokens, one malformed value can cause a component to render with the wrong colour or no colour at all, and the only symptom is a visual regression.

Common mistakes include: missing the # prefix on a hex code, using 5 or 7 hex digits instead of 3, 4, 6, or 8, using an RGB channel value above 255 (e.g. copy-pasting a 0–100 percentage scale), or using commas in HSL values without the percentage sign on saturation and lightness.

This validator catches all of these before they reach production.

Who Should Use This Validator?

Front-end developers and UI engineers, validate design tokens, theme variables, and hardcoded colour values in CSS/SCSS before committing.

Designers exporting colour palettes, verify that HEX codes copied from design tools (Figma, Adobe) are complete and correctly formatted before handing off to engineering.

No-code and low-code builders, confirm that colour codes entered into CMS theme editors or site builders are valid before publishing.

QA engineers, automate colour code validation as part of design-token regression checks in CI pipelines.

What Insights Does the Colour Code Validator Give You?

For a valid colour, the tool identifies the format (HEX shorthand, HEX full, RGB, RGBA, HSL, HSLA), confirms all channel values are in range, and notes the alpha channel if present. For 3-digit HEX codes, it shows the equivalent 6-digit expanded form.

For an invalid colour, it explains the specific problem: wrong digit count for a HEX code, out-of-range channel values, unrecognised format, or non-hexadecimal characters. This is more useful than a plain "Invalid" because it points directly to what needs fixing.

How to use this Colour Code calculator

  1. Copy a colour code from your CSS file, design tool, or colour picker.
  2. Paste it into the Colour Code input field.
  3. The validator runs instantly, no button press needed.
  4. Check the Valid / Invalid badge.
  5. If valid, the format and any noteworthy details (alpha channel, expanded HEX) are shown below.
  6. If invalid, read the specific error message and correct the format accordingly.

Formula & Methodology

Each format is validated against a dedicated regular expression:

| Format | Pattern (simplified) | Valid range |
|---|---|---|
| #RGB | #[0-9a-f]{3} | Any 3 hex digits |
| #RRGGBB | #[0-9a-f]{6} | Any 6 hex digits |
| #RGBA | #[0-9a-f]{4} | Any 4 hex digits |
| #RRGGBBAA | #[0-9a-f]{8} | Any 8 hex digits |
| rgb() | rgb(r, g, b) | r, g, b: 0–255 |
| rgba() | rgba(r, g, b, a) | r, g, b: 0–255; a: 0–1 |
| hsl() | hsl(h, s%, l%) | h: 0–360; s, l: 0–100 |
| hsla() | hsla(h, s%, l%, a) | h: 0–360; s, l: 0–100; a: 0–1 |

Valid example: #2F6FED, 6-digit HEX, all characters are valid hex digits ✓

Invalid example: rgb(300, 0, 0), red channel value 300 exceeds the maximum of 255 ✗

Related Tools

You may also find these useful: URL Validator, Regex Tester.

Frequently Asked Questions

The validator supports all common CSS colour formats: HEX (#RGB, #RRGGBB, #RGBA, #RRGGBBAA), RGB (rgb(r, g, b)), RGBA (rgba(r, g, b, a)), HSL (hsl(h, s%, l%)), and HSLA (hsla(h, s%, l%, a)). Named CSS colours like 'red' or 'tomato' are not supported, use a HEX or RGB value instead.
A HEX colour code is a six-digit (or three-digit shorthand) hexadecimal number preceded by a # symbol, representing the red, green, and blue channels of a colour. For example, #FF5733 specifies red=255, green=87, blue=51. The three-digit shorthand #RGB is equivalent to #RRGGBB, so #F53 is the same as #FF5533.
RGB specifies a colour using three channels (red, green, blue) each in the range 0–255. RGBA adds a fourth alpha channel representing opacity, where 0 is fully transparent and 1 is fully opaque. For example, rgba(255, 87, 51, 0.5) renders the same colour as rgb(255, 87, 51) but at 50% opacity.
HSL (Hue, Saturation, Lightness) is an alternative colour model that describes colour in terms more intuitive for designers. Hue is a degree on the colour wheel (0–360), saturation is the intensity as a percentage (0–100%), and lightness is brightness as a percentage (0–100%). HSL is useful when you want to programmatically create colour variations, for example, lighter or darker shades of the same hue.
The most common causes are: a missing # prefix (type #FF5733, not FF5733), incorrect digit count (HEX must be 3, 4, 6, or 8 hex digits after the #), or non-hexadecimal characters (valid hex digits are 0–9 and a–f only). Check that no spaces or extra characters crept in when copying.
The alpha channel controls transparency. In RGBA and HSLA, alpha is a decimal between 0 and 1, where 0 is fully transparent (invisible) and 1 is fully opaque (solid). In 8-digit HEX (#RRGGBBAA), the last two hex digits represent alpha, where 00 is transparent and FF is opaque.
This tool validates the format and value ranges of a colour code, it confirms whether the code is syntactically correct and whether all channel values are within their valid ranges. It does not render a colour swatch. To preview a colour, paste a valid code into your browser's developer tools or a CSS editor.
No. The validator accepts both uppercase and lowercase, hsl(), HSL(), Hsl() are all treated identically. HEX codes are also case-insensitive: #ff5733 and #FF5733 are both valid.
Each of the red, green, and blue channels in an RGB or RGBA value must be an integer between 0 and 255 inclusive. Values like rgb(300, 0, 0) or rgb(-1, 128, 64) are structurally parseable but semantically invalid, this validator catches those out-of-range values explicitly.
No. All validation runs entirely in your browser, nothing is transmitted to any server or stored. Colour codes sometimes appear in design tokens, theme files, or proprietary brand guidelines, so client-side processing ensures your data stays private.
4-digit HEX (#RGBA) and 8-digit HEX (#RRGGBBAA) are CSS Color Level 4 extensions that add an alpha channel to the standard HEX format. They are supported in all modern browsers. #RGBA is a shorthand where each character is doubled, so #F53A is equivalent to #FF5533AA.
Also known as
validate hex colorcheck rgb color codehex color checkercss color validatoris this a valid colorvalidate hsl color