diff --git a/example/src/app/app.component.css b/example/src/app/app.component.css
index b6f6606..4db7f09 100644
--- a/example/src/app/app.component.css
+++ b/example/src/app/app.component.css
@@ -1,3 +1,9 @@
+html,
+body,
+div {
+  direction: rtl;
+}
+
 input {
   width: 150px;
   margin-bottom: 16px;
diff --git a/src/lib/color-picker.component.scss b/src/lib/color-picker.component.scss
index 0828c5e..1cecd5c 100644
--- a/src/lib/color-picker.component.scss
+++ b/src/lib/color-picker.component.scss
@@ -243,6 +243,8 @@
   }
 
   .hue {
+    direction: ltr;
+
     width: 100%;
     height: 16px;
     margin-bottom: 16px;
@@ -254,6 +256,8 @@
   }
 
   .alpha {
+    direction: ltr;
+
     width: 100%;
     height: 16px;
     border: none;
@@ -297,6 +301,8 @@
   }
 
   .saturation-lightness {
+    direction: ltr;
+
     width: 100%;
     height: 130px;
     border: none;
diff --git a/stylelint.json b/stylelint.json
index d6011ba..194f5a6 100644
--- a/stylelint.json
+++ b/stylelint.json
@@ -88,7 +88,8 @@
       [
         {
           "properties": [
-            "content"
+            "content",
+            "direction"
           ]
         }, {
           "emptyLineBefore": "always",