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);

§ Purpose

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.

§ Licence

MIT opens in a new tab

Copyright © 2010–2020 Roy Revelt and other contributors

Related packages:

📦 arrayiffy-if-string 3.11.38
Put non-empty strings into arrays, turn empty-ones into empty arrays. Bypass everything else.
📦 array-of-arrays-into-ast 1.9.50
turns an array of arrays of data into a nested tree of plain objects
📦 array-includes-with-glob 2.12.42
like _.includes but with wildcards
📦 array-of-arrays-sort-by-col 2.12.13
sort array of arrays by column, rippling the sorting outwards from that column
📦 array-group-str-omit-num-char 2.1.48
Groups array of strings by omitting number characters
📦 all-named-html-entities 1.3.7
List of all named HTML entities
📦 array-pull-all-with-glob 4.12.72
pullAllWithGlob - like _.pullAll but pulling stronger, with globs