Convert shorthand hex color codes into full

Quick Take

import { strict as assert } from "assert";
import { conv } from "color-shorthand-hex-to-six-digit";

// converts shorthand hex color codes within strings (imagine that could be
// email template source code):
  conv("aaaa #f0c zzzz\n\t\t\t#fc0"),
  "aaaa #ff00cc zzzz\n\t\t\t#ffcc00"

// converts shorthand hex colour codes within plain objects:
    a: "#ffcc00",
    b: "#f0c",
    c: "text",
    a: "#ffcc00",
    b: "#ff00cc",
    c: "text",

// converts shorthand hex colour codes within arrays:
assert.deepEqual(conv(["#fc0", "#f0c", "text", ""]), [

// converts shorthand hex colour codes within nested spaghetti's:
    [[[[[{ x: ["#fc0"] }]]]]],
    { z: "#f0c" },
    { y: "" },
    [[[[[{ x: ["#ffcc00"] }]]]]],
    { z: "#ff00cc" },
    { y: "" },

// in all other cases it silently returns the input:
assert.equal(conv(null), null);


It's a best practice to avoid shorthand opens in a new tab color codes in email, for example, <td bgcolor='#ccc'>. This program converts three-digit hex color codes inside any data structures (strings, objects or arrays), for example <td bgcolor='#cccccc'>


  • Input: anything
  • Output: same thing as input, only with hex codes converted

If input is string, a converted string will be returned. If input is array or a plain object, hex codes will be converted from within too. If input is unsuitable: falsy things, functions etc. — input will be returned as is.

This program never throws an error, it's meant to be used as a by-pass function.

Usage in Gulp environment

You don't need a Gulp plugin; you can simply use this library whenever you get in control of the final stream, or especially, SCSS variables.

For example, tap the color-shorthand-hex-to-six-digit right after importing the SCSS variables. We hope you are not misbehaving and all your colour variables are in one place only, as variables.

// import SCSS variables from file (modules/src/scss/_variables.scss)

// native Node function to help with paths:
const path = require("path");
// convert variables SCSS file to .JSON:
const scssToJson = require("scss-to-json");
// lodash:
const _ = require("lodash");
// ...

function getScssVars() {
var sassFilePath = path.resolve(
var tempSassVars = scssToJson(sassFilePath);
sassVars = _.mapKeys(tempSassVars, function (value, key) {
return key.slice(1);
// convert all bad hex codes:
sassVars = convShorthand(sassVars);
// console.log('sassVars = ' + JSON.stringify(sassVars, null, 4))

We coded the color-shorthand-hex-to-six-digit to be recursive, that is, you can pass any nested objects/arrays/strings, no matter how deep-nested or tangled - all 3-character hex codes will be converted within the input.

If there is nothing to fix, color-shorthand-hex-to-six-digit behaves well, returning whatever was given, so feel free to assign your sources to the output of color-shorthand-hex-to-six-digit.


See it in the monorepo opens in a new tab, on GitHub.


To report bugs or request features or assistance, raise an issue on GitHub opens in a new tab.

Any code contributions welcome! All Pull Requests will be dealt promptly.


MIT opens in a new tab

Copyright © 2010–2021 Roy Revelt and other contributors

Related packages:

📦 array-of-arrays-into-ast 3.0.1
Turns an array of arrays of data into a nested tree of plain objects
📦 all-named-html-entities 2.0.1
List of all named HTML entities
📦 arrayiffy-if-string 4.0.1
Put non-empty strings into arrays, turn empty-ones into empty arrays. Bypass everything else
📦 array-includes-with-glob 4.0.1
Like _.includes but with wildcards
📦 array-of-arrays-sort-by-col 4.0.1
Sort array of arrays by column, rippling the sorting outwards from that column
📦 array-pull-all-with-glob 6.0.1
Like _.pullAll but with globs (wildcards)
📦 array-group-str-omit-num-char 5.0.1
Groups array of strings by omitting number characters