diff --git a/mainapp/tool_views.py b/mainapp/tool_views.py
index 5fc2e72..361d5cd 100644
--- a/mainapp/tool_views.py
+++ b/mainapp/tool_views.py
@@ -24,6 +24,7 @@
 import sys
 from django.core.files.storage import FileSystemStorage
 import time
+import cv2 as cv
 
 
 
@@ -69,6 +70,31 @@ def convert_file(request):
 
         return HttpResponse('Error while converting', status=404)
 
+def convert_image(request):
+    if request.method=='POST':
+        image_to_convert = request.FILES.get('image')
+        convert_to = request.POST.get('convert_to')
+
+        filename, ext = os.path.splitext(image_to_convert.name)
+        outputfile_name = '{0}.{1}'.format(filename, convert_to)
+        input_file_path = os.path.join(settings.MEDIA_ROOT, 'cartoonify/input', image_to_convert.name)
+        output_file_path = os.path.join(settings.MEDIA_ROOT, 'cartoonify/output', outputfile_name)
+        path = default_storage.save(input_file_path, ContentFile(image_to_convert.read()))
+
+        inpImage = cv.imread(input_file_path,1)
+        inpImage2 = inpImage
+        imgBilFilter = cv.bilateralFilter(inpImage2, 9,9,7)
+        imgGray = cv.cvtColor(imgBilFilter, cv.COLOR_RGB2GRAY)
+        imgfilter = cv.medianBlur(imgGray, 5)
+        imgEdge = cv.adaptiveThreshold(imgfilter, 255, cv.ADAPTIVE_THRESH_MEAN_C,
+                                            cv.THRESH_BINARY, 9, 2);
+        imgColored = cv.cvtColor(imgEdge, cv.COLOR_GRAY2RGB)
+        imgFinal = cv.bitwise_and(inpImage, imgColored)
+        cv.imwrite(settings.MEDIA_ROOT+"/cartoonify/output/convertedImg.png", imgFinal)
+        return render(request,'tools/image_tools/cartoonify_output.html', {'input_file': input_file_path, 
+           'output_file': settings.MEDIA_ROOT+"/cartoonify/output/convertedImg.png"})
+        
+    return HttpResponse('Error while converting', status=404)
 
 def jpg_to_png(request):
     if request.method=="POST":
@@ -187,4 +213,4 @@ def view_generated_pdf(request,path):
             return response
     raise HttpResponse('file Not Found')        
  
-    
\ No newline at end of file
+    
diff --git a/mainapp/urls.py b/mainapp/urls.py
index fa4be1f..00fd4f8 100644
--- a/mainapp/urls.py
+++ b/mainapp/urls.py
@@ -5,6 +5,7 @@
 from django.conf import settings
 
 urlpatterns = [
+url(r'^convert_image/$',tool_views.convert_image,name='convert_image'),
 url(r'^convert_file/$',tool_views.convert_file,name='convert_file'),
 url(r'^minify/$', tool_views.show_minified_js,name = 'show_minified_js'),
 url(r'^minify_file/$', tool_views.download_minified_file, name = 'download_minified_JS'),
diff --git a/templates/tools/Colors_tools/rgb2hsv.html b/templates/tools/Colors_tools/rgb2hsv.html
index 3349526..5ff659a 100644
--- a/templates/tools/Colors_tools/rgb2hsv.html
+++ b/templates/tools/Colors_tools/rgb2hsv.html
@@ -20,9 +20,12 @@
                 <th>B</th>
                 </tr>
                 <tr>
-                <td><input type="text" name="Rinp" size = "3" placeholder="R"></input></td>
-                <td><input type="text" name="Ginp" size = "3" placeholder="G"></input></td>
-                <td><input type="text" name="Binp" size = "3" placeholder="B"></input></td>
+                <td><input type="text" name="Rinp" size = "3" placeholder="R" onkeyup="showColor()"></input></td>
+                <td><input type="text" name="Ginp" size = "3" placeholder="G" onkeyup="showColor()"></input></td>
+                <td><input type="text" name="Binp" size = "3" placeholder="B" onkeyup="showColor()"></input></td>
+                </tr>
+                <tr>
+                  <td colspan="3" height="60" id="rgbBox"></td>
                 </tr>
             </table>
         </div>
@@ -58,6 +61,15 @@
 
     var b = document.getElementById("RGB").rows[1].cells[2].firstChild.value;
 
+    if ( r == null || g == null || b == null || isNaN(r) || isNaN(g)|| isNaN(b) ) {
+      alert ('Please enter numeric RGB values!');
+      return;
+    }
+    if (r < 0 || g < 0 || b < 0 || r > 255 || g > 255 || b > 255) {
+      alert ('RGB values must be in the range 0 to 255.');
+      return;
+    }
+
     r = r / 255;
     g = g / 255;
     b = b / 255;
@@ -68,14 +80,14 @@
     v = rgbMax;
 
     var delta = rgbMax - rgbMin;
-  
+    
     if(rgbMax != 0)
       s = delta / rgbMax;
     else
     {
       s = 0;
       h = 0;
-      //alert("Input values are not correct");
+      return;
     }
 
     if(r == rgbMax)
@@ -92,9 +104,16 @@
     document.getElementById("HSV").rows[1].cells[0].firstChild.value = h;
     document.getElementById("HSV").rows[1].cells[1].firstChild.value = (s * 100).toFixed(2);
     document.getElementById("HSV").rows[1].cells[2].firstChild.value = (v * 100).toFixed(2);
+ }
 
+  function showColor(){
 
+    var r = document.getElementById("RGB").rows[1].cells[0].firstChild.value;
+
+    var g = document.getElementById("RGB").rows[1].cells[1].firstChild.value;
+
+    var b = document.getElementById("RGB").rows[1].cells[2].firstChild.value;
 
-  }
+    document.getElementById("RGB").rows[2].cells[0].style.backgroundColor =  'rgb('+r+' , '+g+' , '+b+')';  
   </script>
 {% endblock %}
diff --git a/templates/tools/image_tools/cartoonify.html b/templates/tools/image_tools/cartoonify.html
new file mode 100644
index 0000000..7e29005
--- /dev/null
+++ b/templates/tools/image_tools/cartoonify.html
@@ -0,0 +1,34 @@
+{% extends "tools/tool_base.html" %}
+{% load staticfiles %}
+
+
+
+{% block tool %}
+
+<form  action="/convert_image/" id="form" method="post" enctype="multipart/form-data">
+  {%csrf_token%}
+  <input type="file" id="image" accept=".png" name="image">
+  <input type="hidden" name="convert_to" value="cimage"/>
+  <button type="submit">Convert</button>
+</form>
+
+{% endblock %}
+
+
+{% block scripts %}
+<script type="text/javascript">
+  $("#form").submit(function(e){
+    var nameImage = $("#image").val().cartoonify();
+    //cek format name with jpg or jpeg
+    if(!(nameImage.match(/doc.*/)))
+        {
+        //if with e.preventDefault not run form
+        e.preventDefault();
+        //give alert format file is wrong
+        alert("file format is not appropriate");
+    }
+});
+</script>
+
+
+{% endblock %}
diff --git a/templates/tools/image_tools/cartoonify_output.html b/templates/tools/image_tools/cartoonify_output.html
new file mode 100644
index 0000000..7e56dd4
--- /dev/null
+++ b/templates/tools/image_tools/cartoonify_output.html
@@ -0,0 +1,32 @@
+{% extends "tools/tool_base.html" %}
+{% load staticfiles %}
+
+
+
+{% block tool %}
+
+			<table style="width: 20%" id="imgDisplay" align="center">
+                <tr>
+                <th>Input</th>
+                <th>Output</th>
+                </tr>
+                <tr>
+                <td style = "border: 2px solid black"><img src="{{MEDIA_URL}}cartoonify/input/inp.png" /></td>
+                <td style = "border: 2px solid black"><img src="{{MEDIA_URL}}cartoonify/output/convertedImg.png" alt="output image" /></td>
+                </tr>
+                <tr>
+                	<td><button type="button" class="btn btn-flat btn-lg " onclick= "a()">Try another</button></td>
+                	<td><button><a href="{{MEDIA_URL}}cartoonify/output/convertedImg.png" download="">Download</a></button></td>
+                </tr>
+            </table>
+{% endblock %}
+
+
+{% block scripts %}
+    <script type="text/javascript">
+        function a()
+            {
+            	window.location.href="cartoonify.html";
+        	}
+    </script>
+{% endblock %}