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.

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.

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 ✗
Frequently Asked Questions
What colour code formats does this validator support?
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.
What is a HEX colour code?
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.
What is the difference between RGB and RGBA?
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.
What is HSL and when should I use it?
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.
My HEX code is valid but shows as invalid — why?
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.
What does the alpha channel value mean?
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.
Does this validator tell me what colour the code represents?
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.
Are HSL values case-sensitive?
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.
What RGB values are out of range?
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.
Is my colour code stored when I validate it?
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.
What is the 4-digit and 8-digit HEX format?
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.

Related Calculators

data
URL Validator
Check if a URL is correctly formatted using the browser's own URL pars…
data
Regex Tester
Test a regular expression against a string instantly. See if your patt…
data
UUID Validator
Validate any UUID (v1–v5) instantly — checks the 8-4-4-4-12 hexadecima…