diff --git a/res/layout/color_option_2.xml b/res/layout/color_option_2.xml
index dcedaa3..8bacd99 100644
--- a/res/layout/color_option_2.xml
+++ b/res/layout/color_option_2.xml
@@ -42,50 +42,11 @@
             android:background="@drawable/option_item_background"
             android:importantForAccessibility="no" />
 
-        <FrameLayout
-            android:id="@id/foreground"
+        <com.android.customization.picker.color.ui.view.ColorOptionIconView
+            android:id="@+id/foreground"
             android:layout_width="match_parent"
-            android:layout_height="match_parent">
-            <ImageView
-                android:id="@+id/color_preview_0"
-                android:layout_width="@dimen/component_color_chip_small_radius_default2"
-                android:layout_height="@dimen/component_color_chip_small_radius_default2"
-                android:layout_gravity="center"
-                android:layout_marginRight="@dimen/color_seed_chip_margin2"
-                android:layout_marginBottom="@dimen/color_seed_chip_margin2"
-                android:src="@drawable/color_chip_seed_filled0"
-                android:importantForAccessibility="no"/>
-
-            <ImageView
-                android:id="@+id/color_preview_1"
-                android:layout_width="@dimen/component_color_chip_small_radius_default2"
-                android:layout_height="@dimen/component_color_chip_small_radius_default2"
-                android:layout_gravity="center"
-                android:layout_marginLeft="@dimen/color_seed_chip_margin2"
-                android:layout_marginBottom="@dimen/color_seed_chip_margin2"
-                android:src="@drawable/color_chip_seed_filled2"
-                android:importantForAccessibility="no"/>
-
-            <ImageView
-                android:id="@+id/color_preview_2"
-                android:layout_width="@dimen/component_color_chip_small_radius_default2"
-                android:layout_height="@dimen/component_color_chip_small_radius_default2"
-                android:layout_gravity="center"
-                android:layout_marginRight="@dimen/color_seed_chip_margin2"
-                android:layout_marginTop="@dimen/color_seed_chip_margin2"
-                android:src="@drawable/color_chip_seed_filled1"
-                android:importantForAccessibility="no"/>
-
-            <ImageView
-                android:id="@+id/color_preview_3"
-                android:layout_width="@dimen/component_color_chip_small_radius_default2"
-                android:layout_height="@dimen/component_color_chip_small_radius_default2"
-                android:layout_gravity="center"
-                android:layout_marginLeft="@dimen/color_seed_chip_margin2"
-                android:layout_marginTop="@dimen/color_seed_chip_margin2"
-                android:src="@drawable/color_chip_seed_filled3"
-                android:importantForAccessibility="no" />
-        </FrameLayout>
+            android:layout_height="match_parent"
+            android:layout_margin="@dimen/color_seed_chip_margin2"/>
     </FrameLayout>
 
     <TextView
diff --git a/res/layout/color_option_no_background.xml b/res/layout/color_option_no_background.xml
index 5416648..6bdbc15 100644
--- a/res/layout/color_option_no_background.xml
+++ b/res/layout/color_option_no_background.xml
@@ -34,63 +34,17 @@
         constraint percentage is sized to leave a padding for the outer selection outline,
         proportionate to 2dp for a 40dp color wheel
     -->
-    <androidx.constraintlayout.widget.ConstraintLayout
+    <com.android.customization.picker.color.ui.view.ColorOptionIconView
         android:id="@+id/option_tile"
         android:layout_width="0dp"
         android:layout_height="0dp"
         android:layout_gravity="center"
-        android:gravity="center"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintDimensionRatio="1:1"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent"
-        app:layout_constraintWidth_percent="0.909">
-
-        <ImageView
-            android:id="@+id/color_preview_0"
-            android:layout_width="0dp"
-            android:layout_height="0dp"
-            android:adjustViewBounds="true"
-            android:src="@drawable/color_chip_seed_filled0"
-            app:layout_constraintHeight_percent=".505"
-            app:layout_constraintLeft_toLeftOf="parent"
-            app:layout_constraintTop_toTopOf="parent"
-            app:layout_constraintWidth_percent=".505" />
-
-        <ImageView
-            android:id="@+id/color_preview_1"
-            android:layout_width="0dp"
-            android:layout_height="0dp"
-            android:adjustViewBounds="true"
-            android:src="@drawable/color_chip_seed_filled2"
-            app:layout_constraintHeight_percent=".505"
-            app:layout_constraintRight_toRightOf="parent"
-            app:layout_constraintTop_toTopOf="parent"
-            app:layout_constraintWidth_percent=".505" />
-
-        <ImageView
-            android:id="@+id/color_preview_2"
-            android:layout_width="0dp"
-            android:layout_height="0dp"
-            android:adjustViewBounds="true"
-            android:src="@drawable/color_chip_seed_filled1"
-            app:layout_constraintHeight_percent=".505"
-            app:layout_constraintLeft_toLeftOf="parent"
-            app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintWidth_percent=".505" />
-
-        <ImageView
-            android:id="@+id/color_preview_3"
-            android:layout_width="0dp"
-            android:layout_height="0dp"
-            android:adjustViewBounds="true"
-            android:src="@drawable/color_chip_seed_filled3"
-            app:layout_constraintHeight_percent=".505"
-            app:layout_constraintRight_toRightOf="parent"
-            app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintWidth_percent=".505" />
-    </androidx.constraintlayout.widget.ConstraintLayout>
+        app:layout_constraintWidth_percent="0.909" />
 
     <ImageView
         android:id="@+id/option_selected"
diff --git a/src/com/android/customization/picker/clock/ui/binder/ClockSettingsBinder.kt b/src/com/android/customization/picker/clock/ui/binder/ClockSettingsBinder.kt
index 619dd6d..65631cc 100644
--- a/src/com/android/customization/picker/clock/ui/binder/ClockSettingsBinder.kt
+++ b/src/com/android/customization/picker/clock/ui/binder/ClockSettingsBinder.kt
@@ -142,7 +142,11 @@
                                     (view.resources.configuration.uiMode and
                                         Configuration.UI_MODE_NIGHT_MASK ==
                                         Configuration.UI_MODE_NIGHT_YES)
-                                ColorOptionIconBinder.bind(item, payload, darkMode)
+                                ColorOptionIconBinder.bind(
+                                    item.requireViewById(R.id.foreground),
+                                    payload,
+                                    darkMode
+                                )
                                 OptionItemBinder.bind(
                                     view = item,
                                     viewModel = colorOptions[index],
diff --git a/src/com/android/customization/picker/color/ui/binder/ColorOptionIconBinder.kt b/src/com/android/customization/picker/color/ui/binder/ColorOptionIconBinder.kt
index d238180..93fc193 100644
--- a/src/com/android/customization/picker/color/ui/binder/ColorOptionIconBinder.kt
+++ b/src/com/android/customization/picker/color/ui/binder/ColorOptionIconBinder.kt
@@ -17,41 +17,29 @@
 
 package com.android.customization.picker.color.ui.binder
 
-import android.graphics.BlendMode
-import android.graphics.BlendModeColorFilter
-import android.view.ViewGroup
-import android.widget.ImageView
+import com.android.customization.picker.color.ui.view.ColorOptionIconView
 import com.android.customization.picker.color.ui.viewmodel.ColorOptionIconViewModel
-import com.android.wallpaper.R
 
 object ColorOptionIconBinder {
     fun bind(
-        view: ViewGroup,
+        view: ColorOptionIconView,
         viewModel: ColorOptionIconViewModel,
         darkTheme: Boolean,
     ) {
-        val color0View: ImageView = view.requireViewById(R.id.color_preview_0)
-        val color1View: ImageView = view.requireViewById(R.id.color_preview_1)
-        val color2View: ImageView = view.requireViewById(R.id.color_preview_2)
-        val color3View: ImageView = view.requireViewById(R.id.color_preview_3)
         if (darkTheme) {
-            color0View.drawable.colorFilter =
-                BlendModeColorFilter(viewModel.darkThemeColor0, BlendMode.SRC)
-            color1View.drawable.colorFilter =
-                BlendModeColorFilter(viewModel.darkThemeColor1, BlendMode.SRC)
-            color2View.drawable.colorFilter =
-                BlendModeColorFilter(viewModel.darkThemeColor2, BlendMode.SRC)
-            color3View.drawable.colorFilter =
-                BlendModeColorFilter(viewModel.darkThemeColor3, BlendMode.SRC)
+            view.bindColor(
+                viewModel.darkThemeColor0,
+                viewModel.darkThemeColor1,
+                viewModel.darkThemeColor2,
+                viewModel.darkThemeColor3,
+            )
         } else {
-            color0View.drawable.colorFilter =
-                BlendModeColorFilter(viewModel.lightThemeColor0, BlendMode.SRC)
-            color1View.drawable.colorFilter =
-                BlendModeColorFilter(viewModel.lightThemeColor1, BlendMode.SRC)
-            color2View.drawable.colorFilter =
-                BlendModeColorFilter(viewModel.lightThemeColor2, BlendMode.SRC)
-            color3View.drawable.colorFilter =
-                BlendModeColorFilter(viewModel.lightThemeColor3, BlendMode.SRC)
+            view.bindColor(
+                viewModel.darkThemeColor0,
+                viewModel.darkThemeColor1,
+                viewModel.darkThemeColor2,
+                viewModel.darkThemeColor3,
+            )
         }
     }
 }
diff --git a/src/com/android/customization/picker/color/ui/binder/ColorPickerBinder.kt b/src/com/android/customization/picker/color/ui/binder/ColorPickerBinder.kt
index 452e8b6..3dba27e 100644
--- a/src/com/android/customization/picker/color/ui/binder/ColorPickerBinder.kt
+++ b/src/com/android/customization/picker/color/ui/binder/ColorPickerBinder.kt
@@ -19,7 +19,6 @@
 
 import android.content.res.Configuration
 import android.view.View
-import android.view.ViewGroup
 import android.widget.TextView
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.LifecycleOwner
@@ -28,6 +27,7 @@
 import androidx.recyclerview.widget.LinearLayoutManager
 import androidx.recyclerview.widget.RecyclerView
 import com.android.customization.picker.color.ui.adapter.ColorTypeTabAdapter
+import com.android.customization.picker.color.ui.view.ColorOptionIconView
 import com.android.customization.picker.color.ui.viewmodel.ColorOptionIconViewModel
 import com.android.customization.picker.color.ui.viewmodel.ColorPickerViewModel
 import com.android.customization.picker.common.ui.view.ItemSpacing
@@ -63,11 +63,11 @@
                 layoutResourceId = R.layout.color_option_2,
                 lifecycleOwner = lifecycleOwner,
                 bindIcon = { foregroundView: View, colorIcon: ColorOptionIconViewModel ->
-                    val viewGroup = foregroundView as? ViewGroup
+                    val colorOptionIconView = foregroundView as? ColorOptionIconView
                     val night =
                         (view.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK ==
                             Configuration.UI_MODE_NIGHT_YES)
-                    viewGroup?.let { ColorOptionIconBinder.bind(viewGroup, colorIcon, night) }
+                    colorOptionIconView?.let { ColorOptionIconBinder.bind(it, colorIcon, night) }
                 }
             )
         colorOptionContainerView.adapter = colorOptionAdapter
diff --git a/src/com/android/customization/picker/color/ui/binder/ColorSectionViewBinder.kt b/src/com/android/customization/picker/color/ui/binder/ColorSectionViewBinder.kt
index 10013e6..16cdd75 100644
--- a/src/com/android/customization/picker/color/ui/binder/ColorSectionViewBinder.kt
+++ b/src/com/android/customization/picker/color/ui/binder/ColorSectionViewBinder.kt
@@ -20,7 +20,6 @@
 import android.content.res.Configuration
 import android.view.LayoutInflater
 import android.view.View
-import android.view.ViewGroup
 import android.widget.ImageView
 import android.widget.LinearLayout
 import androidx.core.view.isVisible
@@ -99,7 +98,11 @@
                 LayoutInflater.from(view.context)
                     .inflate(R.layout.color_option_no_background, view, false)
             item.payload?.let {
-                ColorOptionIconBinder.bind(itemView as ViewGroup, item.payload, night)
+                ColorOptionIconBinder.bind(
+                    itemView.requireViewById(R.id.option_tile),
+                    item.payload,
+                    night
+                )
             }
             val optionSelectedView = itemView.findViewById<ImageView>(R.id.option_selected)
 
diff --git a/src/com/android/customization/picker/color/ui/view/ColorOptionIconView.kt b/src/com/android/customization/picker/color/ui/view/ColorOptionIconView.kt
new file mode 100644
index 0000000..0514843
--- /dev/null
+++ b/src/com/android/customization/picker/color/ui/view/ColorOptionIconView.kt
@@ -0,0 +1,125 @@
+/*
+ * Copyright (C) 2023 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package com.android.customization.picker.color.ui.view
+
+import android.annotation.ColorInt
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.Paint
+import android.graphics.RectF
+import android.util.AttributeSet
+import android.view.View
+
+/**
+ * Draw a color option icon, which is a quadrant circle that can show at most 4 different colors.
+ */
+class ColorOptionIconView(
+    context: Context,
+    attrs: AttributeSet,
+) : View(context, attrs) {
+
+    private val paint = Paint().apply { style = Paint.Style.FILL }
+
+    private val oval = RectF()
+
+    private var color0 = DEFAULT_PLACEHOLDER_COLOR
+    private var color1 = DEFAULT_PLACEHOLDER_COLOR
+    private var color2 = DEFAULT_PLACEHOLDER_COLOR
+    private var color3 = DEFAULT_PLACEHOLDER_COLOR
+
+    private var w = 0
+    private var h = 0
+
+    /**
+     * @param color0 the color in the top left quadrant
+     * @param color1 the color in the top right quadrant
+     * @param color2 the color in the bottom left quadrant
+     * @param color3 the color in the bottom right quadrant
+     */
+    fun bindColor(
+        @ColorInt color0: Int,
+        @ColorInt color1: Int,
+        @ColorInt color2: Int,
+        @ColorInt color3: Int,
+    ) {
+        this.color0 = color0
+        this.color1 = color1
+        this.color2 = color2
+        this.color3 = color3
+        invalidate()
+    }
+
+    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
+        this.w = w
+        this.h = h
+        super.onSizeChanged(w, h, oldw, oldh)
+    }
+
+    override fun onDraw(canvas: Canvas?) {
+        super.onDraw(canvas)
+        // The w and h need to be an even number to avoid tiny pixel-level gaps between the pies
+        w = w.roundDownToEven()
+        h = h.roundDownToEven()
+
+        val width = w.toFloat()
+        val height = h.toFloat()
+
+        oval.set(0f, 0f, width, height)
+        canvas?.apply {
+            paint.color = color3
+            drawArc(
+                oval,
+                0f,
+                90f,
+                true,
+                paint,
+            )
+            paint.color = color2
+            drawArc(
+                oval,
+                90f,
+                90f,
+                true,
+                paint,
+            )
+            paint.color = color0
+            drawArc(
+                oval,
+                180f,
+                90f,
+                true,
+                paint,
+            )
+            paint.color = color1
+            drawArc(
+                oval,
+                270f,
+                90f,
+                true,
+                paint,
+            )
+        }
+    }
+
+    companion object {
+        const val DEFAULT_PLACEHOLDER_COLOR = Color.BLACK
+
+        fun Int.roundDownToEven(): Int {
+            return if (this % 2 == 0) this else this - 1
+        }
+    }
+}