diff --git a/presentation/src/main/java/feature/themepicker/ThemePickerActivity.kt b/presentation/src/main/java/feature/themepicker/ThemePickerActivity.kt
index ad9982be..4f01f935 100644
--- a/presentation/src/main/java/feature/themepicker/ThemePickerActivity.kt
+++ b/presentation/src/main/java/feature/themepicker/ThemePickerActivity.kt
@@ -23,17 +23,17 @@ import android.support.v7.widget.LinearLayoutManager
 import com.moez.QKSMS.R
 import com.uber.autodispose.android.lifecycle.scope
 import com.uber.autodispose.kotlin.autoDisposable
-import injection.appComponent
-import common.util.extensions.pageScrolled
-import kotlinx.android.synthetic.main.theme_picker_activity.*
 import common.base.QkThemedActivity
+import common.util.extensions.setBackgroundTint
+import injection.appComponent
+import kotlinx.android.synthetic.main.theme_picker_activity.*
+import kotlinx.android.synthetic.main.theme_picker_hsl.*
 import javax.inject.Inject
 
 class ThemePickerActivity : QkThemedActivity<ThemePickerViewModel>(), ThemePickerView {
 
     override val viewModelClass = ThemePickerViewModel::class
     override val themeSelectedIntent by lazy { themeAdapter.colorSelected }
-    override val pageScrolledIntent by lazy { pager.pageScrolled() }
 
     @Inject lateinit var themeAdapter: ThemeAdapter
     @Inject lateinit var themePagerAdapter: ThemePagerAdapter
@@ -64,8 +64,7 @@ class ThemePickerActivity : QkThemedActivity<ThemePickerViewModel>(), ThemePicke
     }
 
     override fun render(state: ThemePickerState) {
-        rgbPicker.alpha = state.rgbAlpha
-        rgbPicker.setBackgroundColor(state.selectedColor)
+        hue.setBackgroundTint(state.hue)
 
         themeAdapter.threadId = state.threadId
         themeAdapter.selectedColor = state.selectedColor
diff --git a/presentation/src/main/java/feature/themepicker/ThemePickerState.kt b/presentation/src/main/java/feature/themepicker/ThemePickerState.kt
index 86023188..e946f81b 100644
--- a/presentation/src/main/java/feature/themepicker/ThemePickerState.kt
+++ b/presentation/src/main/java/feature/themepicker/ThemePickerState.kt
@@ -21,5 +21,5 @@ package feature.themepicker
 data class ThemePickerState(
         val threadId: Long = 0,
         val selectedColor: Int = -1,
-        val rgbAlpha: Float = 0f
+        val hue: Int = -1
 )
\ No newline at end of file
diff --git a/presentation/src/main/java/feature/themepicker/ThemePickerView.kt b/presentation/src/main/java/feature/themepicker/ThemePickerView.kt
index 89203d00..21931266 100644
--- a/presentation/src/main/java/feature/themepicker/ThemePickerView.kt
+++ b/presentation/src/main/java/feature/themepicker/ThemePickerView.kt
@@ -18,14 +18,11 @@
  */
 package feature.themepicker
 
-import common.util.extensions.PageScroll
-import io.reactivex.Observable
 import common.base.QkView
-import feature.themepicker.ThemePickerState
+import io.reactivex.Observable
 
 interface ThemePickerView : QkView<ThemePickerState> {
 
-    val pageScrolledIntent: Observable<PageScroll>
     val themeSelectedIntent: Observable<Int>
 
 }
\ No newline at end of file
diff --git a/presentation/src/main/java/feature/themepicker/ThemePickerViewModel.kt b/presentation/src/main/java/feature/themepicker/ThemePickerViewModel.kt
index d4448e02..986f9b5d 100644
--- a/presentation/src/main/java/feature/themepicker/ThemePickerViewModel.kt
+++ b/presentation/src/main/java/feature/themepicker/ThemePickerViewModel.kt
@@ -19,16 +19,14 @@
 package feature.themepicker
 
 import android.content.Intent
+import android.support.v4.graphics.ColorUtils
 import com.f2prateek.rx.preferences2.Preference
 import com.uber.autodispose.android.lifecycle.scope
 import com.uber.autodispose.kotlin.autoDisposable
-import injection.appComponent
-import util.Preferences
-import io.reactivex.rxkotlin.plusAssign
 import common.base.QkViewModel
-import feature.themepicker.ThemePickerState
-import feature.themepicker.ThemePickerView
-import java.util.concurrent.TimeUnit
+import injection.appComponent
+import io.reactivex.rxkotlin.plusAssign
+import util.Preferences
 import javax.inject.Inject
 
 class ThemePickerViewModel(intent: Intent) : QkViewModel<ThemePickerView, ThemePickerState>(ThemePickerState()) {
@@ -46,18 +44,21 @@ class ThemePickerViewModel(intent: Intent) : QkViewModel<ThemePickerView, ThemeP
         theme = prefs.theme(threadId)
 
         disposables += theme.asObservable()
-                .subscribe { color -> newState { it.copy(selectedColor = color) } }
+                .doOnNext { color -> newState { it.copy(selectedColor = color) } }
+                .map { color -> FloatArray(3).apply { ColorUtils.colorToHSL(color, this) } }
+                .map { hsl ->
+                    hsl.apply {
+                        this[1] = 1f
+                        this[2] = 0.5f
+                    }
+                }
+                .map { hsl -> ColorUtils.HSLToColor(hsl) }
+                .subscribe { hue -> newState { it.copy(hue = hue) } }
     }
 
     override fun bindView(view: ThemePickerView) {
         super.bindView(view)
 
-        view.pageScrolledIntent
-                .throttleFirst(16, TimeUnit.MILLISECONDS)
-                .map { (position, positionOffset) -> if (position == 0) positionOffset * positionOffset else 1f }
-                .autoDisposable(view.scope())
-                .subscribe { alpha -> newState { it.copy(rgbAlpha = alpha) } }
-
         view.themeSelectedIntent
                 .autoDisposable(view.scope())
                 .subscribe { color -> theme.set(color) }
diff --git a/presentation/src/main/res/drawable/color_picker_gradient.xml b/presentation/src/main/res/drawable/color_picker_gradient.xml
new file mode 100644
index 00000000..85161c91
--- /dev/null
+++ b/presentation/src/main/res/drawable/color_picker_gradient.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+
+    <corners android:radius="4dp" />
+
+    <gradient
+        android:endColor="#ff000000"
+        android:startColor="#00000000" />
+
+</shape>
\ No newline at end of file
diff --git a/presentation/src/main/res/layout/theme_picker_activity.xml b/presentation/src/main/res/layout/theme_picker_activity.xml
index a7624bd7..b947b177 100644
--- a/presentation/src/main/res/layout/theme_picker_activity.xml
+++ b/presentation/src/main/res/layout/theme_picker_activity.xml
@@ -29,9 +29,9 @@
         android:layout_width="match_parent"
         android:layout_height="40dp"
         android:orientation="horizontal"
-        android:visibility="gone"
         android:paddingEnd="12dp"
-        android:paddingStart="12dp" />
+        android:paddingStart="12dp"
+        android:visibility="gone" />
 
     <FrameLayout
         android:layout_width="match_parent"
@@ -48,12 +48,11 @@
                 android:layout_width="match_parent"
                 android:layout_height="match_parent" />
 
-            <FrameLayout
+            <include
                 android:id="@+id/rgbPicker"
+                layout="@layout/theme_picker_hsl"
                 android:layout_width="match_parent"
-                android:layout_height="match_parent">
-
-            </FrameLayout>
+                android:layout_height="match_parent" />
 
         </android.support.v4.view.ViewPager>
 
diff --git a/presentation/src/main/res/layout/theme_picker_hsl.xml b/presentation/src/main/res/layout/theme_picker_hsl.xml
new file mode 100644
index 00000000..299f0685
--- /dev/null
+++ b/presentation/src/main/res/layout/theme_picker_hsl.xml
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent">
+
+    <View
+        android:id="@+id/hue"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:layout_marginEnd="24dp"
+        android:layout_marginStart="24dp"
+        android:layout_marginTop="24dp"
+        android:background="@drawable/color_picker_gradient"
+        app:layout_constraintDimensionRatio="1"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        tools:backgroundTint="@color/tools_theme" />
+
+    <View
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:background="@drawable/color_picker_gradient"
+        android:rotation="90"
+        app:layout_constraintBottom_toBottomOf="@id/hue"
+        app:layout_constraintEnd_toEndOf="@id/hue"
+        app:layout_constraintStart_toStartOf="@id/hue"
+        app:layout_constraintTop_toTopOf="@id/hue" />
+
+</android.support.constraint.ConstraintLayout>
\ No newline at end of file