diff --git a/src/gui/symbology-ng/qgsellipsesymbollayerv2widget.cpp b/src/gui/symbology-ng/qgsellipsesymbollayerv2widget.cpp
index 08be76cc8bcb..0a65eb0b636f 100644
--- a/src/gui/symbology-ng/qgsellipsesymbollayerv2widget.cpp
+++ b/src/gui/symbology-ng/qgsellipsesymbollayerv2widget.cpp
@@ -22,6 +22,18 @@
 QgsEllipseSymbolLayerV2Widget::QgsEllipseSymbolLayerV2Widget( const QgsVectorLayer* vl, QWidget* parent ): QgsSymbolLayerV2Widget( parent, vl )
 {
   setupUi( this );
+
+  btnChangeColorFill->setColorDialogOptions( QColorDialog::ShowAlphaChannel );
+  btnChangeColorFill->setColorDialogTitle( tr( "Select fill color" ) );
+  btnChangeColorFill->setContext( "symbology" );
+  btnChangeColorFill->setShowNoColor( true );
+  btnChangeColorFill->setNoColorString( tr( "Transparent fill" ) );
+  btnChangeColorBorder->setColorDialogOptions( QColorDialog::ShowAlphaChannel );
+  btnChangeColorBorder->setColorDialogTitle( tr( "Select border color" ) );
+  btnChangeColorBorder->setContext( "symbology" );
+  btnChangeColorBorder->setShowNoColor( true );
+  btnChangeColorBorder->setNoColorString( tr( "Transparent border" ) );
+
   QStringList names;
   names << "circle" << "rectangle" << "cross" << "triangle";
   QSize iconSize = mShapeListWidget->iconSize();
@@ -59,11 +71,8 @@ void QgsEllipseSymbolLayerV2Widget::setSymbolLayer( QgsSymbolLayerV2* layer )
   mRotationSpinBox->setValue( mLayer->angle() );
   mOutlineStyleComboBox->setPenStyle( mLayer->outlineStyle() );
   mOutlineWidthSpinBox->setValue( mLayer->outlineWidth() );
-
   btnChangeColorBorder->setColor( mLayer->outlineColor() );
-  btnChangeColorBorder->setColorDialogOptions( QColorDialog::ShowAlphaChannel );
   btnChangeColorFill->setColor( mLayer->fillColor() );
-  btnChangeColorFill->setColorDialogOptions( QColorDialog::ShowAlphaChannel );
 
   QList<QListWidgetItem *> symbolItemList = mShapeListWidget->findItems( mLayer->symbolName(), Qt::MatchExactly );
   if ( symbolItemList.size() > 0 )
diff --git a/src/gui/symbology-ng/qgssymbollayerv2widget.cpp b/src/gui/symbology-ng/qgssymbollayerv2widget.cpp
index 079ad2558dc1..201503932b79 100644
--- a/src/gui/symbology-ng/qgssymbollayerv2widget.cpp
+++ b/src/gui/symbology-ng/qgssymbollayerv2widget.cpp
@@ -76,6 +76,10 @@ QgsSimpleLineSymbolLayerV2Widget::QgsSimpleLineSymbolLayerV2Widget( const QgsVec
   mOffsetUnitWidget->setUnits( QStringList() << tr( "Millimeter" ) << tr( "Map unit" ), 1 );
   mDashPatternUnitWidget->setUnits( QStringList() << tr( "Millimeter" ) << tr( "Map unit" ), 1 );
 
+  btnChangeColor->setColorDialogOptions( QColorDialog::ShowAlphaChannel );
+  btnChangeColor->setColorDialogTitle( tr( "Select line color" ) );
+  btnChangeColor->setContext( "symbology" );
+
   if ( vl && vl->geometryType() != QGis::Polygon )
   {
     //draw inside polygon checkbox only makes sense for polygon layers
@@ -121,7 +125,6 @@ void QgsSimpleLineSymbolLayerV2Widget::setSymbolLayer( QgsSymbolLayerV2* layer )
   spinWidth->blockSignals( false );
   btnChangeColor->blockSignals( true );
   btnChangeColor->setColor( mLayer->color() );
-  btnChangeColor->setColorDialogOptions( QColorDialog::ShowAlphaChannel );
   btnChangeColor->blockSignals( false );
   spinOffset->blockSignals( true );
   spinOffset->setValue( mLayer->offset() );
@@ -318,6 +321,17 @@ QgsSimpleMarkerSymbolLayerV2Widget::QgsSimpleMarkerSymbolLayerV2Widget( const Qg
   mOffsetUnitWidget->setUnits( QStringList() << tr( "Millimeter" ) << tr( "Map unit" ), 1 );
   mOutlineWidthUnitWidget->setUnits( QStringList() << tr( "Millimeter" ) << tr( "Map unit" ), 1 );
 
+  btnChangeColorFill->setColorDialogOptions( QColorDialog::ShowAlphaChannel );
+  btnChangeColorFill->setColorDialogTitle( tr( "Select fill color" ) );
+  btnChangeColorFill->setContext( "symbology" );
+  btnChangeColorFill->setShowNoColor( true );
+  btnChangeColorFill->setNoColorString( tr( "Transparent fill" ) );
+  btnChangeColorBorder->setColorDialogOptions( QColorDialog::ShowAlphaChannel );
+  btnChangeColorBorder->setColorDialogTitle( tr( "Select border color" ) );
+  btnChangeColorBorder->setContext( "symbology" );
+  btnChangeColorBorder->setShowNoColor( true );
+  btnChangeColorBorder->setNoColorString( tr( "Transparent border" ) );
+
   QSize size = lstNames->iconSize();
   QStringList names;
   names << "circle" << "rectangle" << "diamond" << "pentagon" << "cross" << "cross2" << "triangle"
@@ -361,11 +375,9 @@ void QgsSimpleMarkerSymbolLayerV2Widget::setSymbolLayer( QgsSymbolLayerV2* layer
   }
   btnChangeColorBorder->blockSignals( true );
   btnChangeColorBorder->setColor( mLayer->borderColor() );
-  btnChangeColorBorder->setColorDialogOptions( QColorDialog::ShowAlphaChannel );
   btnChangeColorBorder->blockSignals( false );
   btnChangeColorFill->blockSignals( true );
   btnChangeColorFill->setColor( mLayer->color() );
-  btnChangeColorFill->setColorDialogOptions( QColorDialog::ShowAlphaChannel );
   btnChangeColorFill->blockSignals( false );
   spinSize->blockSignals( true );
   spinSize->setValue( mLayer->size() );
@@ -579,9 +591,13 @@ QgsSimpleFillSymbolLayerV2Widget::QgsSimpleFillSymbolLayerV2Widget( const QgsVec
   mBorderWidthUnitWidget->setUnits( QStringList() << tr( "Millimeter" ) << tr( "Map unit" ), 1 );
   mOffsetUnitWidget->setUnits( QStringList() << tr( "Millimeter" ) << tr( "Map unit" ), 1 );
 
+  btnChangeColor->setColorDialogOptions( QColorDialog::ShowAlphaChannel );
+  btnChangeColor->setColorDialogTitle( tr( "Select fill color" ) );
   btnChangeColor->setContext( "symbology" );
   btnChangeColor->setShowNoColor( true );
   btnChangeColor->setNoColorString( tr( "Transparent fill" ) );
+  btnChangeBorderColor->setColorDialogOptions( QColorDialog::ShowAlphaChannel );
+  btnChangeBorderColor->setColorDialogTitle( tr( "Select border color" ) );
   btnChangeBorderColor->setContext( "symbology" );
   btnChangeBorderColor->setShowNoColor( true );
   btnChangeBorderColor->setNoColorString( tr( "Transparent border" ) );
@@ -607,14 +623,12 @@ void QgsSimpleFillSymbolLayerV2Widget::setSymbolLayer( QgsSymbolLayerV2* layer )
   // set values
   btnChangeColor->blockSignals( true );
   btnChangeColor->setColor( mLayer->color() );
-  btnChangeColor->setColorDialogOptions( QColorDialog::ShowAlphaChannel );
   btnChangeColor->blockSignals( false );
   cboFillStyle->blockSignals( true );
   cboFillStyle->setBrushStyle( mLayer->brushStyle() );
   cboFillStyle->blockSignals( false );
   btnChangeBorderColor->blockSignals( true );
   btnChangeBorderColor->setColor( mLayer->borderColor() );
-  btnChangeBorderColor->setColorDialogOptions( QColorDialog::ShowAlphaChannel );
   btnChangeBorderColor->blockSignals( false );
   cboBorderStyle->blockSignals( true );
   cboBorderStyle->setPenStyle( mLayer->borderStyle() );
@@ -751,6 +765,17 @@ QgsGradientFillSymbolLayerV2Widget::QgsGradientFillSymbolLayerV2Widget( const Qg
   cboGradientColorRamp->setShowGradientOnly( true );
   cboGradientColorRamp->populate( QgsStyleV2::defaultStyle() );
 
+  btnChangeColor->setColorDialogOptions( QColorDialog::ShowAlphaChannel );
+  btnChangeColor->setColorDialogTitle( tr( "Select gradient color" ) );
+  btnChangeColor->setContext( "symbology" );
+  btnChangeColor->setShowNoColor( true );
+  btnChangeColor->setNoColorString( tr( "Transparent" ) );
+  btnChangeColor2->setColorDialogOptions( QColorDialog::ShowAlphaChannel );
+  btnChangeColor2->setColorDialogTitle( tr( "Select gradient color" ) );
+  btnChangeColor2->setContext( "symbology" );
+  btnChangeColor2->setShowNoColor( true );
+  btnChangeColor2->setNoColorString( tr( "Transparent" ) );
+
   connect( btnChangeColor, SIGNAL( colorChanged( const QColor& ) ), this, SLOT( setColor( const QColor& ) ) );
   connect( btnChangeColor2, SIGNAL( colorChanged( const QColor& ) ), this, SLOT( setColor2( const QColor& ) ) );
   connect( cboGradientColorRamp, SIGNAL( currentIndexChanged( int ) ) , this, SLOT( applyColorRamp() ) );
@@ -779,11 +804,9 @@ void QgsGradientFillSymbolLayerV2Widget::setSymbolLayer( QgsSymbolLayerV2* layer
   // set values
   btnChangeColor->blockSignals( true );
   btnChangeColor->setColor( mLayer->color() );
-  btnChangeColor->setColorDialogOptions( QColorDialog::ShowAlphaChannel );
   btnChangeColor->blockSignals( false );
   btnChangeColor2->blockSignals( true );
   btnChangeColor2->setColor( mLayer->color2() );
-  btnChangeColor2->setColorDialogOptions( QColorDialog::ShowAlphaChannel );
   btnChangeColor2->blockSignals( false );
 
   if ( mLayer->gradientColorType() == QgsGradientFillSymbolLayerV2::SimpleTwoColor )
@@ -1102,6 +1125,17 @@ QgsShapeburstFillSymbolLayerV2Widget::QgsShapeburstFillSymbolLayerV2Widget( cons
   mDistanceUnitWidget->setUnits( QStringList() << tr( "Millimeter" ) << tr( "Map unit" ), 1 );
   mOffsetUnitWidget->setUnits( QStringList() << tr( "Millimeter" ) << tr( "Map unit" ), 1 );
 
+  btnChangeColor->setColorDialogOptions( QColorDialog::ShowAlphaChannel );
+  btnChangeColor->setColorDialogTitle( tr( "Select gradient color" ) );
+  btnChangeColor->setContext( "symbology" );
+  btnChangeColor->setShowNoColor( true );
+  btnChangeColor->setNoColorString( tr( "Transparent" ) );
+  btnChangeColor2->setColorDialogOptions( QColorDialog::ShowAlphaChannel );
+  btnChangeColor2->setColorDialogTitle( tr( "Select gradient color" ) );
+  btnChangeColor2->setContext( "symbology" );
+  btnChangeColor2->setShowNoColor( true );
+  btnChangeColor2->setNoColorString( tr( "Transparent" ) );
+
   cboGradientColorRamp->setShowGradientOnly( true );
   cboGradientColorRamp->populate( QgsStyleV2::defaultStyle() );
 
@@ -1127,11 +1161,9 @@ void QgsShapeburstFillSymbolLayerV2Widget::setSymbolLayer( QgsSymbolLayerV2* lay
   // set values
   btnChangeColor->blockSignals( true );
   btnChangeColor->setColor( mLayer->color() );
-  btnChangeColor->setColorDialogOptions( QColorDialog::ShowAlphaChannel );
   btnChangeColor->blockSignals( false );
   btnChangeColor2->blockSignals( true );
   btnChangeColor2->setColor( mLayer->color2() );
-  btnChangeColor2->setColorDialogOptions( QColorDialog::ShowAlphaChannel );
   btnChangeColor2->blockSignals( false );
 
   if ( mLayer->colorType() == QgsShapeburstFillSymbolLayerV2::SimpleTwoColor )
@@ -1557,6 +1589,11 @@ QgsSvgMarkerSymbolLayerV2Widget::QgsSvgMarkerSymbolLayerV2Widget( const QgsVecto
   mOffsetUnitWidget->setUnits( QStringList() << tr( "Millimeter" ) << tr( "Map unit" ), 1 );
   viewGroups->setHeaderHidden( true );
 
+  mChangeColorButton->setColorDialogTitle( tr( "Select fill color" ) );
+  mChangeColorButton->setContext( "symbology" );
+  mChangeBorderColorButton->setColorDialogTitle( tr( "Select border color" ) );
+  mChangeColorButton->setContext( "symbology" );
+
   populateList();
 
   connect( viewImages->selectionModel(), SIGNAL( currentChanged( const QModelIndex&, const QModelIndex& ) ), this, SLOT( setName( const QModelIndex& ) ) );
@@ -2045,6 +2082,11 @@ QgsSVGFillSymbolLayerWidget::QgsSVGFillSymbolLayerWidget( const QgsVectorLayer*
   mSvgTreeView->setHeaderHidden( true );
   insertIcons();
 
+  mChangeColorButton->setColorDialogTitle( tr( "Select fill color" ) );
+  mChangeColorButton->setContext( "symbology" );
+  mChangeBorderColorButton->setColorDialogTitle( tr( "Select border color" ) );
+  mChangeBorderColorButton->setContext( "symbology" );
+
   connect( mSvgListView->selectionModel(), SIGNAL( currentChanged( const QModelIndex&, const QModelIndex& ) ), this, SLOT( setFile( const QModelIndex& ) ) );
   connect( mSvgTreeView->selectionModel(), SIGNAL( currentChanged( const QModelIndex&, const QModelIndex& ) ), this, SLOT( populateIcons( const QModelIndex& ) ) );
 }
@@ -2639,6 +2681,10 @@ QgsFontMarkerSymbolLayerV2Widget::QgsFontMarkerSymbolLayerV2Widget( const QgsVec
   widgetChar = new CharacterWidget;
   scrollArea->setWidget( widgetChar );
 
+  btnColor->setColorDialogOptions( QColorDialog::ShowAlphaChannel );
+  btnColor->setColorDialogTitle( tr( "Select symbol color" ) );
+  btnColor->setContext( "symbology" );
+
   connect( cboFont, SIGNAL( currentFontChanged( const QFont & ) ), this, SLOT( setFontFamily( const QFont& ) ) );
   connect( spinSize, SIGNAL( valueChanged( double ) ), this, SLOT( setSize( double ) ) );
   connect( btnColor, SIGNAL( colorChanged( const QColor& ) ), this, SLOT( setColor( const QColor& ) ) );
@@ -2666,7 +2712,6 @@ void QgsFontMarkerSymbolLayerV2Widget::setSymbolLayer( QgsSymbolLayerV2* layer )
   spinSize->blockSignals( false );
   btnColor->blockSignals( true );
   btnColor->setColor( mLayer->color() );
-  btnColor->setColorDialogOptions( QColorDialog::ShowAlphaChannel );
   btnColor->blockSignals( false );
   spinAngle->blockSignals( true );
   spinAngle->setValue( mLayer->angle() );
diff --git a/src/gui/symbology-ng/qgssymbolslistwidget.cpp b/src/gui/symbology-ng/qgssymbolslistwidget.cpp
index 1235b6b88e15..6b8605ec7913 100644
--- a/src/gui/symbology-ng/qgssymbolslistwidget.cpp
+++ b/src/gui/symbology-ng/qgssymbolslistwidget.cpp
@@ -86,6 +86,8 @@ QgsSymbolsListWidget::QgsSymbolsListWidget( QgsSymbolV2* symbol, QgsStyleV2* sty
   // Live color updates are not undoable to child symbol layers
   btnColor->setAcceptLiveUpdates( false );
   btnColor->setColorDialogOptions( QColorDialog::ShowAlphaChannel );
+  btnColor->setColorDialogTitle( tr( "Select color" ) );
+  btnColor->setContext( "symbology" );
 }
 
 void QgsSymbolsListWidget::populateGroups( QString parent, QString prepend )
diff --git a/src/ui/symbollayer/widget_ellipse.ui b/src/ui/symbollayer/widget_ellipse.ui
index f4945945a77b..98885a512094 100644
--- a/src/ui/symbollayer/widget_ellipse.ui
+++ b/src/ui/symbollayer/widget_ellipse.ui
@@ -66,7 +66,7 @@
         </widget>
        </item>
        <item>
-        <widget class="QgsColorButton" name="btnChangeColorFill">
+        <widget class="QgsColorButtonV2" name="btnChangeColorFill">
          <property name="minimumSize">
           <size>
            <width>100</width>
@@ -98,7 +98,7 @@
         </widget>
        </item>
        <item>
-        <widget class="QgsColorButton" name="btnChangeColorBorder">
+        <widget class="QgsColorButtonV2" name="btnChangeColorBorder">
          <property name="minimumSize">
           <size>
            <width>100</width>
@@ -399,9 +399,9 @@
  </widget>
  <customwidgets>
   <customwidget>
-   <class>QgsColorButton</class>
-   <extends>QPushButton</extends>
-   <header>qgscolorbutton.h</header>
+   <class>QgsColorButtonV2</class>
+   <extends>QToolButton</extends>
+   <header>qgscolorbuttonv2.h</header>
   </customwidget>
   <customwidget>
    <class>QgsUnitSelectionWidget</class>
diff --git a/src/ui/symbollayer/widget_fontmarker.ui b/src/ui/symbollayer/widget_fontmarker.ui
index 40691be1c1de..14ce4639267e 100644
--- a/src/ui/symbollayer/widget_fontmarker.ui
+++ b/src/ui/symbollayer/widget_fontmarker.ui
@@ -34,16 +34,16 @@
       </widget>
      </item>
      <item row="1" column="1">
-      <widget class="QgsColorButton" name="btnColor">
+      <widget class="QgsColorButtonV2" name="btnColor">
        <property name="minimumSize">
         <size>
-         <width>100</width>
+         <width>120</width>
          <height>0</height>
         </size>
        </property>
        <property name="maximumSize">
         <size>
-         <width>100</width>
+         <width>120</width>
          <height>16777215</height>
         </size>
        </property>
@@ -238,9 +238,9 @@
  </widget>
  <customwidgets>
   <customwidget>
-   <class>QgsColorButton</class>
-   <extends>QPushButton</extends>
-   <header>qgscolorbutton.h</header>
+   <class>QgsColorButtonV2</class>
+   <extends>QToolButton</extends>
+   <header>qgscolorbuttonv2.h</header>
   </customwidget>
   <customwidget>
    <class>QgsUnitSelectionWidget</class>
diff --git a/src/ui/symbollayer/widget_gradientfill.ui b/src/ui/symbollayer/widget_gradientfill.ui
index bfac88f2fd7e..0570da3daaba 100644
--- a/src/ui/symbollayer/widget_gradientfill.ui
+++ b/src/ui/symbollayer/widget_gradientfill.ui
@@ -6,7 +6,7 @@
    <rect>
     <x>0</x>
     <y>0</y>
-    <width>474</width>
+    <width>494</width>
     <height>358</height>
    </rect>
   </property>
@@ -23,16 +23,7 @@
    <property name="horizontalSpacing">
     <number>28</number>
    </property>
-   <property name="leftMargin">
-    <number>1</number>
-   </property>
-   <property name="topMargin">
-    <number>1</number>
-   </property>
-   <property name="rightMargin">
-    <number>1</number>
-   </property>
-   <property name="bottomMargin">
+   <property name="margin">
     <number>1</number>
    </property>
    <item row="0" column="0">
@@ -48,16 +39,16 @@
       <number>12</number>
      </property>
      <item>
-      <widget class="QgsColorButton" name="btnChangeColor">
+      <widget class="QgsColorButtonV2" name="btnChangeColor">
        <property name="minimumSize">
         <size>
-         <width>100</width>
+         <width>120</width>
          <height>0</height>
         </size>
        </property>
        <property name="maximumSize">
         <size>
-         <width>100</width>
+         <width>120</width>
          <height>16777215</height>
         </size>
        </property>
@@ -67,13 +58,19 @@
       </widget>
      </item>
      <item>
-      <widget class="QgsColorButton" name="btnChangeColor2">
+      <widget class="QgsColorButtonV2" name="btnChangeColor2">
        <property name="minimumSize">
         <size>
-         <width>100</width>
+         <width>120</width>
          <height>0</height>
         </size>
        </property>
+       <property name="maximumSize">
+        <size>
+         <width>120</width>
+         <height>16777215</height>
+        </size>
+       </property>
        <property name="text">
         <string/>
        </property>
@@ -429,9 +426,9 @@
  </widget>
  <customwidgets>
   <customwidget>
-   <class>QgsColorButton</class>
-   <extends>QPushButton</extends>
-   <header>qgscolorbutton.h</header>
+   <class>QgsColorButtonV2</class>
+   <extends>QToolButton</extends>
+   <header>qgscolorbuttonv2.h</header>
   </customwidget>
   <customwidget>
    <class>QgsUnitSelectionWidget</class>
diff --git a/src/ui/symbollayer/widget_shapeburstfill.ui b/src/ui/symbollayer/widget_shapeburstfill.ui
index 865c04d5017a..24fbea0e1097 100644
--- a/src/ui/symbollayer/widget_shapeburstfill.ui
+++ b/src/ui/symbollayer/widget_shapeburstfill.ui
@@ -33,16 +33,16 @@
       <item row="0" column="1">
        <layout class="QHBoxLayout" name="horizontalLayout_2">
         <item>
-         <widget class="QgsColorButton" name="btnChangeColor">
+         <widget class="QgsColorButtonV2" name="btnChangeColor">
           <property name="minimumSize">
            <size>
-            <width>100</width>
+            <width>120</width>
             <height>0</height>
            </size>
           </property>
           <property name="maximumSize">
            <size>
-            <width>100</width>
+            <width>120</width>
             <height>16777215</height>
            </size>
           </property>
@@ -52,13 +52,19 @@
          </widget>
         </item>
         <item>
-         <widget class="QgsColorButton" name="btnChangeColor2">
+         <widget class="QgsColorButtonV2" name="btnChangeColor2">
           <property name="minimumSize">
            <size>
-            <width>100</width>
+            <width>120</width>
             <height>0</height>
            </size>
           </property>
+          <property name="maximumSize">
+           <size>
+            <width>120</width>
+            <height>16777215</height>
+           </size>
+          </property>
           <property name="text">
            <string/>
           </property>
@@ -266,9 +272,9 @@
  </widget>
  <customwidgets>
   <customwidget>
-   <class>QgsColorButton</class>
-   <extends>QPushButton</extends>
-   <header>qgscolorbutton.h</header>
+   <class>QgsColorButtonV2</class>
+   <extends>QToolButton</extends>
+   <header>qgscolorbuttonv2.h</header>
   </customwidget>
   <customwidget>
    <class>QgsUnitSelectionWidget</class>
@@ -350,4 +356,3 @@
   </connection>
  </connections>
 </ui>
- 
diff --git a/src/ui/symbollayer/widget_simplefill.ui b/src/ui/symbollayer/widget_simplefill.ui
index a23f6016e37f..08777586967b 100644
--- a/src/ui/symbollayer/widget_simplefill.ui
+++ b/src/ui/symbollayer/widget_simplefill.ui
@@ -40,13 +40,13 @@
       <widget class="QgsColorButtonV2" name="btnChangeColor">
        <property name="minimumSize">
         <size>
-         <width>100</width>
+         <width>120</width>
          <height>0</height>
         </size>
        </property>
        <property name="maximumSize">
         <size>
-         <width>100</width>
+         <width>120</width>
          <height>16777215</height>
         </size>
        </property>
@@ -72,13 +72,13 @@
       <widget class="QgsColorButtonV2" name="btnChangeBorderColor">
        <property name="minimumSize">
         <size>
-         <width>100</width>
+         <width>120</width>
          <height>0</height>
         </size>
        </property>
        <property name="maximumSize">
         <size>
-         <width>100</width>
+         <width>120</width>
          <height>16777215</height>
         </size>
        </property>
@@ -239,16 +239,16 @@
   </layout>
  </widget>
  <customwidgets>
-  <customwidget>
-   <class>QgsPenJoinStyleComboBox</class>
-   <extends>QComboBox</extends>
-   <header>qgspenstylecombobox.h</header>
-  </customwidget>
   <customwidget>
    <class>QgsColorButtonV2</class>
    <extends>QToolButton</extends>
    <header>qgscolorbuttonv2.h</header>
   </customwidget>
+  <customwidget>
+   <class>QgsPenJoinStyleComboBox</class>
+   <extends>QComboBox</extends>
+   <header>qgspenstylecombobox.h</header>
+  </customwidget>
   <customwidget>
    <class>QgsUnitSelectionWidget</class>
    <extends>QWidget</extends>
diff --git a/src/ui/symbollayer/widget_simpleline.ui b/src/ui/symbollayer/widget_simpleline.ui
index c94f186fd849..1223ee50855c 100644
--- a/src/ui/symbollayer/widget_simpleline.ui
+++ b/src/ui/symbollayer/widget_simpleline.ui
@@ -23,16 +23,7 @@
    <property name="horizontalSpacing">
     <number>28</number>
    </property>
-   <property name="leftMargin">
-    <number>1</number>
-   </property>
-   <property name="topMargin">
-    <number>1</number>
-   </property>
-   <property name="rightMargin">
-    <number>1</number>
-   </property>
-   <property name="bottomMargin">
+   <property name="margin">
     <number>1</number>
    </property>
    <item row="0" column="0">
@@ -43,7 +34,7 @@
     </widget>
    </item>
    <item row="0" column="1">
-    <widget class="QgsColorButton" name="btnChangeColor">
+    <widget class="QgsColorButtonV2" name="btnChangeColor">
      <property name="sizePolicy">
       <sizepolicy hsizetype="Preferred" vsizetype="Fixed">
        <horstretch>0</horstretch>
@@ -52,13 +43,13 @@
      </property>
      <property name="minimumSize">
       <size>
-       <width>100</width>
+       <width>120</width>
        <height>0</height>
       </size>
      </property>
      <property name="maximumSize">
       <size>
-       <width>100</width>
+       <width>120</width>
        <height>16777215</height>
       </size>
      </property>
@@ -233,16 +224,16 @@
   </layout>
  </widget>
  <customwidgets>
+  <customwidget>
+   <class>QgsColorButtonV2</class>
+   <extends>QToolButton</extends>
+   <header>qgscolorbuttonv2.h</header>
+  </customwidget>
   <customwidget>
    <class>QgsPenJoinStyleComboBox</class>
    <extends>QComboBox</extends>
    <header>qgspenstylecombobox.h</header>
   </customwidget>
-  <customwidget>
-   <class>QgsColorButton</class>
-   <extends>QPushButton</extends>
-   <header>qgscolorbutton.h</header>
-  </customwidget>
   <customwidget>
    <class>QgsUnitSelectionWidget</class>
    <extends>QWidget</extends>
@@ -250,13 +241,13 @@
    <container>1</container>
   </customwidget>
   <customwidget>
-   <class>QgsPenStyleComboBox</class>
-   <extends>QWidget</extends>
+   <class>QgsPenCapStyleComboBox</class>
+   <extends>QComboBox</extends>
    <header>qgspenstylecombobox.h</header>
   </customwidget>
   <customwidget>
-   <class>QgsPenCapStyleComboBox</class>
-   <extends>QComboBox</extends>
+   <class>QgsPenStyleComboBox</class>
+   <extends>QWidget</extends>
    <header>qgspenstylecombobox.h</header>
   </customwidget>
  </customwidgets>
diff --git a/src/ui/symbollayer/widget_simplemarker.ui b/src/ui/symbollayer/widget_simplemarker.ui
index 6598985d05dd..1c9de05cd3f7 100644
--- a/src/ui/symbollayer/widget_simplemarker.ui
+++ b/src/ui/symbollayer/widget_simplemarker.ui
@@ -31,16 +31,16 @@
       </widget>
      </item>
      <item>
-      <widget class="QgsColorButton" name="btnChangeColorFill">
+      <widget class="QgsColorButtonV2" name="btnChangeColorFill">
        <property name="minimumSize">
         <size>
-         <width>100</width>
+         <width>120</width>
          <height>0</height>
         </size>
        </property>
        <property name="maximumSize">
         <size>
-         <width>100</width>
+         <width>120</width>
          <height>16777215</height>
         </size>
        </property>
@@ -63,16 +63,16 @@
       </widget>
      </item>
      <item>
-      <widget class="QgsColorButton" name="btnChangeColorBorder">
+      <widget class="QgsColorButtonV2" name="btnChangeColorBorder">
        <property name="minimumSize">
         <size>
-         <width>100</width>
+         <width>120</width>
          <height>0</height>
         </size>
        </property>
        <property name="maximumSize">
         <size>
-         <width>100</width>
+         <width>120</width>
          <height>16777215</height>
         </size>
        </property>
@@ -353,9 +353,9 @@
  </widget>
  <customwidgets>
   <customwidget>
-   <class>QgsColorButton</class>
-   <extends>QPushButton</extends>
-   <header>qgscolorbutton.h</header>
+   <class>QgsColorButtonV2</class>
+   <extends>QToolButton</extends>
+   <header>qgscolorbuttonv2.h</header>
   </customwidget>
   <customwidget>
    <class>QgsUnitSelectionWidget</class>
diff --git a/src/ui/symbollayer/widget_svgfill.ui b/src/ui/symbollayer/widget_svgfill.ui
index cd9c5569d86d..83ffb3e493c1 100644
--- a/src/ui/symbollayer/widget_svgfill.ui
+++ b/src/ui/symbollayer/widget_svgfill.ui
@@ -174,16 +174,16 @@
         </widget>
        </item>
        <item>
-        <widget class="QgsColorButton" name="mChangeColorButton">
+        <widget class="QgsColorButtonV2" name="mChangeColorButton">
          <property name="minimumSize">
           <size>
-           <width>100</width>
+           <width>120</width>
            <height>0</height>
           </size>
          </property>
          <property name="maximumSize">
           <size>
-           <width>100</width>
+           <width>120</width>
            <height>16777215</height>
           </size>
          </property>
@@ -206,16 +206,16 @@
         </widget>
        </item>
        <item>
-        <widget class="QgsColorButton" name="mChangeBorderColorButton">
+        <widget class="QgsColorButtonV2" name="mChangeBorderColorButton">
          <property name="minimumSize">
           <size>
-           <width>100</width>
+           <width>120</width>
            <height>0</height>
           </size>
          </property>
          <property name="maximumSize">
           <size>
-           <width>100</width>
+           <width>120</width>
            <height>16777215</height>
           </size>
          </property>
@@ -288,9 +288,9 @@
  </widget>
  <customwidgets>
   <customwidget>
-   <class>QgsColorButton</class>
-   <extends>QPushButton</extends>
-   <header>qgscolorbutton.h</header>
+   <class>QgsColorButtonV2</class>
+   <extends>QToolButton</extends>
+   <header>qgscolorbuttonv2.h</header>
   </customwidget>
   <customwidget>
    <class>QgsUnitSelectionWidget</class>
diff --git a/src/ui/symbollayer/widget_svgmarker.ui b/src/ui/symbollayer/widget_svgmarker.ui
index cd57153564aa..02d19d609a0f 100644
--- a/src/ui/symbollayer/widget_svgmarker.ui
+++ b/src/ui/symbollayer/widget_svgmarker.ui
@@ -101,16 +101,16 @@
         </widget>
        </item>
        <item>
-        <widget class="QgsColorButton" name="mChangeColorButton">
+        <widget class="QgsColorButtonV2" name="mChangeColorButton">
          <property name="minimumSize">
           <size>
-           <width>100</width>
+           <width>120</width>
            <height>0</height>
           </size>
          </property>
          <property name="maximumSize">
           <size>
-           <width>100</width>
+           <width>120</width>
            <height>16777215</height>
           </size>
          </property>
@@ -133,16 +133,16 @@
         </widget>
        </item>
        <item>
-        <widget class="QgsColorButton" name="mChangeBorderColorButton">
+        <widget class="QgsColorButtonV2" name="mChangeBorderColorButton">
          <property name="minimumSize">
           <size>
-           <width>100</width>
+           <width>120</width>
            <height>0</height>
           </size>
          </property>
          <property name="maximumSize">
           <size>
-           <width>100</width>
+           <width>120</width>
            <height>16777215</height>
           </size>
          </property>
@@ -406,9 +406,9 @@
  </widget>
  <customwidgets>
   <customwidget>
-   <class>QgsColorButton</class>
-   <extends>QPushButton</extends>
-   <header>qgscolorbutton.h</header>
+   <class>QgsColorButtonV2</class>
+   <extends>QToolButton</extends>
+   <header>qgscolorbuttonv2.h</header>
   </customwidget>
   <customwidget>
    <class>QgsUnitSelectionWidget</class>
diff --git a/src/ui/symbollayer/widget_symbolslist.ui b/src/ui/symbollayer/widget_symbolslist.ui
index 9785488842bf..d47070ddd4a8 100644
--- a/src/ui/symbollayer/widget_symbolslist.ui
+++ b/src/ui/symbollayer/widget_symbolslist.ui
@@ -77,16 +77,16 @@
         </widget>
        </item>
        <item row="2" column="1">
-        <widget class="QgsColorButton" name="btnColor">
+        <widget class="QgsColorButtonV2" name="btnColor">
          <property name="minimumSize">
           <size>
-           <width>100</width>
+           <width>120</width>
            <height>0</height>
           </size>
          </property>
          <property name="maximumSize">
           <size>
-           <width>100</width>
+           <width>120</width>
            <height>16777215</height>
           </size>
          </property>
@@ -330,9 +330,9 @@
  </widget>
  <customwidgets>
   <customwidget>
-   <class>QgsColorButton</class>
-   <extends>QPushButton</extends>
-   <header>qgscolorbutton.h</header>
+   <class>QgsColorButtonV2</class>
+   <extends>QToolButton</extends>
+   <header>qgscolorbuttonv2.h</header>
   </customwidget>
   <customwidget>
    <class>QgsUnitSelectionWidget</class>