diff --git a/common/js/plugins/spectrum/plugin.load b/common/js/plugins/spectrum/plugin.load
index aa50ef57a..7398fdfdd 100644
--- a/common/js/plugins/spectrum/plugin.load
+++ b/common/js/plugins/spectrum/plugin.load
@@ -1,3 +1,3 @@
 spectrum.css
 spectrum.js
-xe_spectrum.js
\ No newline at end of file
+rx_spectrum.js
\ No newline at end of file
diff --git a/common/js/plugins/spectrum/xe_spectrum.js b/common/js/plugins/spectrum/rx_spectrum.js
similarity index 88%
rename from common/js/plugins/spectrum/xe_spectrum.js
rename to common/js/plugins/spectrum/rx_spectrum.js
index 3fe8652f3..39e788732 100644
--- a/common/js/plugins/spectrum/xe_spectrum.js
+++ b/common/js/plugins/spectrum/rx_spectrum.js
@@ -3,12 +3,12 @@
  * @author MinSoo Kim <misol.kr@gmail.com>
  **/
 jQuery(function($){
-	$.fn.xe_spectrum = function(settings){
+	$.fn.rx_spectrum = function(settings){
 		return this.spectrum(settings);
 	}
 
-	// 컬러 피커가 내장된 브라우저에서는 내장된 컬러피커 이용 by misol 2016.02.05
-	if ( $("input.color-indicator").prop('type') != 'color' ) {
+	// 컬러 피커가 내장된 브라우저에서는 내장된 컬러피커 이용
+	if ( $("input.rx-spectrum").prop('type') != 'color' ) {
 		$.getScript(request_uri + "./common/js/plugins/spectrum/i18n/jquery.spectrum-"+ xe.current_lang.replace("jp", "ja").toLowerCase() +".js", function() {
 			var settings = {
 				showInput: true,
@@ -42,7 +42,7 @@ jQuery(function($){
 					["#660000","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
 				]
 			}
-			$('input.color-indicator').xe_spectrum(settings);
+			$('input.rx-spectrum').rx_spectrum(settings);
 		});
 	}
 });
\ No newline at end of file
diff --git a/modules/document/tpl/category_list.html b/modules/document/tpl/category_list.html
index ee98c9ad7..e9f03e0ad 100644
--- a/modules/document/tpl/category_list.html
+++ b/modules/document/tpl/category_list.html
@@ -61,7 +61,7 @@
 			<div class="x_control-group">
 				<label class="x_control-label" for="category_color">{$lang->category_color}</label>
 				<div class="x_controls">
-					<span class="x_input-append"><input type="color" class="color-indicator" name="category_color" id="category_color" value="" /></span>
+					<span class="x_input-append"><input type="color" class="rx-spectrum" name="category_color" id="category_color" value="" /></span>
 					<a href="#categoy_color_help" class="x_icon-question-sign" data-toggle>{$lang->help}</a>
 					<p id="categoy_color_help" hidden style="margin:8px 0 0 0">{$lang->about_category_color}</p>
 				</div>
diff --git a/modules/document/tpl/js/document_category.js b/modules/document/tpl/js/document_category.js
index 3a9344c63..0cdf72dc3 100644
--- a/modules/document/tpl/js/document_category.js
+++ b/modules/document/tpl/js/document_category.js
@@ -150,6 +150,7 @@ function clearValue(){
 	$w.find('input[type="checkbox"]').removeAttr('checked');
 	$w.find('.lang_code').trigger('reload-multilingual');
 	$w.find('.color-indicator').trigger('keyup');
+	$w.find('.rx-spectrum').trigger('keyup');
 }
 
 function addNode(node,e){
diff --git a/modules/editor/components/image_gallery/tpl/popup.html b/modules/editor/components/image_gallery/tpl/popup.html
index aecf11574..d8cd62292 100644
--- a/modules/editor/components/image_gallery/tpl/popup.html
+++ b/modules/editor/components/image_gallery/tpl/popup.html
@@ -40,13 +40,13 @@
 		<div class="x_control-group">
 			<label for="" class="x_control-label">{$lang->gallery_border_color}</label>
 			<div class="x_controls">
-				<input type="color" id="border_color_input" class="color-indicator" size="7" value="#000000" />
+				<input type="color" id="border_color_input" class="rx-spectrum" size="7" value="#000000" />
 			</div>
 		</div>
 		<div class="x_control-group">
 			<label for="" class="x_control-label">{$lang->gallery_bg_color}</label>
 			<div class="x_controls">
-				<input type="color" id="bg_color_input" class="color-indicator"  size="7" value="#FFFFFF" />
+				<input type="color" id="bg_color_input" class="rx-spectrum"  size="7" value="#FFFFFF" />
 			</div>
 		</div>
 		<div class="x_control-group">
diff --git a/modules/layout/tpl/faceoff_layout_menu.html b/modules/layout/tpl/faceoff_layout_menu.html
index 4f6c435e3..13bc6d802 100644
--- a/modules/layout/tpl/faceoff_layout_menu.html
+++ b/modules/layout/tpl/faceoff_layout_menu.html
@@ -218,7 +218,7 @@
             <legend>{$lang->layout_manager[38]}</legend>
             <span class="inputall">
                 <input type="text" id="border-width" size="3" title="border-width+px" />
-                <input type="color" id="border-color" size="7" class="color-indicator" title="border-color" />
+                <input type="color" id="border-color" size="7" class="rx-spectrum" title="border-color" />
                 <select id="border-style" title="border-style">
                     <option value="none">{$lang->layout_manager[39]}</option>
                     <option value="hidden">hidden</option>
@@ -237,7 +237,7 @@
                 <div>
                     <label for="border-top-width">{$lang->layout_manager[34]} : </label>
                     <input type="text" id="border-top-width" size="3" title="border-width+px" />
-                    <input type="color" id="border-top-color" size="7" class="color-indicator" title="border-color" />
+                    <input type="color" id="border-top-color" size="7" class="rx-spectrum" title="border-color" />
                     <select id="border-top-style" title="border-style">
                         <option value="none">{$lang->layout_manager[39]}</option>
                         <option value="hidden">hidden</option>
@@ -254,7 +254,7 @@
                 <div>
                     <label for="border-right-width">{$lang->layout_manager[36]} : </label>
                     <input type="text" id="border-right-width" size="3" title="border-width+px" />
-                    <input type="color" id="border-right-color" size="7" class="color-indicator" title="border-color" />
+                    <input type="color" id="border-right-color" size="7" class="rx-spectrum" title="border-color" />
                     <select id="border-right-style" title="border-style">
                         <option value="none">{$lang->layout_manager[39]}</option>
                         <option value="hidden">hidden</option>
@@ -271,7 +271,7 @@
                 <div>
                     <label for="border-bottom-width">{$lang->layout_manager[37]} : </label>
                     <input type="text" id="border-bottom-width" size="3" title="border-width+px" />
-                    <input type="color" id="border-bottom-color" size="7" class="color-indicator" title="border-color" />
+                    <input type="color" id="border-bottom-color" size="7" class="rx-spectrum" title="border-color" />
                     <select id="border-bottom-style" title="border-style">
                         <option value="none">{$lang->layout_manager[39]}</option>
                         <option value="hidden">hidden</option>
@@ -288,7 +288,7 @@
                 <div>
                     <label for="border-left-width">{$lang->layout_manager[35]} : </label>
                     <input type="text" id="border-left-width" size="3" title="border-width+px" />
-                    <input type="color" id="border-left-color" size="7" class="color-indicator" title="border-color" />
+                    <input type="color" id="border-left-color" size="7" class="rx-spectrum" title="border-color" />
                     <select id="border-left-style" title="border-style">
                         <option value="none">{$lang->layout_manager[39]}</option>
                         <option value="hidden">hidden</option>
@@ -309,7 +309,7 @@
             <div class="visible-more">
                 <div>
                     <label for="background-color">{$lang->layout_manager[41]} : </label>
-                    <input type="color" id="background-color" size="7" class="color-indicator" />
+                    <input type="color" id="background-color" size="7" class="rx-spectrum" />
                 </div>
                 <div>
                     <label for="background-image">{$lang->layout_manager[42]} :</label>
@@ -335,7 +335,7 @@
                 </div>
                 <div>
                     <label for="color">{$lang->layout_manager[54]} : </label>
-                    <input type="color" id="color" size="7" class="color-indicator" />
+                    <input type="color" id="color" size="7" class="rx-spectrum" />
                 </div>
             </div>
         </fieldset>
diff --git a/modules/layout/tpl/layout_info_view.html b/modules/layout/tpl/layout_info_view.html
index 7b8b51e4f..2e15be302 100644
--- a/modules/layout/tpl/layout_info_view.html
+++ b/modules/layout/tpl/layout_info_view.html
@@ -129,7 +129,7 @@
 					</block>
 					<block cond="$var->type == 'colorpicker'">
 						{@ $use_colorpicker = true; }
-						<input type="color" class="color-indicator" name="{$name}" id="{$name}" value="{$var->value}" />
+						<input type="color" class="rx-spectrum" name="{$name}" id="{$name}" value="{$var->value}" />
 						<p id="categoy_color_help" hidden style="margin:8px 0 0 0">{$lang->about_category_color}</p>
 					</block>
 					<p class="x_help-block">{$var->description}</p>
diff --git a/modules/module/tpl/skin_config.html b/modules/module/tpl/skin_config.html
index 4b338d3ac..a2de640b0 100644
--- a/modules/module/tpl/skin_config.html
+++ b/modules/module/tpl/skin_config.html
@@ -117,7 +117,7 @@
 					<!--// colorpicker-->
 					<div cond="$val->type == 'colorpicker'">
 						{@ $use_colorpicker = true; }
-						<input type="color" class="color-indicator" name="{$val->name}" id="{$val->name}" value="{$val->value}" />
+						<input type="color" class="rx-spectrum" name="{$val->name}" id="{$val->name}" value="{$val->value}" />
 						<p id="categoy_color_help" hidden style="margin:8px 0 0 0">{$lang->about_category_color}</p>
 					</div>
 					<a href="#about_{$val->name}" data-toggle class="x_icon-question-sign" cond="$val->description" style="vertical-align:top;margin-top:5px"|cond="$val->type == 'textarea'">{$lang->help}</a>
diff --git a/modules/widget/tpl/js/widget.js b/modules/widget/tpl/js/widget.js
index 02ccbe67c..68dea693c 100644
--- a/modules/widget/tpl/js/widget.js
+++ b/modules/widget/tpl/js/widget.js
@@ -669,7 +669,7 @@ function doShowWidgetSizeSetup(px, py, obj) {
 		if(el) {
 			$el.val(val);
 
-			if($el.hasClass('color-indicator')) {
+			if($el.hasClass('color-indicator') || $el.hasClass('rx-spectrum')) {
 				if(val != 'transparent') {
 					val = val.toUpperCase();
 					$el.css('background', '#' + val);
diff --git a/modules/widget/tpl/widget_generate_code.include.html b/modules/widget/tpl/widget_generate_code.include.html
index 0dc42a323..8d931af62 100644
--- a/modules/widget/tpl/widget_generate_code.include.html
+++ b/modules/widget/tpl/widget_generate_code.include.html
@@ -49,7 +49,7 @@
 				<input type="text" name="{$id}" />
 			</block>
 			<block cond="$var->type == 'color'">
-				<input type="color" name="{$id}" value="" id="{$id}" class="color-indicator" style="width:178px" />
+				<input type="color" name="{$id}" value="" id="{$id}" class="rx-spectrum" style="width:178px" />
 			</block>
 			<block cond="$var->type == 'textarea'">
 				<textarea cond="$var->type == 'textarea'" name="{$id}" id="{$id}" rows="8" cols="42"></textarea>
diff --git a/modules/widget/tpl/widget_layer.html b/modules/widget/tpl/widget_layer.html
index 0b2fb1df1..6f1a2c911 100644
--- a/modules/widget/tpl/widget_layer.html
+++ b/modules/widget/tpl/widget_layer.html
@@ -62,7 +62,7 @@
 							<option value="solid">{$lang->cmd_widget_border_solid}</option>
 							<option value="dotted">{$lang->cmd_widget_border_dotted}</option>
 						</select>
-						<input type="color" name="border_top_color" value="" class="color_input color-indicator" maxlength="7"/>
+						<input type="color" name="border_top_color" value="" class="color_input rx-spectrum" maxlength="7"/>
 					</td>
 				</tr>
 				<tr>
@@ -72,7 +72,7 @@
 							<option value="solid">{$lang->cmd_widget_border_solid}</option>
 							<option value="dotted">{$lang->cmd_widget_border_dotted}</option>
 						</select>
-						<input type="color" name="border_left_color" value="" class="color_input color-indicator" maxlength="7"/>
+						<input type="color" name="border_left_color" value="" class="color_input rx-spectrum" maxlength="7"/>
 					</td>
 					<td style="text-align:right">
 						<input type="number" name="border_right_thick" value="" class="small_input" /> px
@@ -80,7 +80,7 @@
 							<option value="solid">{$lang->cmd_widget_border_solid}</option>
 							<option value="dotted">{$lang->cmd_widget_border_dotted}</option>
 						</select>
-						<input type="color" name="border_right_color" value="" class="color_input color-indicator" maxlength="7"/>
+						<input type="color" name="border_right_color" value="" class="color_input rx-spectrum" maxlength="7"/>
 					</td>
 				</tr>
 				<tr>
@@ -90,12 +90,12 @@
 							<option value="solid">{$lang->cmd_widget_border_solid}</option>
 							<option value="dotted">{$lang->cmd_widget_border_dotted}</option>
 						</select>
-						<input type="color" name="border_bottom_color" value="" class="color_input color-indicator" maxlength="7"/>
+						<input type="color" name="border_bottom_color" value="" class="color_input rx-spectrum" maxlength="7"/>
 					</td>
 				</tr>
 				<tr>
 					<th>{$lang->cmd_widget_background_color}</th>
-					<td colspan="2"><input type="color" name="background_color" value="" class="input color-indicator" /></td>
+					<td colspan="2"><input type="color" name="background_color" value="" class="input rx-spectrum" /></td>
 				</tr>
 				<tr>
 					<th>{$lang->cmd_widget_background_image_url}</th>
diff --git a/modules/widget/tpl/widget_style_generate_code_in_page.html b/modules/widget/tpl/widget_style_generate_code_in_page.html
index 24b5a9607..ab3d1327e 100644
--- a/modules/widget/tpl/widget_style_generate_code_in_page.html
+++ b/modules/widget/tpl/widget_style_generate_code_in_page.html
@@ -72,7 +72,7 @@
 								<input type="text" name="{$id}" value="" class="lang_code" />
 							</div>
 	
-							<input cond="$var->type == 'color'" type="color" name="{$id}" class="color-indicator" />
+							<input cond="$var->type == 'color'" type="color" name="{$id}" class="rx-spectrum" />
 	
 							<div cond="$var->type == 'textarea'">
 								<textarea name="{$id}" rows="8" cols="42" class="lang_code"></textarea>