diff --git a/presentation/src/main/java/feature/themepicker/HSLPickerView.kt b/presentation/src/main/java/feature/themepicker/HSVPickerView.kt
similarity index 64%
rename from presentation/src/main/java/feature/themepicker/HSLPickerView.kt
rename to presentation/src/main/java/feature/themepicker/HSVPickerView.kt
index 0bb70c83..88b04e3f 100644
--- a/presentation/src/main/java/feature/themepicker/HSLPickerView.kt
+++ b/presentation/src/main/java/feature/themepicker/HSVPickerView.kt
@@ -19,25 +19,29 @@
 package feature.themepicker
 
 import android.content.Context
+import android.graphics.Color
 import android.support.constraint.ConstraintLayout
-import android.support.v4.graphics.ColorUtils
 import android.util.AttributeSet
 import android.view.MotionEvent
 import android.view.View
 import com.moez.QKSMS.R
 import common.util.extensions.setBackgroundTint
 import common.util.extensions.within
-import kotlinx.android.synthetic.main.hsl_picker_view.view.*
+import kotlinx.android.synthetic.main.hsv_picker_view.view.*
 
-class HSLPickerView @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null) : ConstraintLayout(context, attrs) {
+class HSVPickerView @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null) : ConstraintLayout(context, attrs) {
 
-    private var swatchX = 0f
-    private var swatchY = 0f
+    private var min: Float = 0f
+    private var max = 0f
 
     init {
-        View.inflate(context, R.layout.hsl_picker_view, this)
+        View.inflate(context, R.layout.hsv_picker_view, this)
+
+        var swatchX = 0f
+        var swatchY = 0f
 
         saturation.setOnTouchListener { _, event ->
+            setupBounds()
             when (event.action) {
                 MotionEvent.ACTION_DOWN -> {
                     swatchX = event.x - event.rawX
@@ -45,9 +49,6 @@ class HSLPickerView @JvmOverloads constructor(context: Context, attrs: Attribute
                 }
 
                 MotionEvent.ACTION_MOVE -> {
-                    val min = saturation.x - swatch.width / 2
-                    val max = min + saturation.width
-
                     swatch.x = (event.rawX + swatchX + min).within(min, max)
                     swatch.y = (event.rawY + swatchY + min).within(min, max)
                 }
@@ -58,16 +59,30 @@ class HSLPickerView @JvmOverloads constructor(context: Context, attrs: Attribute
         }
     }
 
-    fun setColor(color: Int) {
-        swatchPreview.setBackgroundTint(color)
-
-        val hsl = FloatArray(3).apply {
-            ColorUtils.colorToHSL(color, this)
-            this[1] = 1f
-            this[2] = 0.5f
+    private fun setupBounds() {
+        if (min == 0f || max == 0f) {
+            min = saturation.x - swatch.width / 2
+            max = min + saturation.width
         }
+    }
 
-        saturation.setBackgroundTint(ColorUtils.HSLToColor(hsl))
+    fun setColor(color: Int) {
+
+        // Convert the rgb color to HSV
+        val hsv = FloatArray(3).apply { Color.colorToHSV(color, this) }
+
+        // Set the position of the swatch
+        setupBounds()
+        val range = max - min
+        swatch.x = range * hsv[1] + min
+        swatch.y = range * (1 - hsv[2]) + min
+
+        // Change the HSV saturation and lightness, for tinting the gradient
+        hsv[1] = 1f
+        hsv[2] = 1f
+
+        swatchPreview.setBackgroundTint(color)
+        saturation.setBackgroundTint(Color.HSVToColor(hsv))
     }
 
 }
\ No newline at end of file
diff --git a/presentation/src/main/java/feature/themepicker/ThemePickerActivity.kt b/presentation/src/main/java/feature/themepicker/ThemePickerActivity.kt
index fb912c3d..2987996b 100644
--- a/presentation/src/main/java/feature/themepicker/ThemePickerActivity.kt
+++ b/presentation/src/main/java/feature/themepicker/ThemePickerActivity.kt
@@ -26,7 +26,7 @@ import com.uber.autodispose.kotlin.autoDisposable
 import common.base.QkThemedActivity
 import injection.appComponent
 import kotlinx.android.synthetic.main.theme_picker_activity.*
-import kotlinx.android.synthetic.main.theme_picker_hsl.*
+import kotlinx.android.synthetic.main.theme_picker_hsv.*
 import javax.inject.Inject
 
 
diff --git a/presentation/src/main/res/layout/hsl_picker_view.xml b/presentation/src/main/res/layout/hsv_picker_view.xml
similarity index 97%
rename from presentation/src/main/res/layout/hsl_picker_view.xml
rename to presentation/src/main/res/layout/hsv_picker_view.xml
index 9336e376..2aaf3799 100644
--- a/presentation/src/main/res/layout/hsl_picker_view.xml
+++ b/presentation/src/main/res/layout/hsv_picker_view.xml
@@ -4,7 +4,7 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    tools:parentTag="feature.themepicker.HSLPickerView">
+    tools:parentTag="feature.themepicker.HSVPickerView">
 
     <View
         android:id="@+id/saturation"
diff --git a/presentation/src/main/res/layout/theme_picker_activity.xml b/presentation/src/main/res/layout/theme_picker_activity.xml
index b947b177..6e9fadad 100644
--- a/presentation/src/main/res/layout/theme_picker_activity.xml
+++ b/presentation/src/main/res/layout/theme_picker_activity.xml
@@ -50,7 +50,7 @@
 
             <include
                 android:id="@+id/rgbPicker"
-                layout="@layout/theme_picker_hsl"
+                layout="@layout/theme_picker_hsv"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent" />
 
diff --git a/presentation/src/main/res/layout/theme_picker_hsl.xml b/presentation/src/main/res/layout/theme_picker_hsv.xml
similarity index 93%
rename from presentation/src/main/res/layout/theme_picker_hsl.xml
rename to presentation/src/main/res/layout/theme_picker_hsv.xml
index abf18c11..1d3f1a7f 100644
--- a/presentation/src/main/res/layout/theme_picker_hsl.xml
+++ b/presentation/src/main/res/layout/theme_picker_hsv.xml
@@ -4,7 +4,7 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent">
 
-    <feature.themepicker.HSLPickerView
+    <feature.themepicker.HSVPickerView
         android:id="@+id/picker"
         android:layout_width="0dp"
         android:layout_height="wrap_content"