dianping/cat · error · SyntaxError

Expected a hex color but found '{color}' at line {line}, col

Error message

Expected a hex color but found '{color}' at line {line}, col {col}.

What it means

Thrown by the parser's `_hexcolor()` helper after it matched a HASH token (`#...`) but the token's value fails the loose check `/#[a-f0-9]{3,6}/i`. So the tokenizer accepted a `#`-prefixed identifier, yet the characters after `#` are not 3–6 hexadecimal digits. It fires wherever the grammar demands a color and the value looks like a hex color but is not one.

Source

Thrown at cat-home/src/main/webapp/assets/js/editor/worker-css.js:3270

                    functionText += ")";
                    this._readWhitespace();
                }

                return functionText;
            },

            _hexcolor: function(){

                var tokenStream = this._tokenStream,
                    token = null,
                    color;

                if(tokenStream.match(Tokens.HASH)){

                    token = tokenStream.token();
                    color = token.value;
                    if (!/#[a-f0-9]{3,6}/i.test(color)){
                        throw new SyntaxError("Expected a hex color but found '" + color + "' at line " + token.startLine + ", col " + token.startCol + ".", token.startLine, token.startCol);
                    }
                    this._readWhitespace();
                }

                return token;
            },

            _keyframes: function(){
                var tokenStream = this._tokenStream,
                    token,
                    tt,
                    name,
                    prefix = "";

                tokenStream.mustMatch(Tokens.KEYFRAMES_SYM);
                token = tokenStream.token();
                if (/^@\-([^\-]+)\-/.test(token.value)) {
                    prefix = RegExp.$1;

View on GitHub (pinned to e815e74d4c)

Solutions

Correct the value at the reported line/col to a real hex color: 3, 4, or 6 hex digits (`#f00`, `#0f0a`, `#ff0000`).
If you meant a named color or function, drop the `#`: `color: red;` or `color: rgb(255, 0, 0);`.
Check interpolations/variables that produce the value after `#` and add a fallback so it never renders empty.
Grep the stylesheet for `#[0-9a-fA-Z]{0,2}\b` and `#[^0-9a-fA-Z]` to find other malformed hex values in one pass.

Example fix

/* before */
.banner { color: #ff; }        /* Expected a hex color but found '#ff' */

/* after */
.banner { color: #ff0000; }

Defensive patterns

Strategy: validation

Validate before calling

function validHexTokens(css) {
  var bad = css.match(/#[0-9a-fA-F]{0,2}(?![0-9a-fA-F])\b|#[^0-9a-fA-F\s;,}]/g);
  return bad || []; // non-empty -> fix these before parsing

Try / catch

try {
  parser.parse(css);
} catch (ex) {
  if (/Expected a hex color/.test(ex.message)) { highlight(ex.line, ex.col); return; }
  throw ex;
}

Prevention

Use editor snippets/validation for hex colors (#rgb, #rgba, #rrggbb only).
Guard templated colors: color: #${hex || '000'} so '#' is never followed by junk.
Review find/replace operations that can inject non-hex digits into colors.

When it happens

Trigger: Values like `#zz`, `#1` (fewer than 3 hex digits), `#ggghhh` (non-hex letters), `#` followed by non-hex characters, or an unclosed interpolation leaving junk after `#`. Typically from `color: #ff;`, `background: #00ff00z;` typos, or template strings interpolating to empty.

Common situations: Typing shorthand hex too short (`#f` instead of `#f0f`); extra trailing character pasted after the hex; variable interpolation (`color: #{$brand}` style) that emitted nothing after `#`; find-and-replace that mangled hex digits into letters g–z.

Related errors

AI-assisted analysis of dianping/cat@e815e74d4c (2026-08-14). Data as JSON: /api/errors/d7e809c8295a8f30. Report an issue: GitHub.