Add support for 4 and 8 digit hex codes

d3 · Sep 19, 2019 · 7a4982b · 7a4982b
1 parent bff4aa3
commit 7a4982b
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/src/color.js b/src/color.js
@@ -9,7 +9,9 @@ var reI = "\\s*([+-]?\\d+)\\s*",
     reN = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)\\s*",
     reP = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)%\\s*",
     reHex3 = /^#([0-9a-f]{3})$/,
+    reHex4 = /^#([0-9a-f]{4})$/,
     reHex6 = /^#([0-9a-f]{6})$/,
+    reHex8 = /^#([0-9a-f]{8})$/,
     reRgbInteger = new RegExp("^rgb\\(" + [reI, reI, reI] + "\\)$"),
     reRgbPercent = new RegExp("^rgb\\(" + [reP, reP, reP] + "\\)$"),
     reRgbaInteger = new RegExp("^rgba\\(" + [reI, reI, reI, reN] + "\\)$"),
@@ -197,8 +199,10 @@ function color_formatRgb() {
 export default function color(format) {
   var m;
   format = (format + "").trim().toLowerCase();
-  return (m = reHex3.exec(format)) ? (m = parseInt(m[1], 16), new Rgb((m >> 8 & 0xf) | (m >> 4 & 0x0f0), (m >> 4 & 0xf) | (m & 0xf0), ((m & 0xf) << 4) | (m & 0xf), 1)) // #f00
+  return (m = reHex3.exec(format)) ? (m = parseInt(m[1], 16), new Rgb((m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), ((m & 0xf) << 4) | (m & 0xf), 1)) // #f00
+      : (m = reHex4.exec(format)) ? (m = parseInt(m[1], 16), new Rgb((m >> 12 & 0xf) | (m >> 8 & 0xf0), (m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), (((m & 0xf) << 4) | (m & 0xf)) / 0xff)) // #f000
       : (m = reHex6.exec(format)) ? rgbn(parseInt(m[1], 16)) // #ff0000
+      : (m = reHex8.exec(format)) ? rgbn8(parseInt(m[1], 16)) // #ff000000
       : (m = reRgbInteger.exec(format)) ? new Rgb(m[1], m[2], m[3], 1) // rgb(255, 0, 0)
       : (m = reRgbPercent.exec(format)) ? new Rgb(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, 1) // rgb(100%, 0%, 0%)
       : (m = reRgbaInteger.exec(format)) ? rgba(m[1], m[2], m[3], m[4]) // rgba(255, 0, 0, 1)
@@ -214,6 +218,11 @@ function rgbn(n) {
   return new Rgb(n >> 16 & 0xff, n >> 8 & 0xff, n & 0xff, 1);
 }
 
+function rgbn8(n) {
+  console.log(n);
+  return new Rgb(n >> 24 & 0xff, n >> 16 & 0xff, n >> 8 & 0xff, (n & 0xff) / 0xff);
+}
+
 function rgba(r, g, b, a) {
   if (a <= 0) r = g = b = NaN;
   return new Rgb(r, g, b, a);

diff --git a/test/color-test.js b/test/color-test.js
@@ -26,6 +26,16 @@ tape("color(format) parses 3-digit hexadecimal (e.g., \"#abc\")", function(test)
   test.end();
 });
 
+tape("color(format) parses 8-digit hexadecimal (e.g., \"#abcdef\")", function(test) {
+  test.rgbEqual(color.color("#abcdef33"), 171, 205, 239, 0.2);
+  test.end();
+});
+
+tape("color(format) parses 4-digit hexadecimal (e.g., \"#abc\")", function(test) {
+  test.rgbEqual(color.color("#abc3"), 170, 187, 204, 0.2);
+  test.end();
+});
+
 tape("color(format) parses RGB integer format (e.g., \"rgb(12,34,56)\")", function(test) {
   test.rgbEqual(color.color("rgb(12,34,56)"), 12, 34, 56, 1);
   test.end();
@@ -157,7 +167,6 @@ tape("color(format) returns undefined RGB channel values for unknown formats", f
   test.equal(color.color("hasOwnProperty"), null);
   test.equal(color.color("__proto__"), null);
   test.equal(color.color("#ab"), null);
-  test.equal(color.color("#abcd"), null);
   test.end();
 });