diff --git a/src/cascadia/TerminalSettingsEditor/Appearances.cpp b/src/cascadia/TerminalSettingsEditor/Appearances.cpp
index 3fcbfb58a2c..3a9961e3588 100644
--- a/src/cascadia/TerminalSettingsEditor/Appearances.cpp
+++ b/src/cascadia/TerminalSettingsEditor/Appearances.cpp
@@ -221,6 +221,26 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
                 // box, prevent it from ever being changed again.
                 _NotifyChanges(L"UseDesktopBGImage", L"BackgroundImageSettingsVisible");
             }
+            else if (viewModelProperty == L"Foreground")
+            {
+                _NotifyChanges(L"ForegroundPreview");
+            }
+            else if (viewModelProperty == L"Background")
+            {
+                _NotifyChanges(L"BackgroundPreview");
+            }
+            else if (viewModelProperty == L"SelectionBackground")
+            {
+                _NotifyChanges(L"SelectionBackgroundPreview");
+            }
+            else if (viewModelProperty == L"CursorColor")
+            {
+                _NotifyChanges(L"CursorColorPreview");
+            }
+            else if (viewModelProperty == L"DarkColorSchemeName" || viewModelProperty == L"LightColorSchemeName")
+            {
+                _NotifyChanges(L"CurrentColorScheme");
+            }
         });
 
         // Cache the original BG image path. If the user clicks "Use desktop
@@ -893,7 +913,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         _NotifyChanges(L"CurrentColorScheme");
     }
 
-    Editor::ColorSchemeViewModel AppearanceViewModel::CurrentColorScheme()
+    Editor::ColorSchemeViewModel AppearanceViewModel::CurrentColorScheme() const
     {
         const auto schemeName{ DarkColorSchemeName() };
         const auto allSchemes{ SchemesList() };
@@ -915,6 +935,41 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         LightColorSchemeName(val.Name());
     }
 
+#define GET_COLOR_PREVIEW(appearanceVal, deducedVal)     \
+    if (const auto& modelVal = appearanceVal)            \
+    {                                                    \
+        /* user defined an override value */             \
+        return Windows::UI::Color{                       \
+            .A = 255,                                    \
+            .R = modelVal.Value().R,                     \
+            .G = modelVal.Value().G,                     \
+            .B = modelVal.Value().B                      \
+        };                                               \
+    }                                                    \
+    /* set to null --> deduce value from color scheme */ \
+    return deducedVal;
+
+    Windows::UI::Color AppearanceViewModel::ForegroundPreview() const
+    {
+        GET_COLOR_PREVIEW(_appearance.Foreground(), CurrentColorScheme().ForegroundColor().Color());
+    }
+
+    Windows::UI::Color AppearanceViewModel::BackgroundPreview() const
+    {
+        GET_COLOR_PREVIEW(_appearance.Background(), CurrentColorScheme().BackgroundColor().Color());
+    }
+
+    Windows::UI::Color AppearanceViewModel::SelectionBackgroundPreview() const
+    {
+        GET_COLOR_PREVIEW(_appearance.SelectionBackground(), CurrentColorScheme().SelectionBackgroundColor().Color());
+    }
+
+    Windows::UI::Color AppearanceViewModel::CursorColorPreview() const
+    {
+        GET_COLOR_PREVIEW(_appearance.CursorColor(), CurrentColorScheme().CursorColor().Color());
+    }
+#undef GET_COLOR_PREVIEW
+
     DependencyProperty Appearances::_AppearanceProperty{ nullptr };
 
     Appearances::Appearances()
diff --git a/src/cascadia/TerminalSettingsEditor/Appearances.h b/src/cascadia/TerminalSettingsEditor/Appearances.h
index 27a58073a8f..2e09ce53290 100644
--- a/src/cascadia/TerminalSettingsEditor/Appearances.h
+++ b/src/cascadia/TerminalSettingsEditor/Appearances.h
@@ -121,9 +121,14 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         void SetBackgroundImagePath(winrt::hstring path);
 
         void ClearColorScheme();
-        Editor::ColorSchemeViewModel CurrentColorScheme();
+        Editor::ColorSchemeViewModel CurrentColorScheme() const;
         void CurrentColorScheme(const Editor::ColorSchemeViewModel& val);
 
+        Windows::UI::Color ForegroundPreview() const;
+        Windows::UI::Color BackgroundPreview() const;
+        Windows::UI::Color SelectionBackgroundPreview() const;
+        Windows::UI::Color CursorColorPreview() const;
+
         WINRT_PROPERTY(bool, IsDefault, false);
 
         // These settings are not defined in AppearanceConfig, so we grab them
@@ -147,6 +152,10 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         OBSERVABLE_PROJECTED_SETTING(_appearance, BackgroundImageAlignment);
         OBSERVABLE_PROJECTED_SETTING(_appearance, IntenseTextStyle);
         OBSERVABLE_PROJECTED_SETTING(_appearance, AdjustIndistinguishableColors);
+        OBSERVABLE_PROJECTED_SETTING(_appearance, Foreground);
+        OBSERVABLE_PROJECTED_SETTING(_appearance, Background);
+        OBSERVABLE_PROJECTED_SETTING(_appearance, SelectionBackground);
+        OBSERVABLE_PROJECTED_SETTING(_appearance, CursorColor);
         WINRT_OBSERVABLE_PROPERTY(Windows::Foundation::Collections::IObservableVector<Editor::ColorSchemeViewModel>, SchemesList, _propertyChangedHandlers, nullptr);
 
     private:
diff --git a/src/cascadia/TerminalSettingsEditor/Appearances.idl b/src/cascadia/TerminalSettingsEditor/Appearances.idl
index 0907e5f8f3d..a53c8efe4f1 100644
--- a/src/cascadia/TerminalSettingsEditor/Appearances.idl
+++ b/src/cascadia/TerminalSettingsEditor/Appearances.idl
@@ -45,6 +45,11 @@ namespace Microsoft.Terminal.Settings.Editor
         ColorSchemeViewModel CurrentColorScheme;
         IObservableVector<ColorSchemeViewModel> SchemesList;
 
+        Windows.UI.Color ForegroundPreview { get; };
+        Windows.UI.Color BackgroundPreview { get; };
+        Windows.UI.Color SelectionBackgroundPreview { get; };
+        Windows.UI.Color CursorColorPreview { get; };
+
         String MissingFontFaces { get; };
         String ProportionalFontFaces { get; };
         Boolean HasPowerlineCharacters { get; };
@@ -77,6 +82,11 @@ namespace Microsoft.Terminal.Settings.Editor
         OBSERVABLE_PROJECTED_APPEARANCE_SETTING(Microsoft.Terminal.Settings.Model.ConvergedAlignment, BackgroundImageAlignment);
         OBSERVABLE_PROJECTED_APPEARANCE_SETTING(Microsoft.Terminal.Settings.Model.IntenseStyle, IntenseTextStyle);
         OBSERVABLE_PROJECTED_APPEARANCE_SETTING(Microsoft.Terminal.Core.AdjustTextMode, AdjustIndistinguishableColors);
+
+        OBSERVABLE_PROJECTED_APPEARANCE_SETTING(Windows.Foundation.IReference<Microsoft.Terminal.Core.Color>, Foreground);
+        OBSERVABLE_PROJECTED_APPEARANCE_SETTING(Windows.Foundation.IReference<Microsoft.Terminal.Core.Color>, Background);
+        OBSERVABLE_PROJECTED_APPEARANCE_SETTING(Windows.Foundation.IReference<Microsoft.Terminal.Core.Color>, SelectionBackground);
+        OBSERVABLE_PROJECTED_APPEARANCE_SETTING(Windows.Foundation.IReference<Microsoft.Terminal.Core.Color>, CursorColor);
     }
 
     [default_interface] runtimeclass Appearances : Windows.UI.Xaml.Controls.UserControl, Windows.UI.Xaml.Data.INotifyPropertyChanged
diff --git a/src/cascadia/TerminalSettingsEditor/Appearances.xaml b/src/cascadia/TerminalSettingsEditor/Appearances.xaml
index a3f643c53c3..98318f4a543 100644
--- a/src/cascadia/TerminalSettingsEditor/Appearances.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Appearances.xaml
@@ -69,138 +69,6 @@
             <!--  Grouping: Text  -->
             <TextBlock x:Uid="Profile_TextHeader"
                        Style="{StaticResource TextBlockSubHeaderStyle}" />
-
-            <!--  Color Scheme  -->
-            <!--  This currently only display the Dark color scheme, even if the user has a pair of schemes set.  -->
-            <local:SettingContainer x:Uid="Profile_ColorScheme"
-                                    ClearSettingValue="{x:Bind Appearance.ClearColorScheme}"
-                                    HasSettingValue="{x:Bind Appearance.HasDarkColorSchemeName, Mode=OneWay}"
-                                    SettingOverrideSource="{x:Bind Appearance.DarkColorSchemeNameOverrideSource, Mode=OneWay}">
-                <ComboBox Padding="4"
-                          ItemsSource="{x:Bind Appearance.SchemesList, Mode=OneWay}"
-                          SelectedItem="{x:Bind Appearance.CurrentColorScheme, Mode=TwoWay}"
-                          Style="{StaticResource ComboBoxSettingStyle}">
-                    <ComboBox.ItemTemplate>
-                        <DataTemplate x:DataType="local:ColorSchemeViewModel">
-                            <Grid Grid.Column="0"
-                                  Padding="8"
-                                  VerticalAlignment="Center"
-                                  Background="{x:Bind mtu:Converters.ColorToBrush(BackgroundColor.Color), Mode=OneWay}"
-                                  ColumnSpacing="1"
-                                  CornerRadius="2"
-                                  RowSpacing="1">
-                                <Grid.ColumnDefinitions>
-                                    <ColumnDefinition Width="Auto" />
-                                    <ColumnDefinition Width="Auto" />
-                                    <ColumnDefinition Width="Auto" />
-                                    <ColumnDefinition Width="Auto" />
-                                    <ColumnDefinition Width="Auto" />
-                                    <ColumnDefinition Width="Auto" />
-                                    <ColumnDefinition Width="Auto" />
-                                    <ColumnDefinition Width="Auto" />
-                                    <ColumnDefinition Width="Auto" />
-                                </Grid.ColumnDefinitions>
-                                <Grid.RowDefinitions>
-                                    <RowDefinition Height="Auto" />
-                                    <RowDefinition Height="Auto" />
-                                </Grid.RowDefinitions>
-                                <ContentControl Grid.Row="0"
-                                                Grid.Column="0"
-                                                Content="{x:Bind ColorEntryAt(0), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorChipTemplate}"
-                                                IsTabStop="False" />
-                                <ContentControl Grid.Row="0"
-                                                Grid.Column="1"
-                                                Content="{x:Bind ColorEntryAt(1), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorChipTemplate}"
-                                                IsTabStop="False" />
-                                <ContentControl Grid.Row="0"
-                                                Grid.Column="2"
-                                                Content="{x:Bind ColorEntryAt(2), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorChipTemplate}"
-                                                IsTabStop="False" />
-                                <ContentControl Grid.Row="0"
-                                                Grid.Column="3"
-                                                Content="{x:Bind ColorEntryAt(3), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorChipTemplate}"
-                                                IsTabStop="False" />
-                                <ContentControl Grid.Row="0"
-                                                Grid.Column="4"
-                                                Content="{x:Bind ColorEntryAt(4), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorChipTemplate}"
-                                                IsTabStop="False" />
-                                <ContentControl Grid.Row="0"
-                                                Grid.Column="5"
-                                                Content="{x:Bind ColorEntryAt(5), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorChipTemplate}"
-                                                IsTabStop="False" />
-                                <ContentControl Grid.Row="0"
-                                                Grid.Column="6"
-                                                Content="{x:Bind ColorEntryAt(6), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorChipTemplate}"
-                                                IsTabStop="False" />
-                                <ContentControl Grid.Row="0"
-                                                Grid.Column="7"
-                                                Content="{x:Bind ColorEntryAt(7), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorChipTemplate}"
-                                                IsTabStop="False" />
-                                <ContentControl Grid.Row="1"
-                                                Grid.Column="0"
-                                                Content="{x:Bind ColorEntryAt(8), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorChipTemplate}"
-                                                IsTabStop="False" />
-                                <ContentControl Grid.Row="1"
-                                                Grid.Column="1"
-                                                Content="{x:Bind ColorEntryAt(9), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorChipTemplate}"
-                                                IsTabStop="False" />
-                                <ContentControl Grid.Row="1"
-                                                Grid.Column="2"
-                                                Content="{x:Bind ColorEntryAt(10), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorChipTemplate}"
-                                                IsTabStop="False" />
-                                <ContentControl Grid.Row="1"
-                                                Grid.Column="3"
-                                                Content="{x:Bind ColorEntryAt(11), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorChipTemplate}"
-                                                IsTabStop="False" />
-                                <ContentControl Grid.Row="1"
-                                                Grid.Column="4"
-                                                Content="{x:Bind ColorEntryAt(12), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorChipTemplate}"
-                                                IsTabStop="False" />
-                                <ContentControl Grid.Row="1"
-                                                Grid.Column="5"
-                                                Content="{x:Bind ColorEntryAt(13), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorChipTemplate}"
-                                                IsTabStop="False" />
-                                <ContentControl Grid.Row="1"
-                                                Grid.Column="6"
-                                                Content="{x:Bind ColorEntryAt(14), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorChipTemplate}"
-                                                IsTabStop="False" />
-                                <ContentControl Grid.Row="1"
-                                                Grid.Column="7"
-                                                Content="{x:Bind ColorEntryAt(15), Mode=OneWay}"
-                                                ContentTemplate="{StaticResource ColorChipTemplate}"
-                                                IsTabStop="False" />
-                                <TextBlock Grid.RowSpan="2"
-                                           Grid.Column="8"
-                                           MaxWidth="192"
-                                           Margin="4,0,4,0"
-                                           HorizontalAlignment="Center"
-                                           VerticalAlignment="Center"
-                                           AutomationProperties.AccessibilityView="Raw"
-                                           FontFamily="Cascadia Code"
-                                           Foreground="{x:Bind mtu:Converters.ColorToBrush(ForegroundColor.Color), Mode=OneWay}"
-                                           Text="{x:Bind Name, Mode=OneWay}"
-                                           TextTrimming="WordEllipsis" />
-                            </Grid>
-                        </DataTemplate>
-                    </ComboBox.ItemTemplate>
-                </ComboBox>
-            </local:SettingContainer>
-
             <!--  Font Face  -->
             <local:SettingContainer x:Uid="Profile_FontFace"
                                     ClearSettingValue="{x:Bind Appearance.ClearFontFace}"
@@ -396,6 +264,188 @@
             </local:SettingContainer>
         </StackPanel>
 
+        <!--  Grouping: Color  -->
+        <StackPanel Style="{StaticResource PivotStackStyle}">
+            <TextBlock x:Uid="Profile_ColorHeader"
+                       Style="{StaticResource TextBlockSubHeaderStyle}" />
+
+            <!--  Color Scheme  -->
+            <!--  This currently only display the Dark color scheme, even if the user has a pair of schemes set.  -->
+            <local:SettingContainer x:Uid="Profile_ColorScheme"
+                                    ClearSettingValue="{x:Bind Appearance.ClearColorScheme}"
+                                    HasSettingValue="{x:Bind Appearance.HasDarkColorSchemeName, Mode=OneWay}"
+                                    SettingOverrideSource="{x:Bind Appearance.DarkColorSchemeNameOverrideSource, Mode=OneWay}">
+                <ComboBox Padding="4"
+                          ItemsSource="{x:Bind Appearance.SchemesList, Mode=OneWay}"
+                          SelectedItem="{x:Bind Appearance.CurrentColorScheme, Mode=TwoWay}"
+                          Style="{StaticResource ComboBoxSettingStyle}">
+                    <ComboBox.ItemTemplate>
+                        <DataTemplate x:DataType="local:ColorSchemeViewModel">
+                            <Grid Grid.Column="0"
+                                  Padding="8"
+                                  VerticalAlignment="Center"
+                                  Background="{x:Bind mtu:Converters.ColorToBrush(BackgroundColor.Color), Mode=OneWay}"
+                                  ColumnSpacing="1"
+                                  CornerRadius="2"
+                                  RowSpacing="1">
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="Auto" />
+                                    <ColumnDefinition Width="Auto" />
+                                    <ColumnDefinition Width="Auto" />
+                                    <ColumnDefinition Width="Auto" />
+                                    <ColumnDefinition Width="Auto" />
+                                    <ColumnDefinition Width="Auto" />
+                                    <ColumnDefinition Width="Auto" />
+                                    <ColumnDefinition Width="Auto" />
+                                    <ColumnDefinition Width="Auto" />
+                                </Grid.ColumnDefinitions>
+                                <Grid.RowDefinitions>
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                </Grid.RowDefinitions>
+                                <ContentControl Grid.Row="0"
+                                                Grid.Column="0"
+                                                Content="{x:Bind ColorEntryAt(0), Mode=OneWay}"
+                                                ContentTemplate="{StaticResource ColorChipTemplate}"
+                                                IsTabStop="False" />
+                                <ContentControl Grid.Row="0"
+                                                Grid.Column="1"
+                                                Content="{x:Bind ColorEntryAt(1), Mode=OneWay}"
+                                                ContentTemplate="{StaticResource ColorChipTemplate}"
+                                                IsTabStop="False" />
+                                <ContentControl Grid.Row="0"
+                                                Grid.Column="2"
+                                                Content="{x:Bind ColorEntryAt(2), Mode=OneWay}"
+                                                ContentTemplate="{StaticResource ColorChipTemplate}"
+                                                IsTabStop="False" />
+                                <ContentControl Grid.Row="0"
+                                                Grid.Column="3"
+                                                Content="{x:Bind ColorEntryAt(3), Mode=OneWay}"
+                                                ContentTemplate="{StaticResource ColorChipTemplate}"
+                                                IsTabStop="False" />
+                                <ContentControl Grid.Row="0"
+                                                Grid.Column="4"
+                                                Content="{x:Bind ColorEntryAt(4), Mode=OneWay}"
+                                                ContentTemplate="{StaticResource ColorChipTemplate}"
+                                                IsTabStop="False" />
+                                <ContentControl Grid.Row="0"
+                                                Grid.Column="5"
+                                                Content="{x:Bind ColorEntryAt(5), Mode=OneWay}"
+                                                ContentTemplate="{StaticResource ColorChipTemplate}"
+                                                IsTabStop="False" />
+                                <ContentControl Grid.Row="0"
+                                                Grid.Column="6"
+                                                Content="{x:Bind ColorEntryAt(6), Mode=OneWay}"
+                                                ContentTemplate="{StaticResource ColorChipTemplate}"
+                                                IsTabStop="False" />
+                                <ContentControl Grid.Row="0"
+                                                Grid.Column="7"
+                                                Content="{x:Bind ColorEntryAt(7), Mode=OneWay}"
+                                                ContentTemplate="{StaticResource ColorChipTemplate}"
+                                                IsTabStop="False" />
+                                <ContentControl Grid.Row="1"
+                                                Grid.Column="0"
+                                                Content="{x:Bind ColorEntryAt(8), Mode=OneWay}"
+                                                ContentTemplate="{StaticResource ColorChipTemplate}"
+                                                IsTabStop="False" />
+                                <ContentControl Grid.Row="1"
+                                                Grid.Column="1"
+                                                Content="{x:Bind ColorEntryAt(9), Mode=OneWay}"
+                                                ContentTemplate="{StaticResource ColorChipTemplate}"
+                                                IsTabStop="False" />
+                                <ContentControl Grid.Row="1"
+                                                Grid.Column="2"
+                                                Content="{x:Bind ColorEntryAt(10), Mode=OneWay}"
+                                                ContentTemplate="{StaticResource ColorChipTemplate}"
+                                                IsTabStop="False" />
+                                <ContentControl Grid.Row="1"
+                                                Grid.Column="3"
+                                                Content="{x:Bind ColorEntryAt(11), Mode=OneWay}"
+                                                ContentTemplate="{StaticResource ColorChipTemplate}"
+                                                IsTabStop="False" />
+                                <ContentControl Grid.Row="1"
+                                                Grid.Column="4"
+                                                Content="{x:Bind ColorEntryAt(12), Mode=OneWay}"
+                                                ContentTemplate="{StaticResource ColorChipTemplate}"
+                                                IsTabStop="False" />
+                                <ContentControl Grid.Row="1"
+                                                Grid.Column="5"
+                                                Content="{x:Bind ColorEntryAt(13), Mode=OneWay}"
+                                                ContentTemplate="{StaticResource ColorChipTemplate}"
+                                                IsTabStop="False" />
+                                <ContentControl Grid.Row="1"
+                                                Grid.Column="6"
+                                                Content="{x:Bind ColorEntryAt(14), Mode=OneWay}"
+                                                ContentTemplate="{StaticResource ColorChipTemplate}"
+                                                IsTabStop="False" />
+                                <ContentControl Grid.Row="1"
+                                                Grid.Column="7"
+                                                Content="{x:Bind ColorEntryAt(15), Mode=OneWay}"
+                                                ContentTemplate="{StaticResource ColorChipTemplate}"
+                                                IsTabStop="False" />
+                                <TextBlock Grid.RowSpan="2"
+                                           Grid.Column="8"
+                                           MaxWidth="192"
+                                           Margin="4,0,4,0"
+                                           HorizontalAlignment="Center"
+                                           VerticalAlignment="Center"
+                                           AutomationProperties.AccessibilityView="Raw"
+                                           FontFamily="Cascadia Code"
+                                           Foreground="{x:Bind mtu:Converters.ColorToBrush(ForegroundColor.Color), Mode=OneWay}"
+                                           Text="{x:Bind Name, Mode=OneWay}"
+                                           TextTrimming="WordEllipsis" />
+                            </Grid>
+                        </DataTemplate>
+                    </ComboBox.ItemTemplate>
+                </ComboBox>
+            </local:SettingContainer>
+
+            <!--  Foreground Color  -->
+            <local:SettingContainer x:Name="Foreground"
+                                    x:Uid="Profile_Foreground"
+                                    ClearSettingValue="{x:Bind Appearance.ClearForeground}"
+                                    CurrentValue="{x:Bind Appearance.ForegroundPreview, Mode=OneWay}"
+                                    CurrentValueTemplate="{StaticResource ColorPreviewTemplate}"
+                                    HasSettingValue="{x:Bind Appearance.HasForeground, Mode=OneWay}"
+                                    SettingOverrideSource="{x:Bind Appearance.ForegroundOverrideSource, Mode=OneWay}"
+                                    Style="{StaticResource ExpanderSettingContainerStyleWithComplexPreview}">
+                <local:NullableColorPicker x:Uid="Profile_Foreground_NullableColorPicker"
+                                           ColorSchemeVM="{x:Bind Appearance.CurrentColorScheme, Mode=OneWay}"
+                                           CurrentColor="{x:Bind Appearance.Foreground, Mode=TwoWay}"
+                                           NullColorPreview="{x:Bind Appearance.CurrentColorScheme.ForegroundColor.Color, Mode=OneWay}" />
+            </local:SettingContainer>
+
+            <!--  Background Color  -->
+            <local:SettingContainer x:Name="Background"
+                                    x:Uid="Profile_Background"
+                                    ClearSettingValue="{x:Bind Appearance.ClearBackground}"
+                                    CurrentValue="{x:Bind Appearance.BackgroundPreview, Mode=OneWay}"
+                                    CurrentValueTemplate="{StaticResource ColorPreviewTemplate}"
+                                    HasSettingValue="{x:Bind Appearance.HasBackground, Mode=OneWay}"
+                                    SettingOverrideSource="{x:Bind Appearance.BackgroundOverrideSource, Mode=OneWay}"
+                                    Style="{StaticResource ExpanderSettingContainerStyleWithComplexPreview}">
+                <local:NullableColorPicker x:Uid="Profile_Background_NullableColorPicker"
+                                           ColorSchemeVM="{x:Bind Appearance.CurrentColorScheme, Mode=OneWay}"
+                                           CurrentColor="{x:Bind Appearance.Background, Mode=TwoWay}"
+                                           NullColorPreview="{x:Bind Appearance.CurrentColorScheme.BackgroundColor.Color, Mode=OneWay}" />
+            </local:SettingContainer>
+
+            <!--  Selection Background Color  -->
+            <local:SettingContainer x:Name="SelectionBackground"
+                                    x:Uid="Profile_SelectionBackground"
+                                    ClearSettingValue="{x:Bind Appearance.ClearSelectionBackground}"
+                                    CurrentValue="{x:Bind Appearance.SelectionBackgroundPreview, Mode=OneWay}"
+                                    CurrentValueTemplate="{StaticResource ColorPreviewTemplate}"
+                                    HasSettingValue="{x:Bind Appearance.HasSelectionBackground, Mode=OneWay}"
+                                    SettingOverrideSource="{x:Bind Appearance.SelectionBackgroundOverrideSource, Mode=OneWay}"
+                                    Style="{StaticResource ExpanderSettingContainerStyleWithComplexPreview}">
+                <local:NullableColorPicker x:Uid="Profile_SelectionBackground_NullableColorPicker"
+                                           ColorSchemeVM="{x:Bind Appearance.CurrentColorScheme, Mode=OneWay}"
+                                           CurrentColor="{x:Bind Appearance.SelectionBackground, Mode=TwoWay}"
+                                           NullColorPreview="{x:Bind Appearance.CurrentColorScheme.SelectionBackgroundColor.Color, Mode=OneWay}" />
+            </local:SettingContainer>
+        </StackPanel>
+
         <!--  Grouping: Cursor  -->
         <StackPanel Style="{StaticResource PivotStackStyle}">
             <TextBlock x:Uid="Profile_CursorHeader"
@@ -434,6 +484,21 @@
                                Text="{Binding ElementName=CursorHeightSlider, Path=Value, Mode=OneWay}" />
                 </Grid>
             </local:SettingContainer>
+
+            <!--  Cursor Color  -->
+            <local:SettingContainer x:Name="CursorColor"
+                                    x:Uid="Profile_CursorColor"
+                                    ClearSettingValue="{x:Bind Appearance.ClearCursorColor}"
+                                    CurrentValue="{x:Bind Appearance.CursorColorPreview, Mode=OneWay}"
+                                    CurrentValueTemplate="{StaticResource ColorPreviewTemplate}"
+                                    HasSettingValue="{x:Bind Appearance.HasCursorColor, Mode=OneWay}"
+                                    SettingOverrideSource="{x:Bind Appearance.CursorColorOverrideSource, Mode=OneWay}"
+                                    Style="{StaticResource ExpanderSettingContainerStyleWithComplexPreview}">
+                <local:NullableColorPicker x:Uid="Profile_CursorColor_NullableColorPicker"
+                                           ColorSchemeVM="{x:Bind Appearance.CurrentColorScheme, Mode=OneWay}"
+                                           CurrentColor="{x:Bind Appearance.CursorColor, Mode=TwoWay}"
+                                           NullColorPreview="{x:Bind Appearance.CurrentColorScheme.CursorColor.Color, Mode=OneWay}" />
+            </local:SettingContainer>
         </StackPanel>
 
         <!--  Grouping: Background  -->
diff --git a/src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.h b/src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.h
index 12b26c160bf..45d3983f9ab 100644
--- a/src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.h
+++ b/src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.h
@@ -69,6 +69,11 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
             return hstring{ fmt::format(FMT_COMPILE(L"{} RGB({}, {}, {})"), _Name, _Color.R, _Color.G, _Color.B) };
         }
 
+        hstring NameWithHexCode() const
+        {
+            return hstring{ fmt::format(FMT_COMPILE(L"{} #{:02X}{:02X}{:02X}"), _Name, _Color.R, _Color.G, _Color.B) };
+        }
+
         til::property_changed_event PropertyChanged;
         WINRT_OBSERVABLE_PROPERTY(Windows::UI::Color, Color, PropertyChanged.raise);
         WINRT_OBSERVABLE_PROPERTY(winrt::hstring, Name, PropertyChanged.raise);
diff --git a/src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.idl b/src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.idl
index bf36ef4146b..9ad129b2285 100644
--- a/src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.idl
+++ b/src/cascadia/TerminalSettingsEditor/ColorSchemeViewModel.idl
@@ -36,5 +36,6 @@ namespace Microsoft.Terminal.Settings.Editor
         IInspectable Tag;
         Windows.UI.Color Color;
         String AccessibleName { get; };
+        String NameWithHexCode { get; };
     }
 }
diff --git a/src/cascadia/TerminalSettingsEditor/CommonResources.xaml b/src/cascadia/TerminalSettingsEditor/CommonResources.xaml
index 509e1782c29..115dc0d0dc5 100644
--- a/src/cascadia/TerminalSettingsEditor/CommonResources.xaml
+++ b/src/cascadia/TerminalSettingsEditor/CommonResources.xaml
@@ -4,6 +4,8 @@
 -->
 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:local="using:Microsoft.Terminal.Settings.Editor"
+                    xmlns:mtu="using:Microsoft.Terminal.UI"
                     xmlns:muxc="using:Microsoft.UI.Xaml.Controls">
 
     <!--  Merge SettingContainerStyle here to give every page access to the SettingContainer  -->
@@ -60,6 +62,9 @@
         </ResourceDictionary>
     </ResourceDictionary.ThemeDictionaries>
 
+    <local:ColorToBrushConverter x:Key="ColorToBrushConverter" />
+    <local:ColorToStringConverter x:Key="ColorToStringConverter" />
+
     <Color x:Key="DeleteButtonColor">Firebrick</Color>
 
     <x:Double x:Key="StandardIconSize">14.0</x:Double>
@@ -68,6 +73,32 @@
     <x:Double x:Key="StandardBoxMinWidth">250</x:Double>
     <x:Double x:Key="StandardControlMaxWidth">1000</x:Double>
 
+    <!-- We're purposefully not providing a DataType here.
+     This is expected to be used with an IReference<Microsoft::Terminal::Core::Color>.
+     We're doing all the data type handling in the used converters.-->
+    <DataTemplate x:Key="ColorPreviewTemplate">
+        <Grid ColumnSpacing="5">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="auto" />
+                <ColumnDefinition Width="*" />
+            </Grid.ColumnDefinitions>
+            <Rectangle Grid.Column="0"
+                       Width="13"
+                       Height="13"
+                       VerticalAlignment="Center"
+                       Fill="{Binding Converter={StaticResource ColorToBrushConverter}}"
+                       RadiusX="2"
+                       RadiusY="2" />
+            <TextBlock Grid.Column="1"
+                       Margin="0,0,0,0"
+                       HorizontalAlignment="Right"
+                       VerticalAlignment="Center"
+                       FontFamily="Segoe UI, Segoe Fluent Icons, Segoe MDL2 Assets"
+                       Style="{StaticResource SettingsPageItemDescriptionStyle}"
+                       Text="{Binding Converter={StaticResource ColorToStringConverter}}" />
+        </Grid>
+    </DataTemplate>
+
     <!--
         This is for styling the entire items control used on the
         color schemes page
@@ -368,6 +399,91 @@
         </Setter>
     </Style>
 
+    <Style x:Key="ColorToggleButtonStyle"
+           TargetType="ToggleButton">
+        <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
+        <Setter Property="BorderBrush" Value="{ThemeResource ToggleButtonBorderThemeBrush}" />
+        <Setter Property="BorderThickness" Value="{ThemeResource ToggleButtonBorderThemeThickness}" />
+        <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
+        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
+        <Setter Property="FocusVisualMargin" Value="-3" />
+        <Setter Property="Width" Value="32" />
+        <Setter Property="Height" Value="32" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="ToggleButton">
+                    <Grid>
+                        <Border x:Name="ColorButtonBorder"
+                                BorderBrush="{TemplateBinding Background}"
+                                BorderThickness="{TemplateBinding BorderThickness}"
+                                CornerRadius="{TemplateBinding CornerRadius}">
+                            <Grid>
+                                <Border x:Name="ColorButtonBackground"
+                                        Background="{TemplateBinding Background}"
+                                        BorderThickness="0" />
+                                <!--  We have to use Binding here! We're trying to do a template binding with a converter, so we have to use the verbose syntax.  -->
+                                <FontIcon Margin="0,0,-1,-1"
+                                          HorizontalAlignment="Right"
+                                          VerticalAlignment="Bottom"
+                                          FontFamily="Segoe Fluent Icons"
+                                          FontSize="12"
+                                          Foreground="{TemplateBinding BorderBrush}"
+                                          Glyph="&#xE73D;"
+                                          Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsChecked, Mode=OneWay}" />
+                            </Grid>
+                        </Border>
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+                                <VisualState x:Name="Normal" />
+                                <VisualState x:Name="Disabled" />
+
+                                <VisualState x:Name="PointerOver">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ColorButtonBackground"
+                                                                       Storyboard.TargetProperty="Opacity">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="0.7" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ColorButtonBorder"
+                                                                       Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{Binding Path=BorderBrush, RelativeSource={RelativeSource TemplatedParent}}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+
+                                <VisualState x:Name="Pressed">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ColorButtonBackground"
+                                                                       Storyboard.TargetProperty="Opacity">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="0.5" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ColorButtonBorder"
+                                                                       Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{Binding Path=BorderBrush, RelativeSource={RelativeSource TemplatedParent}}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+
+                                <VisualState x:Name="Checked">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ColorButtonBorder"
+                                                                       Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{Binding Path=BorderBrush, RelativeSource={RelativeSource TemplatedParent}}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
     <!--  Slider-Related Styling  -->
     <Style x:Key="SliderValueLabelStyle"
            TargetType="TextBlock">
diff --git a/src/cascadia/TerminalSettingsEditor/Microsoft.Terminal.Settings.Editor.vcxproj b/src/cascadia/TerminalSettingsEditor/Microsoft.Terminal.Settings.Editor.vcxproj
index 836ec79a904..caf842e1055 100644
--- a/src/cascadia/TerminalSettingsEditor/Microsoft.Terminal.Settings.Editor.vcxproj
+++ b/src/cascadia/TerminalSettingsEditor/Microsoft.Terminal.Settings.Editor.vcxproj
@@ -57,6 +57,10 @@
       <DependentUpon>ColorSchemes.xaml</DependentUpon>
       <SubType>Code</SubType>
     </ClInclude>
+    <ClInclude Include="NullableColorPicker.h">
+      <DependentUpon>NullableColorPicker.xaml</DependentUpon>
+      <SubType>Code</SubType>
+    </ClInclude>
     <ClInclude Include="EditColorScheme.h">
       <DependentUpon>EditColorScheme.xaml</DependentUpon>
       <SubType>Code</SubType>
@@ -82,6 +86,10 @@
       <DependentUpon>ActionsViewModel.idl</DependentUpon>
       <SubType>Code</SubType>
     </ClInclude>
+    <ClInclude Include="TerminalColorConverters.h">
+      <DependentUpon>TerminalColorConverters.idl</DependentUpon>
+      <SubType>Code</SubType>
+    </ClInclude>
     <ClInclude Include="ColorSchemeViewModel.h">
       <DependentUpon>ColorSchemeViewModel.idl</DependentUpon>
       <SubType>Code</SubType>
@@ -148,6 +156,9 @@
     <Page Include="ColorSchemes.xaml">
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="NullableColorPicker.xaml">
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="EditColorScheme.xaml">
       <SubType>Designer</SubType>
     </Page>
@@ -197,6 +208,10 @@
       <DependentUpon>ColorSchemes.xaml</DependentUpon>
       <SubType>Code</SubType>
     </ClCompile>
+    <ClCompile Include="NullableColorPicker.cpp">
+      <DependentUpon>NullableColorPicker.xaml</DependentUpon>
+      <SubType>Code</SubType>
+    </ClCompile>
     <ClCompile Include="EditColorScheme.cpp">
       <DependentUpon>EditColorScheme.xaml</DependentUpon>
       <SubType>Code</SubType>
@@ -225,6 +240,10 @@
       <DependentUpon>ActionsViewModel.idl</DependentUpon>
       <SubType>Code</SubType>
     </ClCompile>
+    <ClCompile Include="TerminalColorConverters.cpp">
+      <DependentUpon>TerminalColorConverters.idl</DependentUpon>
+      <SubType>Code</SubType>
+    </ClCompile>
     <ClCompile Include="ColorSchemeViewModel.cpp">
       <DependentUpon>ColorSchemeViewModel.idl</DependentUpon>
       <SubType>Code</SubType>
@@ -295,6 +314,10 @@
       <DependentUpon>ColorSchemes.xaml</DependentUpon>
       <SubType>Code</SubType>
     </Midl>
+    <Midl Include="NullableColorPicker.idl">
+      <DependentUpon>NullableColorPicker.xaml</DependentUpon>
+      <SubType>Code</SubType>
+    </Midl>
     <Midl Include="EditColorScheme.idl">
       <DependentUpon>EditColorScheme.xaml</DependentUpon>
       <SubType>Code</SubType>
@@ -320,6 +343,7 @@
     </Midl>
     <Midl Include="ProfileViewModel.idl" />
     <Midl Include="ActionsViewModel.idl" />
+    <Midl Include="TerminalColorConverters.idl" />
     <Midl Include="ColorSchemeViewModel.idl" />
     <Midl Include="ColorSchemesPageViewModel.idl" />
     <Midl Include="RenderingViewModel.idl" />
@@ -374,7 +398,6 @@
     <ProjectReference Include="$(OpenConsoleDir)src\cascadia\TerminalConnection\TerminalConnection.vcxproj">
       <Private>false</Private>
     </ProjectReference>
-
     <ProjectReference Include="$(OpenConsoleDir)src\cascadia\TerminalControl\dll\TerminalControl.vcxproj">
       <!-- Private:false and ReferenceOutputAssembly:false, in combination with
       the manual reference to TerminalControl.winmd below make sure that this
@@ -387,7 +410,6 @@
       <Private>false</Private>
     </ProjectReference>
   </ItemGroup>
-
   <ItemGroup>
     <!-- Manually add a reference to TerminalControl here. We need this so
     MDMERGE will know where the TermControl types are defined. However, we need
@@ -406,17 +428,13 @@
       <CopyLocalSatelliteAssemblies>false</CopyLocalSatelliteAssemblies>
     </Reference>
   </ItemGroup>
-
   <ItemDefinitionGroup>
     <Link>
       <AdditionalDependencies>shell32.lib;%(AdditionalDependencies)</AdditionalDependencies>
     </Link>
   </ItemDefinitionGroup>
-
   <Import Project="$(OpenConsoleDir)src\cppwinrt.build.post.props" />
-
   <!-- This -must- go after cppwinrt.build.post.props because that includes many VS-provided props including appcontainer.common.props, which stomps on what cppwinrt.targets did. -->
   <Import Project="$(OpenConsoleDir)src\common.nugetversions.targets" />
-
   <Import Project="$(SolutionDir)build\rules\CollectWildcardResources.targets" />
-</Project>
+</Project>
\ No newline at end of file
diff --git a/src/cascadia/TerminalSettingsEditor/Microsoft.Terminal.Settings.Editor.vcxproj.filters b/src/cascadia/TerminalSettingsEditor/Microsoft.Terminal.Settings.Editor.vcxproj.filters
index 6e8ad60b9e8..1f2368fb742 100644
--- a/src/cascadia/TerminalSettingsEditor/Microsoft.Terminal.Settings.Editor.vcxproj.filters
+++ b/src/cascadia/TerminalSettingsEditor/Microsoft.Terminal.Settings.Editor.vcxproj.filters
@@ -2,6 +2,7 @@
 <Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <ItemGroup>
     <Natvis Include="$(SolutionDir)tools\ConsoleTypes.natvis" />
+    <Natvis Include="$(MSBuildThisFileDirectory)..\..\natvis\wil.natvis" />
   </ItemGroup>
   <ItemGroup>
     <PRIResource Include="Resources\en-US\Resources.resw" />
@@ -27,9 +28,9 @@
     <Midl Include="LaunchViewModel.idl" />
     <Midl Include="EnumEntry.idl" />
     <Midl Include="SettingContainer.idl" />
+    <Midl Include="TerminalColorConverters.idl" />
   </ItemGroup>
   <ItemGroup>
-    <None Include="packages.config" />
     <None Include="$(ProjectName).def" />
   </ItemGroup>
   <ItemGroup>
@@ -49,5 +50,6 @@
     <Page Include="SettingContainerStyle.xaml" />
     <Page Include="AddProfile.xaml" />
     <Page Include="KeyChordListener.xaml" />
+    <Page Include="NullableColorPicker.xaml" />
   </ItemGroup>
-</Project>
+</Project>
\ No newline at end of file
diff --git a/src/cascadia/TerminalSettingsEditor/NullableColorPicker.cpp b/src/cascadia/TerminalSettingsEditor/NullableColorPicker.cpp
new file mode 100644
index 00000000000..4cb9f655b72
--- /dev/null
+++ b/src/cascadia/TerminalSettingsEditor/NullableColorPicker.cpp
@@ -0,0 +1,226 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+#include "pch.h"
+#include "NullableColorPicker.h"
+#include "NullableColorPicker.g.cpp"
+
+#include <LibraryResources.h>
+
+using namespace winrt;
+using namespace winrt::Windows::UI;
+using namespace winrt::Windows::UI::Xaml;
+using namespace winrt::Windows::UI::Xaml::Navigation;
+using namespace winrt::Windows::UI::Xaml::Controls;
+using namespace winrt::Windows::UI::Xaml::Media;
+using namespace winrt::Windows::Foundation;
+using namespace winrt::Windows::Foundation::Collections;
+using namespace winrt::Microsoft::UI::Xaml::Controls;
+
+namespace winrt
+{
+    namespace MUX = Microsoft::UI::Xaml;
+    namespace WUX = Windows::UI::Xaml;
+}
+
+namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
+{
+    static constexpr bool equalsColor(Windows::UI::Color a, Microsoft::Terminal::Core::Color b)
+    {
+        return a.R == b.R && a.G == b.G && a.B == b.B;
+    }
+
+    DependencyProperty NullableColorPicker::_ColorSchemeVMProperty{ nullptr };
+    DependencyProperty NullableColorPicker::_CurrentColorProperty{ nullptr };
+    DependencyProperty NullableColorPicker::_ShowNullColorButtonProperty{ nullptr };
+    DependencyProperty NullableColorPicker::_NullColorButtonLabelProperty{ nullptr };
+    DependencyProperty NullableColorPicker::_NullColorPreviewProperty{ nullptr };
+
+    NullableColorPicker::NullableColorPicker()
+    {
+        _InitializeProperties();
+        InitializeComponent();
+    }
+
+    void NullableColorPicker::_InitializeProperties()
+    {
+        // Initialize any dependency properties here.
+        // This performs a lazy load on these properties, instead of
+        // initializing them when the DLL loads.
+        if (!_ColorSchemeVMProperty)
+        {
+            _ColorSchemeVMProperty =
+                DependencyProperty::Register(
+                    L"ColorSchemeVM",
+                    xaml_typename<Editor::ColorSchemeViewModel>(),
+                    xaml_typename<Editor::NullableColorPicker>(),
+                    PropertyMetadata{ nullptr });
+        }
+        if (!_CurrentColorProperty)
+        {
+            _CurrentColorProperty =
+                DependencyProperty::Register(
+                    L"CurrentColor",
+                    xaml_typename<Windows::Foundation::IReference<Microsoft::Terminal::Core::Color>>(),
+                    xaml_typename<Editor::NullableColorPicker>(),
+                    PropertyMetadata{ nullptr, PropertyChangedCallback{ &NullableColorPicker::_OnCurrentColorValueChanged } });
+        }
+        if (!_ShowNullColorButtonProperty)
+        {
+            _ShowNullColorButtonProperty =
+                DependencyProperty::Register(
+                    L"ShowNullColorButton",
+                    xaml_typename<bool>(),
+                    xaml_typename<Editor::NullableColorPicker>(),
+                    PropertyMetadata{ box_value(true) });
+        }
+        if (!_NullColorButtonLabelProperty)
+        {
+            _NullColorButtonLabelProperty =
+                DependencyProperty::Register(
+                    L"NullColorButtonLabel",
+                    xaml_typename<hstring>(),
+                    xaml_typename<Editor::NullableColorPicker>(),
+                    PropertyMetadata{ nullptr });
+        }
+        if (!_NullColorPreviewProperty)
+        {
+            _NullColorPreviewProperty =
+                DependencyProperty::Register(
+                    L"NullColorPreview",
+                    xaml_typename<Windows::UI::Color>(),
+                    xaml_typename<Editor::NullableColorPicker>(),
+                    PropertyMetadata{ box_value(Windows::UI::Colors::Transparent()) });
+        }
+    }
+
+    void NullableColorPicker::_OnCurrentColorValueChanged(const DependencyObject& d, const DependencyPropertyChangedEventArgs& /*e*/)
+    {
+        const auto& obj{ d.try_as<Editor::NullableColorPicker>() };
+        get_self<NullableColorPicker>(obj)->_UpdateColorChips();
+    }
+
+    void NullableColorPicker::_UpdateColorChips()
+    {
+        const auto& currentColor = CurrentColor();
+        for (const auto& colorChip : _colorChips)
+        {
+            const auto& chipColor = colorChip.DataContext().as<Editor::ColorTableEntry>().Color();
+            colorChip.IsChecked(currentColor ?
+                                    equalsColor(chipColor, currentColor.Value()) :
+                                    false);
+        }
+    }
+
+    SolidColorBrush NullableColorPicker::CalculateBorderBrush(const Windows::UI::Color& color)
+    {
+        static constexpr auto isColorLight = [](const winrt::Windows::UI::Color& clr) -> bool {
+            return (((5 * clr.G) + (2 * clr.R) + clr.B) > (8 * 128));
+        };
+        if (isColorLight(color))
+        {
+            return SolidColorBrush(Colors::Black());
+        }
+        else
+        {
+            return SolidColorBrush(Colors::White());
+        }
+    }
+
+    void NullableColorPicker::ColorChip_Clicked(const IInspectable& sender, const RoutedEventArgs& /*args*/)
+    {
+        const auto& btn = sender.as<Windows::UI::Xaml::Controls::Primitives::ToggleButton>();
+        const auto& colorEntryColor = btn.DataContext().as<Editor::ColorTableEntry>().Color();
+        const Microsoft::Terminal::Core::Color terminalColor{ colorEntryColor.R, colorEntryColor.G, colorEntryColor.B, colorEntryColor.A };
+        CurrentColor(terminalColor);
+        btn.IsChecked(true);
+    }
+
+    void NullableColorPicker::ColorChip_DataContextChanged(const IInspectable& sender, const DataContextChangedEventArgs& args)
+    {
+        if (const auto& toggleBtn = sender.try_as<Controls::Primitives::ToggleButton>())
+        {
+            if (const auto& currentColor = CurrentColor())
+            {
+                const auto& currentColorVal = currentColor.Value();
+                const auto& newChipColor = args.NewValue().as<Editor::ColorTableEntry>().Color();
+                toggleBtn.IsChecked(equalsColor(newChipColor, currentColorVal));
+            }
+        }
+    }
+
+    bool NullableColorPicker::IsNull(IReference<Microsoft::Terminal::Core::Color> color)
+    {
+        return color == nullptr;
+    }
+
+    void NullableColorPicker::NullColorButton_Clicked(const IInspectable& /*sender*/, const RoutedEventArgs& /*args*/)
+    {
+        CurrentColor(nullptr);
+    }
+
+    safe_void_coroutine NullableColorPicker::MoreColors_Clicked(const IInspectable& /*sender*/, const RoutedEventArgs& /*args*/)
+    {
+        co_await ColorPickerDialog().ShowAsync();
+    }
+
+    void NullableColorPicker::ColorPickerDialog_Opened(const IInspectable& /*sender*/, const ContentDialogOpenedEventArgs& /*args*/)
+    {
+        // Initialize color picker with current color
+        if (CurrentColor())
+        {
+            const auto& terminalColor = CurrentColor().Value();
+            const Windows::UI::Color winuiColor{
+                .A = terminalColor.A,
+                .R = terminalColor.R,
+                .G = terminalColor.G,
+                .B = terminalColor.B
+            };
+            ColorPickerControl().Color(winuiColor);
+        }
+        else
+        {
+            // No current color (null), use the deduced value for null
+            ColorPickerControl().Color(NullColorPreview());
+        }
+    }
+
+    void NullableColorPicker::ColorPickerDialog_PrimaryButtonClick(const IInspectable& /*sender*/, const ContentDialogButtonClickEventArgs& /*args*/)
+    {
+        const auto& selectedColor = ColorPickerControl().Color();
+        const Microsoft::Terminal::Core::Color terminalColor{ selectedColor.R, selectedColor.G, selectedColor.B, selectedColor.A };
+        CurrentColor(terminalColor);
+    }
+
+    void NullableColorPicker::ColorChip_Loaded(const IInspectable& sender, const RoutedEventArgs& /*args*/)
+    {
+        if (const auto& toggleBtn = sender.try_as<Controls::Primitives::ToggleButton>())
+        {
+            if (const auto& currentColor = CurrentColor())
+            {
+                const auto& currentColorVal = currentColor.Value();
+                const auto& chipColor = toggleBtn.DataContext().as<Editor::ColorTableEntry>().Color();
+                if (equalsColor(chipColor, currentColorVal))
+                {
+                    toggleBtn.IsChecked(true);
+                }
+            }
+            _colorChips.push_back(toggleBtn);
+        }
+    }
+
+    void NullableColorPicker::ColorChip_Unloaded(const IInspectable& sender, const RoutedEventArgs& /*args*/)
+    {
+        if (const auto& toggleBtn = sender.try_as<Controls::Primitives::ToggleButton>())
+        {
+            for (auto it = _colorChips.begin(); it != _colorChips.end(); ++it)
+            {
+                if (*it == toggleBtn)
+                {
+                    _colorChips.erase(it);
+                    break;
+                }
+            }
+        }
+    }
+}
diff --git a/src/cascadia/TerminalSettingsEditor/NullableColorPicker.h b/src/cascadia/TerminalSettingsEditor/NullableColorPicker.h
new file mode 100644
index 00000000000..876ce23d7f9
--- /dev/null
+++ b/src/cascadia/TerminalSettingsEditor/NullableColorPicker.h
@@ -0,0 +1,49 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+#pragma once
+
+#include "NullableColorPicker.g.h"
+#include "Utils.h"
+
+namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
+{
+    struct NullableColorPicker : public HasScrollViewer<NullableColorPicker>, NullableColorPickerT<NullableColorPicker>
+    {
+    public:
+        NullableColorPicker();
+
+        static winrt::Windows::UI::Xaml::Media::SolidColorBrush CalculateBorderBrush(const Windows::UI::Color& color);
+        static bool IsNull(Windows::Foundation::IReference<Microsoft::Terminal::Core::Color> color);
+
+        void ColorChip_Loaded(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::RoutedEventArgs& args);
+        void ColorChip_Unloaded(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::RoutedEventArgs& args);
+        void ColorChip_Clicked(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::RoutedEventArgs& args);
+        void ColorChip_DataContextChanged(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::DataContextChangedEventArgs& args);
+
+        void NullColorButton_Clicked(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::RoutedEventArgs& args);
+        safe_void_coroutine MoreColors_Clicked(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::RoutedEventArgs& args);
+
+        void ColorPickerDialog_Opened(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::Controls::ContentDialogOpenedEventArgs& args);
+        void ColorPickerDialog_PrimaryButtonClick(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::Controls::ContentDialogButtonClickEventArgs& args);
+
+        DEPENDENCY_PROPERTY(Editor::ColorSchemeViewModel, ColorSchemeVM);
+        DEPENDENCY_PROPERTY(Windows::Foundation::IReference<Microsoft::Terminal::Core::Color>, CurrentColor);
+        DEPENDENCY_PROPERTY(bool, ShowNullColorButton);
+        DEPENDENCY_PROPERTY(hstring, NullColorButtonLabel);
+        DEPENDENCY_PROPERTY(Windows::UI::Color, NullColorPreview);
+
+    private:
+        static void _InitializeProperties();
+        static void _OnCurrentColorValueChanged(const Windows::UI::Xaml::DependencyObject& d, const Windows::UI::Xaml::DependencyPropertyChangedEventArgs& e);
+
+        void _UpdateColorChips();
+
+        std::vector<Windows::UI::Xaml::Controls::Primitives::ToggleButton> _colorChips;
+    };
+}
+
+namespace winrt::Microsoft::Terminal::Settings::Editor::factory_implementation
+{
+    BASIC_FACTORY(NullableColorPicker);
+}
diff --git a/src/cascadia/TerminalSettingsEditor/NullableColorPicker.idl b/src/cascadia/TerminalSettingsEditor/NullableColorPicker.idl
new file mode 100644
index 00000000000..47229065433
--- /dev/null
+++ b/src/cascadia/TerminalSettingsEditor/NullableColorPicker.idl
@@ -0,0 +1,30 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import "ColorSchemeViewModel.idl";
+
+namespace Microsoft.Terminal.Settings.Editor
+{
+    [default_interface] runtimeclass NullableColorPicker : Windows.UI.Xaml.Controls.UserControl
+    {
+        NullableColorPicker();
+
+        ColorSchemeViewModel ColorSchemeVM;
+        static Windows.UI.Xaml.DependencyProperty ColorSchemeVMProperty { get; };
+
+        Windows.Foundation.IReference<Microsoft.Terminal.Core.Color> CurrentColor;
+        static Windows.UI.Xaml.DependencyProperty CurrentColorProperty { get; };
+
+        Boolean ShowNullColorButton;
+        static Windows.UI.Xaml.DependencyProperty ShowNullColorButtonProperty { get; };
+
+        String NullColorButtonLabel;
+        static Windows.UI.Xaml.DependencyProperty NullColorButtonLabelProperty { get; };
+
+        Windows.UI.Color NullColorPreview;
+        static Windows.UI.Xaml.DependencyProperty NullColorPreviewProperty { get; };
+
+        static Windows.UI.Xaml.Media.SolidColorBrush CalculateBorderBrush(Windows.UI.Color color);
+        static Boolean IsNull(Windows.Foundation.IReference<Microsoft.Terminal.Core.Color> color);
+    }
+}
diff --git a/src/cascadia/TerminalSettingsEditor/NullableColorPicker.xaml b/src/cascadia/TerminalSettingsEditor/NullableColorPicker.xaml
new file mode 100644
index 00000000000..5d591ed0d72
--- /dev/null
+++ b/src/cascadia/TerminalSettingsEditor/NullableColorPicker.xaml
@@ -0,0 +1,154 @@
+<!--
+    Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
+    the MIT License. See LICENSE in the project root for license information.
+-->
+<UserControl x:Class="Microsoft.Terminal.Settings.Editor.NullableColorPicker"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:local="using:Microsoft.Terminal.Settings.Editor"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:model="using:Microsoft.Terminal.Settings.Model"
+             xmlns:mtu="using:Microsoft.Terminal.UI"
+             xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+             mc:Ignorable="d">
+
+    <UserControl.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="CommonResources.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+
+            <DataTemplate x:Key="ColorPreviewChipTemplate"
+                          x:DataType="local:ColorTableEntry">
+                <ToggleButton Margin="0,0,4,4"
+                              AutomationProperties.Name="{x:Bind NameWithHexCode}"
+                              Background="{x:Bind mtu:Converters.ColorToBrush(Color)}"
+                              BorderBrush="{x:Bind local:NullableColorPicker.CalculateBorderBrush(Color), Mode=OneWay}"
+                              BorderThickness="2"
+                              Click="ColorChip_Clicked"
+                              DataContextChanged="ColorChip_DataContextChanged"
+                              Loaded="ColorChip_Loaded"
+                              Style="{StaticResource ColorToggleButtonStyle}"
+                              ToolTipService.ToolTip="{x:Bind NameWithHexCode}"
+                              Unloaded="ColorChip_Unloaded" />
+            </DataTemplate>
+
+            <DataTemplate x:Key="ColorSchemeTemplate"
+                          x:DataType="local:ColorSchemeViewModel">
+                <VariableSizedWrapGrid Name="ColorSchemeGrid"
+                                       HorizontalAlignment="Left"
+                                       MaximumRowsOrColumns="4"
+                                       Orientation="Horizontal"
+                                       XYFocusKeyboardNavigation="Enabled">
+                    <ContentControl Content="{x:Bind ColorEntryAt(0), Mode=OneWay}"
+                                    ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                    IsTabStop="False" />
+                    <ContentControl Content="{x:Bind ColorEntryAt(1), Mode=OneWay}"
+                                    ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                    IsTabStop="False" />
+                    <ContentControl Content="{x:Bind ColorEntryAt(2), Mode=OneWay}"
+                                    ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                    IsTabStop="False" />
+                    <ContentControl Content="{x:Bind ColorEntryAt(3), Mode=OneWay}"
+                                    ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                    IsTabStop="False" />
+                    <ContentControl Content="{x:Bind ColorEntryAt(4), Mode=OneWay}"
+                                    ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                    IsTabStop="False" />
+                    <ContentControl Content="{x:Bind ColorEntryAt(5), Mode=OneWay}"
+                                    ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                    IsTabStop="False" />
+                    <ContentControl Content="{x:Bind ColorEntryAt(6), Mode=OneWay}"
+                                    ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                    IsTabStop="False" />
+                    <ContentControl Content="{x:Bind ColorEntryAt(7), Mode=OneWay}"
+                                    ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                    IsTabStop="False" />
+                    <ContentControl Content="{x:Bind ColorEntryAt(8), Mode=OneWay}"
+                                    ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                    IsTabStop="False" />
+                    <ContentControl Content="{x:Bind ColorEntryAt(9), Mode=OneWay}"
+                                    ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                    IsTabStop="False" />
+                    <ContentControl Content="{x:Bind ColorEntryAt(10), Mode=OneWay}"
+                                    ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                    IsTabStop="False" />
+                    <ContentControl Content="{x:Bind ColorEntryAt(11), Mode=OneWay}"
+                                    ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                    IsTabStop="False" />
+                    <ContentControl Content="{x:Bind ColorEntryAt(12), Mode=OneWay}"
+                                    ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                    IsTabStop="False" />
+                    <ContentControl Content="{x:Bind ColorEntryAt(13), Mode=OneWay}"
+                                    ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                    IsTabStop="False" />
+                    <ContentControl Content="{x:Bind ColorEntryAt(14), Mode=OneWay}"
+                                    ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                    IsTabStop="False" />
+                    <ContentControl Content="{x:Bind ColorEntryAt(15), Mode=OneWay}"
+                                    ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
+                                    IsTabStop="False" />
+                </VariableSizedWrapGrid>
+            </DataTemplate>
+        </ResourceDictionary>
+    </UserControl.Resources>
+
+    <Grid ColumnSpacing="5">
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="Auto" />
+            <ColumnDefinition Width="Auto" />
+        </Grid.ColumnDefinitions>
+
+        <ContentDialog x:Name="ColorPickerDialog"
+                       x:Uid="NullableColorPicker_ColorPickerContentDialog"
+                       DefaultButton="Primary"
+                       Opened="ColorPickerDialog_Opened"
+                       PrimaryButtonClick="ColorPickerDialog_PrimaryButtonClick">
+            <muxc:ColorPicker x:Name="ColorPickerControl"
+                              Margin="0,0,0,-40"
+                              ColorSpectrumShape="Box"
+                              IsAlphaEnabled="False"
+                              IsAlphaSliderVisible="True"
+                              IsAlphaTextInputVisible="True"
+                              IsColorChannelTextInputVisible="True"
+                              IsColorSliderVisible="False"
+                              IsHexInputVisible="True"
+                              IsMoreButtonVisible="False"
+                              Orientation="Horizontal" />
+        </ContentDialog>
+
+        <ContentPresenter Grid.Column="0"
+                          Content="{x:Bind ColorSchemeVM, Mode=OneWay}"
+                          ContentTemplate="{StaticResource ColorSchemeTemplate}" />
+
+        <StackPanel Grid.Column="1"
+                    Spacing="5">
+            <ToggleButton AutomationProperties.Name="{x:Bind NullColorButtonLabel}"
+                          Click="NullColorButton_Clicked"
+                          IsChecked="{x:Bind IsNull(CurrentColor), Mode=OneWay}">
+                <Grid ColumnSpacing="5">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="*" />
+                    </Grid.ColumnDefinitions>
+
+                    <Border Grid.Column="0"
+                            Width="20"
+                            Height="20"
+                            Background="{x:Bind mtu:Converters.ColorToBrush(NullColorPreview), Mode=OneWay}"
+                            BorderThickness="1"
+                            CornerRadius="{ThemeResource ControlCornerRadius}" />
+
+                    <TextBlock Grid.Column="1"
+                               Text="{x:Bind NullColorButtonLabel}" />
+                </Grid>
+            </ToggleButton>
+
+            <Button x:Uid="NullableColorPicker_MoreColorsButton"
+                    HorizontalAlignment="Stretch"
+                    Click="MoreColors_Clicked" />
+        </StackPanel>
+    </Grid>
+
+</UserControl>
diff --git a/src/cascadia/TerminalSettingsEditor/ProfileViewModel.h b/src/cascadia/TerminalSettingsEditor/ProfileViewModel.h
index f0ce84f1f05..bff87b0a59a 100644
--- a/src/cascadia/TerminalSettingsEditor/ProfileViewModel.h
+++ b/src/cascadia/TerminalSettingsEditor/ProfileViewModel.h
@@ -104,10 +104,6 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         OBSERVABLE_PROJECTED_SETTING(_profile, Commandline);
         OBSERVABLE_PROJECTED_SETTING(_profile, StartingDirectory);
         OBSERVABLE_PROJECTED_SETTING(_profile, AntialiasingMode);
-        OBSERVABLE_PROJECTED_SETTING(_profile.DefaultAppearance(), Foreground);
-        OBSERVABLE_PROJECTED_SETTING(_profile.DefaultAppearance(), Background);
-        OBSERVABLE_PROJECTED_SETTING(_profile.DefaultAppearance(), SelectionBackground);
-        OBSERVABLE_PROJECTED_SETTING(_profile.DefaultAppearance(), CursorColor);
         OBSERVABLE_PROJECTED_SETTING(_profile.DefaultAppearance(), Opacity);
         OBSERVABLE_PROJECTED_SETTING(_profile.DefaultAppearance(), UseAcrylic);
         OBSERVABLE_PROJECTED_SETTING(_profile, HistorySize);
diff --git a/src/cascadia/TerminalSettingsEditor/ProfileViewModel.idl b/src/cascadia/TerminalSettingsEditor/ProfileViewModel.idl
index c0bc407c7ae..b33593bc94f 100644
--- a/src/cascadia/TerminalSettingsEditor/ProfileViewModel.idl
+++ b/src/cascadia/TerminalSettingsEditor/ProfileViewModel.idl
@@ -97,10 +97,6 @@ namespace Microsoft.Terminal.Settings.Editor
         OBSERVABLE_PROJECTED_PROFILE_SETTING(String, Commandline);
         OBSERVABLE_PROJECTED_PROFILE_SETTING(String, StartingDirectory);
         OBSERVABLE_PROJECTED_PROFILE_SETTING(Microsoft.Terminal.Control.TextAntialiasingMode, AntialiasingMode);
-        OBSERVABLE_PROJECTED_PROFILE_SETTING(Windows.Foundation.IReference<Microsoft.Terminal.Core.Color>, Foreground);
-        OBSERVABLE_PROJECTED_PROFILE_SETTING(Windows.Foundation.IReference<Microsoft.Terminal.Core.Color>, Background);
-        OBSERVABLE_PROJECTED_PROFILE_SETTING(Windows.Foundation.IReference<Microsoft.Terminal.Core.Color>, SelectionBackground);
-        OBSERVABLE_PROJECTED_PROFILE_SETTING(Windows.Foundation.IReference<Microsoft.Terminal.Core.Color>, CursorColor);
         OBSERVABLE_PROJECTED_PROFILE_SETTING(Int32, HistorySize);
         OBSERVABLE_PROJECTED_PROFILE_SETTING(Boolean, SnapOnInput);
         OBSERVABLE_PROJECTED_PROFILE_SETTING(Boolean, AltGrAliasing);
diff --git a/src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw b/src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw
index cffae127f5a..3fad161d94c 100644
--- a/src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw
+++ b/src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw
@@ -1839,4 +1839,76 @@
     <value>Non-monospace fonts:</value>
     <comment>This is a label that is followed by a list of proportional fonts.</comment>
   </data>
+  <data name="Profile_ColorHeader.Text" xml:space="preserve">
+    <value>Color</value>
+    <comment>Header for a group of settings that control the color of the text.</comment>
+  </data>
+  <data name="Profile_TabColor.Header" xml:space="preserve">
+    <value>Tab color</value>
+    <comment>Header for a control to determine the color of the tab.</comment>
+  </data>
+  <data name="Profile_Foreground.Header" xml:space="preserve">
+    <value>Foreground</value>
+    <comment>Header for a control to determine the foreground color of text.</comment>
+  </data>
+  <data name="Profile_Background.Header" xml:space="preserve">
+    <value>Background</value>
+    <comment>Header for a control to determine the background color of text.</comment>
+  </data>
+  <data name="Profile_SelectionBackground.Header" xml:space="preserve">
+    <value>Selection background</value>
+    <comment>Header for a control to determine the background color of selected text.</comment>
+  </data>
+  <data name="Profile_CursorColor.Header" xml:space="preserve">
+    <value>Color</value>
+    <comment>Header for a control to determine the color of the cursor.</comment>
+  </data>
+  <data name="Profile_Foreground.HelpText" xml:space="preserve">
+    <value>Overrides the foreground color from the color scheme.</value>
+    <comment>A description for what the "foreground" setting does. Presented near "Profile_Foreground".</comment>
+  </data>
+  <data name="Profile_CursorColor.HelpText" xml:space="preserve">
+    <value>Overrides the cursor color from the color scheme.</value>
+    <comment>A description for what the "cursor color" setting does. Presented near "Profile_CursorColor".</comment>
+  </data>
+  <data name="Profile_Background.HelpText" xml:space="preserve">
+    <value>Overrides the background color from the color scheme.</value>
+    <comment>A description for what the "background" setting does. Presented near "Profile_Background".</comment>
+  </data>
+  <data name="Profile_SelectionBackground.HelpText" xml:space="preserve">
+    <value>Overrides the selection background color from the color scheme.</value>
+    <comment>A description for what the "selection background" setting does. Presented near "Profile_SelectionBackground".</comment>
+  </data>
+  <data name="NullableColorPicker_MoreColorsButton.Content" xml:space="preserve">
+    <value>More colors...</value>
+    <comment>Text label for a button that allows the user to select from more colors in a new window. {Locked="..."}</comment>
+  </data>
+  <data name="NullableColorPicker_ColorPickerContentDialog.Title" xml:space="preserve">
+    <value>Pick a color</value>
+    <comment>Title displayed on a content dialog directing the user to pick a color.</comment>
+  </data>
+  <data name="NullableColorPicker_ColorPickerContentDialog.PrimaryButtonText" xml:space="preserve">
+    <value>OK</value>
+    <comment>Button label for the color picker content dialog. Used as confirmation to apply the selected color.</comment>
+  </data>
+  <data name="NullableColorPicker_ColorPickerContentDialog.SecondaryButtonText" xml:space="preserve">
+    <value>Cancel</value>
+    <comment>Text label for secondary button the color picker content dialog. When clicked, the operation of selecting a color is cancelled by the user.</comment>
+  </data>
+  <data name="Profile_CursorColor_NullableColorPicker.NullColorButtonLabel" xml:space="preserve">
+    <value>Use cursor color from color scheme</value>
+    <comment>Label for a button directing the user to use the cursor color defined in the terminal's current color scheme.</comment>
+  </data>
+  <data name="Profile_Foreground_NullableColorPicker.NullColorButtonLabel" xml:space="preserve">
+    <value>Use foreground color from color scheme</value>
+    <comment>Label for a button directing the user to use the foreground color defined in the terminal's current color scheme.</comment>
+  </data>
+  <data name="Profile_Background_NullableColorPicker.NullColorButtonLabel" xml:space="preserve">
+    <value>Use background color from color scheme</value>
+    <comment>Label for a button directing the user to use the background color defined in the terminal's current color scheme.</comment>
+  </data>
+  <data name="Profile_SelectionBackground_NullableColorPicker.NullColorButtonLabel" xml:space="preserve">
+    <value>Use selection background color from color scheme</value>
+    <comment>Label for a button directing the user to use the selection background color defined in the terminal's current color scheme.</comment>
+  </data>
 </root>
\ No newline at end of file
diff --git a/src/cascadia/TerminalSettingsEditor/SettingContainer.cpp b/src/cascadia/TerminalSettingsEditor/SettingContainer.cpp
index 8a32fbacb31..85b4ae30064 100644
--- a/src/cascadia/TerminalSettingsEditor/SettingContainer.cpp
+++ b/src/cascadia/TerminalSettingsEditor/SettingContainer.cpp
@@ -13,6 +13,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
     DependencyProperty SettingContainer::_HeaderProperty{ nullptr };
     DependencyProperty SettingContainer::_HelpTextProperty{ nullptr };
     DependencyProperty SettingContainer::_CurrentValueProperty{ nullptr };
+    DependencyProperty SettingContainer::_CurrentValueTemplateProperty{ nullptr };
     DependencyProperty SettingContainer::_HasSettingValueProperty{ nullptr };
     DependencyProperty SettingContainer::_SettingOverrideSourceProperty{ nullptr };
     DependencyProperty SettingContainer::_StartExpandedProperty{ nullptr };
@@ -50,9 +51,18 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
             _CurrentValueProperty =
                 DependencyProperty::Register(
                     L"CurrentValue",
-                    xaml_typename<hstring>(),
+                    xaml_typename<IInspectable>(),
                     xaml_typename<Editor::SettingContainer>(),
-                    PropertyMetadata{ box_value(L"") });
+                    PropertyMetadata{ nullptr });
+        }
+        if (!_CurrentValueTemplateProperty)
+        {
+            _CurrentValueTemplateProperty =
+                DependencyProperty::Register(
+                    L"CurrentValueTemplate",
+                    xaml_typename<Windows::UI::Xaml::DataTemplate>(),
+                    xaml_typename<Editor::SettingContainer>(),
+                    PropertyMetadata{ nullptr });
         }
         if (!_HasSettingValueProperty)
         {
diff --git a/src/cascadia/TerminalSettingsEditor/SettingContainer.h b/src/cascadia/TerminalSettingsEditor/SettingContainer.h
index 9fcb2d24efa..711dcca62df 100644
--- a/src/cascadia/TerminalSettingsEditor/SettingContainer.h
+++ b/src/cascadia/TerminalSettingsEditor/SettingContainer.h
@@ -35,7 +35,8 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
 
         DEPENDENCY_PROPERTY(Windows::Foundation::IInspectable, Header);
         DEPENDENCY_PROPERTY(hstring, HelpText);
-        DEPENDENCY_PROPERTY(hstring, CurrentValue);
+        DEPENDENCY_PROPERTY(Windows::Foundation::IInspectable, CurrentValue);
+        DEPENDENCY_PROPERTY(Windows::UI::Xaml::DataTemplate, CurrentValueTemplate);
         DEPENDENCY_PROPERTY(bool, HasSettingValue);
         DEPENDENCY_PROPERTY(bool, StartExpanded);
         DEPENDENCY_PROPERTY(IInspectable, SettingOverrideSource);
diff --git a/src/cascadia/TerminalSettingsEditor/SettingContainer.idl b/src/cascadia/TerminalSettingsEditor/SettingContainer.idl
index 8b5fd0eba95..0d2d0d4011f 100644
--- a/src/cascadia/TerminalSettingsEditor/SettingContainer.idl
+++ b/src/cascadia/TerminalSettingsEditor/SettingContainer.idl
@@ -15,9 +15,12 @@ namespace Microsoft.Terminal.Settings.Editor
         String HelpText;
         static Windows.UI.Xaml.DependencyProperty HelpTextProperty { get; };
 
-        String CurrentValue;
+        IInspectable CurrentValue;
         static Windows.UI.Xaml.DependencyProperty CurrentValueProperty { get; };
 
+        Windows.UI.Xaml.DataTemplate CurrentValueTemplate;
+        static Windows.UI.Xaml.DependencyProperty CurrentValueTemplateProperty { get; };
+
         Boolean HasSettingValue;
         static Windows.UI.Xaml.DependencyProperty HasSettingValueProperty { get; };
 
diff --git a/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml b/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml
index 0e12e7d3de7..c4ee06b85c6 100644
--- a/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml
+++ b/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml
@@ -7,6 +7,7 @@
                     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                     xmlns:local="using:Microsoft.Terminal.Settings.Editor"
                     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+                    xmlns:mtu="using:Microsoft.Terminal.UI"
                     xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
                     mc:Ignorable="d">
 
@@ -169,6 +170,16 @@
         <Setter Property="TextWrapping" Value="WrapWholeWords" />
     </Style>
 
+    <DataTemplate x:Key="ExpanderSettingContainerStringPreviewTemplate">
+        <TextBlock MaxWidth="250"
+                   Margin="0,0,-16,0"
+                   HorizontalAlignment="Right"
+                   VerticalAlignment="Center"
+                   FontFamily="Segoe UI, Segoe Fluent Icons, Segoe MDL2 Assets"
+                   Style="{StaticResource SettingsPageItemDescriptionStyle}"
+                   Text="{Binding}" />
+    </DataTemplate>
+
     <!--  A setting container for a setting that has no additional options  -->
     <Style TargetType="local:SettingContainer">
         <Setter Property="Margin" Value="0,4,0,0" />
@@ -241,14 +252,58 @@
                                                Style="{StaticResource SettingsPageItemDescriptionStyle}"
                                                Text="{TemplateBinding HelpText}" />
                                 </StackPanel>
-                                <TextBlock Grid.Column="1"
-                                           MaxWidth="250"
-                                           Margin="0,0,-16,0"
-                                           HorizontalAlignment="Right"
-                                           VerticalAlignment="Center"
-                                           FontFamily="Segoe UI, Segoe Fluent Icons, Segoe MDL2 Assets"
-                                           Style="{StaticResource SettingsPageItemDescriptionStyle}"
-                                           Text="{TemplateBinding CurrentValue}" />
+                                <ContentPresenter Grid.Column="1"
+                                                  Content="{TemplateBinding CurrentValue}"
+                                                  ContentTemplate="{StaticResource ExpanderSettingContainerStringPreviewTemplate}" />
+                            </Grid>
+                        </muxc:Expander.Header>
+                    </muxc:Expander>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <!--  A setting container which can expand. Supports data template override for preview  -->
+    <Style x:Key="ExpanderSettingContainerStyleWithComplexPreview"
+           TargetType="local:SettingContainer">
+        <Setter Property="MaxWidth" Value="1000" />
+        <Setter Property="IsTabStop" Value="False" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="local:SettingContainer">
+                    <muxc:Expander x:Name="Expander"
+                                   Margin="0,4,0,0"
+                                   HorizontalAlignment="Stretch"
+                                   HorizontalContentAlignment="Stretch"
+                                   Content="{TemplateBinding Content}"
+                                   IsExpanded="{TemplateBinding StartExpanded}">
+                        <muxc:Expander.Header>
+                            <Grid MinHeight="64">
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="*" />
+                                    <ColumnDefinition Width="Auto" />
+                                </Grid.ColumnDefinitions>
+                                <StackPanel Style="{StaticResource StackPanelInExpanderStyle}">
+                                    <StackPanel Orientation="Horizontal">
+                                        <TextBlock Style="{StaticResource SettingsPageItemHeaderStyle}"
+                                                   Text="{TemplateBinding Header}" />
+                                        <Button x:Name="ResetButton"
+                                                Style="{StaticResource SettingContainerResetButtonStyle}">
+                                            <FontIcon Glyph="&#xE845;"
+                                                      Style="{StaticResource SettingContainerFontIconStyle}" />
+                                        </Button>
+                                    </StackPanel>
+                                    <TextBlock x:Name="HelpTextBlock"
+                                               Style="{StaticResource SettingsPageItemDescriptionStyle}"
+                                               Text="{TemplateBinding HelpText}" />
+                                </StackPanel>
+                                <ContentPresenter Grid.Column="1"
+                                                  MaxWidth="250"
+                                                  Margin="0,0,-16,0"
+                                                  HorizontalAlignment="Right"
+                                                  VerticalAlignment="Center"
+                                                  Content="{TemplateBinding CurrentValue}"
+                                                  ContentTemplate="{TemplateBinding CurrentValueTemplate}" />
                             </Grid>
                         </muxc:Expander.Header>
                     </muxc:Expander>
diff --git a/src/cascadia/TerminalSettingsEditor/TerminalColorConverters.cpp b/src/cascadia/TerminalSettingsEditor/TerminalColorConverters.cpp
new file mode 100644
index 00000000000..293f225d0c2
--- /dev/null
+++ b/src/cascadia/TerminalSettingsEditor/TerminalColorConverters.cpp
@@ -0,0 +1,35 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+#include "pch.h"
+#include "TerminalColorConverters.h"
+#include "ColorToBrushConverter.g.cpp"
+#include "ColorToStringConverter.g.cpp"
+
+using namespace winrt::Microsoft::Terminal::Settings::Model;
+
+namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
+{
+
+    Windows::Foundation::IInspectable ColorToBrushConverter::Convert(Windows::Foundation::IInspectable const& value, Windows::UI::Xaml::Interop::TypeName const& /*targetType*/, Windows::Foundation::IInspectable const& /*parameter*/, hstring const& /*language*/)
+    {
+        const auto color = value.as<Windows::UI::Color>();
+        return Microsoft::Terminal::UI::Converters::ColorToBrush(color);
+    }
+
+    Windows::Foundation::IInspectable ColorToBrushConverter::ConvertBack(Windows::Foundation::IInspectable const& /*value*/, Windows::UI::Xaml::Interop::TypeName const& /*targetType*/, Windows::Foundation::IInspectable const& /*parameter*/, hstring const& /*language*/)
+    {
+        throw hresult_not_implemented();
+    }
+
+    Windows::Foundation::IInspectable ColorToStringConverter::Convert(Windows::Foundation::IInspectable const& value, Windows::UI::Xaml::Interop::TypeName const& /*targetType*/, Windows::Foundation::IInspectable const& /*parameter*/, hstring const& /*language*/)
+    {
+        const auto color = value.as<Windows::UI::Color>();
+        return winrt::box_value(fmt::format(FMT_COMPILE(L"#{:02X}{:02X}{:02X}"), color.R, color.G, color.B));
+    }
+
+    Windows::Foundation::IInspectable ColorToStringConverter::ConvertBack(Windows::Foundation::IInspectable const& /*value*/, Windows::UI::Xaml::Interop::TypeName const& /*targetType*/, Windows::Foundation::IInspectable const& /*parameter*/, hstring const& /*language*/)
+    {
+        throw hresult_not_implemented();
+    }
+}
diff --git a/src/cascadia/TerminalSettingsEditor/TerminalColorConverters.h b/src/cascadia/TerminalSettingsEditor/TerminalColorConverters.h
new file mode 100644
index 00000000000..9c956548a44
--- /dev/null
+++ b/src/cascadia/TerminalSettingsEditor/TerminalColorConverters.h
@@ -0,0 +1,33 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+#pragma once
+
+#include "ColorToBrushConverter.g.h"
+#include "ColorToStringConverter.g.h"
+#include "Utils.h"
+
+namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
+{
+    struct ColorToBrushConverter : ColorToBrushConverterT<ColorToBrushConverter>
+    {
+        ColorToBrushConverter() = default;
+
+        Windows::Foundation::IInspectable Convert(Windows::Foundation::IInspectable const& value, Windows::UI::Xaml::Interop::TypeName const& targetType, Windows::Foundation::IInspectable const& parameter, hstring const& language);
+        Windows::Foundation::IInspectable ConvertBack(Windows::Foundation::IInspectable const& value, Windows::UI::Xaml::Interop::TypeName const& targetType, Windows::Foundation::IInspectable const& parameter, hstring const& language);
+    };
+
+    struct ColorToStringConverter : ColorToStringConverterT<ColorToStringConverter>
+    {
+        ColorToStringConverter() = default;
+
+        Windows::Foundation::IInspectable Convert(Windows::Foundation::IInspectable const& value, Windows::UI::Xaml::Interop::TypeName const& targetType, Windows::Foundation::IInspectable const& parameter, hstring const& language);
+        Windows::Foundation::IInspectable ConvertBack(Windows::Foundation::IInspectable const& value, Windows::UI::Xaml::Interop::TypeName const& targetType, Windows::Foundation::IInspectable const& parameter, hstring const& language);
+    };
+};
+
+namespace winrt::Microsoft::Terminal::Settings::Editor::factory_implementation
+{
+    BASIC_FACTORY(ColorToBrushConverter);
+    BASIC_FACTORY(ColorToStringConverter);
+}
diff --git a/src/cascadia/TerminalSettingsEditor/TerminalColorConverters.idl b/src/cascadia/TerminalSettingsEditor/TerminalColorConverters.idl
new file mode 100644
index 00000000000..98f06c89afc
--- /dev/null
+++ b/src/cascadia/TerminalSettingsEditor/TerminalColorConverters.idl
@@ -0,0 +1,15 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+namespace Microsoft.Terminal.Settings.Editor
+{
+    runtimeclass ColorToBrushConverter : [default] Windows.UI.Xaml.Data.IValueConverter
+    {
+        ColorToBrushConverter();
+    }
+
+    runtimeclass ColorToStringConverter : [default] Windows.UI.Xaml.Data.IValueConverter
+    {
+        ColorToStringConverter();
+    }
+}
diff --git a/src/cascadia/UIHelpers/Converters.cpp b/src/cascadia/UIHelpers/Converters.cpp
index 812d902102b..37112ceb736 100644
--- a/src/cascadia/UIHelpers/Converters.cpp
+++ b/src/cascadia/UIHelpers/Converters.cpp
@@ -18,6 +18,11 @@ namespace winrt::Microsoft::Terminal::UI::implementation
         return value ? winrt::Windows::UI::Xaml::Visibility::Collapsed : winrt::Windows::UI::Xaml::Visibility::Visible;
     }
 
+    winrt::Windows::UI::Xaml::Visibility Converters::BooleanToVisibility(bool value)
+    {
+        return value ? winrt::Windows::UI::Xaml::Visibility::Visible : winrt::Windows::UI::Xaml::Visibility::Collapsed;
+    }
+
     // Numbers
     double Converters::PercentageToPercentageValue(double value)
     {
diff --git a/src/cascadia/UIHelpers/Converters.h b/src/cascadia/UIHelpers/Converters.h
index af8bcecb458..687533f2484 100644
--- a/src/cascadia/UIHelpers/Converters.h
+++ b/src/cascadia/UIHelpers/Converters.h
@@ -12,6 +12,7 @@ namespace winrt::Microsoft::Terminal::UI::implementation
         // Booleans
         static bool InvertBoolean(bool value);
         static winrt::Windows::UI::Xaml::Visibility InvertedBooleanToVisibility(bool value);
+        static winrt::Windows::UI::Xaml::Visibility BooleanToVisibility(bool value);
 
         // Numbers
         static double PercentageToPercentageValue(double value);
diff --git a/src/cascadia/UIHelpers/Converters.idl b/src/cascadia/UIHelpers/Converters.idl
index baf8a97af65..a6a1427e278 100644
--- a/src/cascadia/UIHelpers/Converters.idl
+++ b/src/cascadia/UIHelpers/Converters.idl
@@ -10,6 +10,7 @@ namespace Microsoft.Terminal.UI
         // Booleans
         static Boolean InvertBoolean(Boolean value);
         static Windows.UI.Xaml.Visibility InvertedBooleanToVisibility(Boolean value);
+        static Windows.UI.Xaml.Visibility BooleanToVisibility(Boolean value);
 
         // Numbers
         static Double PercentageToPercentageValue(Double value);