diff --git a/apps/automated/src/color/color-tests-common.ts b/apps/automated/src/color/color-tests-common.ts
index 18d94bac96..13182f417f 100644
--- a/apps/automated/src/color/color-tests-common.ts
+++ b/apps/automated/src/color/color-tests-common.ts
@@ -17,6 +17,19 @@ export var test_Hex_Color = function () {
 	TKUnit.assertEqual(color.argb, 0xffff0000, 'Color.argb not properly parsed');
 };
 
+export var test_Hex_rgba_Color = function () {
+	// >> color-hex-rgba
+	// Creates the red color
+	var color = new Color('#FF0000FF');
+	// << color-hex-rgba
+	TKUnit.assertEqual(color.a, 255, 'Color.a not properly parsed');
+	TKUnit.assertEqual(color.r, 255, 'Color.r not properly parsed');
+	TKUnit.assertEqual(color.g, 0, 'Color.g not properly parsed');
+	TKUnit.assertEqual(color.b, 0, 'Color.b not properly parsed');
+	TKUnit.assertEqual(color.hex, '#FF0000', 'Color.hex not properly parsed');
+	TKUnit.assertEqual(color.argb, 0xffff0000, 'Color.argb not properly parsed');
+};
+
 export var test_ShortHex_Color = function () {
 	// >> color-hex-short
 	// Creates the color #FF8800
@@ -30,6 +43,19 @@ export var test_ShortHex_Color = function () {
 	TKUnit.assertEqual(color.argb, 0xffff8800, 'Color.argb not properly parsed');
 };
 
+export var test_ShortHex_rgba_Color = function () {
+	// >> color-hex-short-rgba
+	// Creates the color #FF8800
+	var color = new Color('#F80F');
+	// << color-hex-short-rgba
+	TKUnit.assertEqual(color.a, 255, 'Color.a not properly parsed');
+	TKUnit.assertEqual(color.r, 255, 'Color.r not properly parsed');
+	TKUnit.assertEqual(color.g, 136, 'Color.g not properly parsed'); // 0x88 == 136
+	TKUnit.assertEqual(color.b, 0, 'Color.b not properly parsed');
+	TKUnit.assertEqual(color.hex, '#FF8800', 'Color.hex not properly parsed');
+	TKUnit.assertEqual(color.argb, 0xffff8800, 'Color.argb not properly parsed');
+};
+
 export var test_Argb_Color = function () {
 	// >> color-rgb
 	// Creates the color with 100 alpha, 255 red, 100 green, 100 blue
@@ -112,7 +138,10 @@ export var test_Color_isValid = function () {
 	var color = new Color('#FF0000');
 
 	TKUnit.assertEqual(Color.isValid(color), true, 'Failed to validate color instance');
-	TKUnit.assertEqual(Color.isValid('#FF0000'), true, 'Failed to validate hex color');
+	TKUnit.assertEqual(Color.isValid('#FFF'), true, 'Failed to validate 3-digit hex color');
+	TKUnit.assertEqual(Color.isValid('#FFF0'), true, 'Failed to validate 4-digit hex color');
+	TKUnit.assertEqual(Color.isValid('#FF0000'), true, 'Failed to validate 6-digit hex color');
+	TKUnit.assertEqual(Color.isValid('#FF000000'), true, 'Failed to validate 8-digit hex color');
 	TKUnit.assertEqual(Color.isValid('rgb(255, 100, 100)'), true, 'Failed to validate rgb color');
 	TKUnit.assertEqual(Color.isValid('hsl(50, 50%, 50%)'), true, 'Failed to validate hsl color');
 	TKUnit.assertEqual(Color.isValid(null) || Color.isValid(undefined), false, 'Failed to invalidate nullish value');
diff --git a/packages/core/color/color-common.ts b/packages/core/color/color-common.ts
index 1f366f573b..d36024161a 100644
--- a/packages/core/color/color-common.ts
+++ b/packages/core/color/color-common.ts
@@ -4,7 +4,7 @@ import * as knownColors from './known-colors';
 import { Color } from '.';
 
 const SHARP = '#';
-const HEX_REGEX = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)|(^#[0-9A-F]{8}$)/i;
+const HEX_REGEX = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)|(^#[0-9A-F]{8}$)|(^#[0-9A-F]{4}$)/i;
 
 export class ColorBase implements definition.Color {
 	private _argb: number;
@@ -29,7 +29,7 @@ export class ColorBase implements definition.Color {
 					const argb = knownColors.getKnownColor(lowered);
 					this._name = arg;
 					this._argb = argb;
-				} else if (arg[0].charAt(0) === SHARP && (arg.length === 4 || arg.length === 7 || arg.length === 9)) {
+				} else if (arg[0].charAt(0) === SHARP && (arg.length === 4 || arg.length === 5 || arg.length === 7 || arg.length === 9)) {
 					// we dont use the regexp as it is quite slow. Instead we expect it to be a valid hex format
 					// strange that it would not be. And if it is not a thrown error seems best
 					// The parameter is a "#RRGGBBAA" formatted string
@@ -578,7 +578,7 @@ function hsvToRgb(h1, s1, v1) {
 	const s = s1 / 100;
 	const v = v1 / 100;
 
-	var i = Math.floor(h),
+	const i = Math.floor(h),
 		f = h - i,
 		p = v * (1 - s),
 		q = v * (1 - f * s),