diff --git a/src/helpers/ColorHelper.php b/src/helpers/ColorHelper.php
index bcba06b..227db36 100644
--- a/src/helpers/ColorHelper.php
+++ b/src/helpers/ColorHelper.php
@@ -107,7 +107,7 @@ public static function hexIsBlack(string $color)
 
     public static function isValidHex($color)
     {
-        return preg_match('/^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i', $color) ? true : false;
+        return preg_match('/^#?[0-9a-f]{3}(?:[0-9a-f]{3})?$/i', $color) ? true : false;
     }
 
     public static function hexToRgba($color, $opacity = false, $asArray = false)
diff --git a/src/templates/_fields/colorit/input.twig b/src/templates/_fields/colorit/input.twig
index 0ee9f99..3c3e52c 100644
--- a/src/templates/_fields/colorit/input.twig
+++ b/src/templates/_fields/colorit/input.twig
@@ -20,7 +20,12 @@
 						handle == paletteColor.handle ? 'colorit--palette-colorIsSelected' : null,
 					]|filter|join(' ') %}
 
-					{% set processedColor = field.allowOpacity and opacity < 100 ? craft.colorit.colors.hexToRgba(paletteColor.color, opacity) : paletteColor.color %}
+					{% set color = paletteColor.color %}
+					{% if not (color starts with '#' or color starts with 'rgb') %}
+						{% set color = '#' ~ color %}
+					{% endif %}
+
+					{% set processedColor = field.allowOpacity and opacity < 100 ? craft.colorit.colors.hexToRgba(paletteColor.color, opacity) : color %}
 
 					<li class="{{ class }}" title="{{ paletteColor.label }}" data-handle="{{ paletteColor.handle }}" data-color="{{ paletteColor.color }}" style="background:{{ processedColor }};" data-colorit-palette-color>
 					</li>
@@ -42,7 +47,12 @@
 
 	{% if field.allowCustomColor %}
 
-		{% set processedColor = custom and field.allowOpacity and opacity < 100 ? craft.colorit.colors.hexToRgba(custom, opacity) : custom %}
+		{% set color = custom %}
+		{% if not (color starts with '#' or color starts with 'rgb') %}
+			{% set color = '#' ~ color %}
+		{% endif %}
+
+		{% set processedColor = custom and field.allowOpacity and opacity < 100 ? craft.colorit.colors.hexToRgba(custom, opacity) : color %}
 
 		<div class="colorit--palette-customColor{{ processedColor ? ' colorit--palette-colorIsSelected' }}" data-colorit-palette-custom>
 			{{ forms.text({
diff --git a/src/templates/_fields/colorit/preview.twig b/src/templates/_fields/colorit/preview.twig
index 7435921..373761e 100644
--- a/src/templates/_fields/colorit/preview.twig
+++ b/src/templates/_fields/colorit/preview.twig
@@ -19,7 +19,12 @@
 						craft.colorit.colors.hexIsTransparent(paletteColor.color) ? 'colorit--palette-colorIsTransparent' : null,
 					]|filter|join(' ') %}
 
-					{% set processedColor = field.allowOpacity and opacity < 100 ? craft.colorit.colors.hexToRgba(paletteColor.color, opacity) : paletteColor.color %}
+					{% set color = paletteColor.color %}
+					{% if not (color starts with '#' or color starts with 'rgb') %}
+						{% set color = '#' ~ color %}
+					{% endif %}
+
+					{% set processedColor = field.allowOpacity and opacity < 100 ? craft.colorit.colors.hexToRgba(paletteColor.color, opacity) : color %}
 
 					<li class="{{ class }}" title="{{ paletteColor.label }}" style="background:{{ processedColor }};"></li>
 
@@ -34,7 +39,12 @@
 
 	{% if field.allowCustomColor %}
 
-		{% set processedColor = custom and field.allowOpacity and opacity < 100 ? craft.colorit.colors.hexToRgba(custom, opacity) : custom %}
+		{% set color = custom %}
+		{% if not (color starts with '#' or color starts with 'rgb') %}
+			{% set color = '#' ~ color %}
+		{% endif %}
+
+		{% set processedColor = custom and field.allowOpacity and opacity < 100 ? craft.colorit.colors.hexToRgba(custom, opacity) : color %}
 
 		<div class="colorit--palette-customColor{{ processedColor ? ' colorit--palette-colorIsSelected' }}">
 			<input class="text" type="text" value="{{ custom }}" placeholder="#D65B4B" novalidate disabled/>