diff --git a/modules/editor/components/colorpicker_bg/tpl/popup.css b/modules/editor/components/colorpicker_bg/tpl/popup.css
index 3e3fcb401..c22744247 100644
--- a/modules/editor/components/colorpicker_bg/tpl/popup.css
+++ b/modules/editor/components/colorpicker_bg/tpl/popup.css
@@ -8,6 +8,7 @@ img.preview_color {
   width:30px;
   height:16px;
   border:1px solid #000000;
+  background-color:#FFFFFF;
 }
 
 img.color_icon {
diff --git a/modules/editor/components/colorpicker_bg/tpl/popup.html b/modules/editor/components/colorpicker_bg/tpl/popup.html
index 984a242ed..93b7d825f 100644
--- a/modules/editor/components/colorpicker_bg/tpl/popup.html
+++ b/modules/editor/components/colorpicker_bg/tpl/popup.html
@@ -11,7 +11,7 @@
     <tr>
       <td><img src="blank.gif" alt="blank" class="preview_color" id="preview_color" /></td>
       <td>#</td>
-      <td><input type="text" id="color_input" size="6" maxlength="6" class="popup_input" /></td>
+      <td><input type="text" id="color_input" size="6" maxlength="6" class="popup_input" value="FFFFFF" /></td>
       <td><input type="submit" value="{$lang->cmd_select}" class="popup_submit"/></td>
     </tr>
     </table>
diff --git a/modules/editor/components/colorpicker_bg/tpl/popup.js b/modules/editor/components/colorpicker_bg/tpl/popup.js
index 1e218ade6..1880ed421 100644
--- a/modules/editor/components/colorpicker_bg/tpl/popup.js
+++ b/modules/editor/components/colorpicker_bg/tpl/popup.js
@@ -1,5 +1,3 @@
-var color_list = new Array('000000','993300','333300','003300','003366','000080','333399','333333','800000','FF6600','808000','008000','008080','0000FF','666699','808080','FF0000','FF9900','99CC00','339966','33CCCC','3366FF','800080','969696','FF00FF','FFCC00','FFFF00','00FF00','00FFFF','00CCFF','993366','c0c0c0','FF99CC','FFCC99','FFFF99','CCFFCC','CCFFFF','99CCFF','CC99FF','FFFFFF');
-
 /* 부모창의 위지윅 에디터의 선택된 영역의 글자색을 변경 */
 function applyColor() {
   var code = xGetElementById("color_input").value;
diff --git a/modules/editor/components/colorpicker_text/tpl/popup.css b/modules/editor/components/colorpicker_text/tpl/popup.css
index 92bcb5494..d96b25d31 100644
--- a/modules/editor/components/colorpicker_text/tpl/popup.css
+++ b/modules/editor/components/colorpicker_text/tpl/popup.css
@@ -1,12 +1,44 @@
+.colorpicker {
+  width:160px; 
+  padding:5px;
+  clear:both;
+}
+
+img.preview_color {
+  width:30px;
+  height:16px;
+  border:1px solid #000000;
+  background-color:#000000;
+}
+
 img.color_icon {
-  width:15px;
-  height:15px;
+  width:14px;
+  height:14px;
   border:1px solid #FFFFFF;
 }
 
 img.color_icon_over {
-  width:15px;
-  height:15px;
+  width:14px;
+  height:14px;
   border:1px solid #000000;
   cursor:pointer;
 }
+
+.input_area {
+  width:160px; 
+  padding:5px;
+  font-family:tahoma;
+  font-size:8pt;
+  clear:both;
+  text-align:center;
+}
+
+.popup_input {
+  border:1px solid #AAAAAA;
+  height:14px;
+}
+
+.popup_submit {
+  border:1px solid #AAAAAA;
+  height:18px;
+}
diff --git a/modules/editor/components/colorpicker_text/tpl/popup.html b/modules/editor/components/colorpicker_text/tpl/popup.html
index 1513b92ba..f3e1135a8 100644
--- a/modules/editor/components/colorpicker_text/tpl/popup.html
+++ b/modules/editor/components/colorpicker_text/tpl/popup.html
@@ -1,6 +1,19 @@
 <!--%import("popup.js")-->
 <!--%import("popup.css")-->
-<script type='text/javascript'>
-  var blank_img_src = "{$tpl_path}/blank.gif";
-  printColor();
-</script>
+<div class="colorpicker">
+  <script type='text/javascript'>
+    printColor("{$tpl_path}/blank.gif");
+  </script>
+</div>
+<div class="input_area">
+  <form action="./" method="get" onsubmit="return applyColor()">
+    <table border="0">
+    <tr>
+      <td><img src="blank.gif" alt="blank" class="preview_color" id="preview_color" /></td>
+      <td>#</td>
+      <td><input type="text" id="color_input" size="6" maxlength="6" class="popup_input" value="000000" /></td>
+      <td><input type="submit" value="{$lang->cmd_select}" class="popup_submit"/></td>
+    </tr>
+    </table>
+  </form>
+</div>
diff --git a/modules/editor/components/colorpicker_text/tpl/popup.js b/modules/editor/components/colorpicker_text/tpl/popup.js
index bcf0ded5a..fe215daa6 100644
--- a/modules/editor/components/colorpicker_text/tpl/popup.js
+++ b/modules/editor/components/colorpicker_text/tpl/popup.js
@@ -1,16 +1,41 @@
-var color_list = new Array('000000','993300','333300','003300','003366','000080','333399','333333','800000','FF6600','808000','008000','008080','0000FF','666699','808080','FF0000','FF9900','99CC00','339966','33CCCC','3366FF','800080','969696','FF00FF','FFCC00','FFFF00','00FF00','00FFFF','00CCFF','993366','c0c0c0','FF99CC','FFCC99','FFFF99','CCFFCC','CCFFFF','99CCFF','CC99FF','FFFFFF');
+/* 부모창의 위지윅 에디터의 선택된 영역의 글자색을 변경 */
+function applyColor() {
+  var code = xGetElementById("color_input").value;
 
-function setColor(color) {
   opener.editorFocus(opener.editorPrevSrl);
-  opener.editorSetForeColor("#"+color);
+  opener.editorSetForeColor("#"+code);
   opener.editorFocus(opener.editorPrevSrl);
   self.close();
 }
 
-function printColor() {
+/* 색상 클릭시 */
+function select_color(code) {
+  xGetElementById("color_input").value = code;
+  xGetElementById("preview_color").style.backgroundColor = "#"+code;
+}
+
+/* 색상표를 출력 */
+function printColor(blank_img_src) {
+  var colorTable = new Array('22','44','66','88','AA','CC','EE');
   var html = "";
-  for(var i=0;i<color_list.length;i++) {
-    html += "<div style=\"float:left;background-color:#"+color_list[i]+"\"><img src=\""+blank_img_src+"\" class=\"color_icon\" onmouseover=\"this.className='color_icon_over'\" onmouseout=\"this.className='color_icon'\" onclick=\"setColor('"+color_list[i]+"')\" alt=\"color\" \/><\/div>";
+
+  for(var i=0;i<8;i+=1) html += printColorBlock(i.toString(16)+i.toString(16)+i.toString(16)+i.toString(16)+i.toString(16)+i.toString(16), blank_img_src);
+
+  for(var i=0; i<colorTable.length; i+=3) {
+    for(var j=0; j<colorTable.length; j+=2) {
+      for(var k=0; k<colorTable.length; k++) {
+        var code = colorTable[i] + colorTable[j] + colorTable[k];
+        html += printColorBlock(code, blank_img_src);
+      }
+    }
   }
+
+  for(var i=8;i<16;i+=1) html += printColorBlock(i.toString(16)+i.toString(16)+i.toString(16)+i.toString(16)+i.toString(16)+i.toString(16), blank_img_src);
+
   document.write(html);
 }
+
+/* 개별 색상 block 출력 함수 */
+function printColorBlock(code, blank_img_src) {
+    return "<div style=\"float:left;background-color:#"+code+"\"><img src=\""+blank_img_src+"\" class=\"color_icon\" onmouseover=\"this.className='color_icon_over'\" onmouseout=\"this.className='color_icon'\" onclick=\"select_color('"+code+"')\" alt=\"color\" \/><\/div>";
+}
diff --git a/modules/editor/components/emoticon/tpl/popup.css b/modules/editor/components/emoticon/tpl/popup.css
new file mode 100644
index 000000000..b94734a2a
--- /dev/null
+++ b/modules/editor/components/emoticon/tpl/popup.css
@@ -0,0 +1,9 @@
+#emoticon_area {
+  width:230px;
+  padding:10px 0px 10px 0px;
+  text-align:center;
+}
+
+#emoticon_area img {
+  margin:2px;
+}
diff --git a/modules/editor/components/emoticon/tpl/popup.html b/modules/editor/components/emoticon/tpl/popup.html
index f05a6b179..55181dbb2 100644
--- a/modules/editor/components/emoticon/tpl/popup.html
+++ b/modules/editor/components/emoticon/tpl/popup.html
@@ -1,5 +1,8 @@
 <!--%import("popup.js")-->
+<!--%import("popup.css")-->
 
+<div id="emoticon_area">
 <!--@foreach($emoticon_list as $emoticon)-->
 <img src="images/{$emoticon}" alt="emoticon" onclick="insertImage(this)" style="cursor:pointer;" />
 <!--@end-->
+</div>
diff --git a/modules/editor/components/emoticon/tpl/popup.js b/modules/editor/components/emoticon/tpl/popup.js
index 409692f93..5cff7e7d5 100644
--- a/modules/editor/components/emoticon/tpl/popup.js
+++ b/modules/editor/components/emoticon/tpl/popup.js
@@ -3,4 +3,6 @@ function insertImage(obj) {
 
     opener.editorInsertEmoticon(obj);
     opener.editorFocus(opener.editorPrevSrl);
+
+    self.close();
 }