diff --git a/README.md b/README.md
index 4e33926..498a436 100644
--- a/README.md
+++ b/README.md
@@ -138,6 +138,7 @@ ToolHub/
 - 收起后再次点击 **展开图标库** 可正常重新打开
 
 当前交互要点：
+- 常用颜色会按色相自动排序，主题色固定在最前
 1. 切到 `ShortX图标` 时自动展开图标库
 2. 列数按当前可用宽度自动计算，屏幕更宽时一页可显示更多图标
 3. 每页容量按自动列数 × 当前可见行数实时计算
diff --git a/code/th_14_panels.js b/code/th_14_panels.js
index 608c3d1..a5ae9fd 100644
--- a/code/th_14_panels.js
+++ b/code/th_14_panels.js
@@ -1608,7 +1608,60 @@ FloatBallAppWM.prototype.buildButtonEditorPanelView = function() {
     tintPaletteBody.addView(tintCommonGrid);
     tintPaletteState.commonGrid = tintCommonGrid;
 
-    var tintCommonDefs = [
+    function getTintSortInfo(hexValue) {
+        var normalized = normalizeTintColorValue(hexValue, false);
+        if (!normalized) return { hue: 999, sat: -1, val: -1 };
+        var rgb = normalized.substring(3);
+        var r = parseInt(rgb.substring(0, 2), 16) / 255.0;
+        var g = parseInt(rgb.substring(2, 4), 16) / 255.0;
+        var b = parseInt(rgb.substring(4, 6), 16) / 255.0;
+        var max = Math.max(r, g, b);
+        var min = Math.min(r, g, b);
+        var d = max - min;
+        var h = 0;
+        if (d === 0) {
+            h = 999;
+        } else if (max === r) {
+            h = ((g - b) / d) % 6;
+        } else if (max === g) {
+            h = ((b - r) / d) + 2;
+        } else {
+            h = ((r - g) / d) + 4;
+        }
+        if (h !== 999) {
+            h = h * 60;
+            if (h < 0) h += 360;
+        }
+        var s = max === 0 ? 0 : d / max;
+        var v = max;
+        return { hue: h, sat: s, val: v };
+    }
+
+    function sortTintCommonDefs(defs) {
+        var fixed = [];
+        var auto = [];
+        var i;
+        for (i = 0; i < defs.length; i++) {
+            var item = defs[i];
+            if (!item) continue;
+            if (item.followTheme) fixed.push(item);
+            else {
+                var sortInfo = getTintSortInfo(item.hex);
+                item.__sortHue = sortInfo.hue;
+                item.__sortSat = sortInfo.sat;
+                item.__sortVal = sortInfo.val;
+                auto.push(item);
+            }
+        }
+        auto.sort(function(a, b) {
+            if (a.__sortHue !== b.__sortHue) return a.__sortHue - b.__sortHue;
+            if (a.__sortSat !== b.__sortSat) return b.__sortSat - a.__sortSat;
+            return b.__sortVal - a.__sortVal;
+        });
+        return fixed.concat(auto);
+    }
+
+    var tintCommonDefs = sortTintCommonDefs([
         { label: "跟随主题", hex: "", followTheme: true },
         { label: "白色", hex: "#FFFFFFFF" },
         { label: "黑色", hex: "#FF000000" },
@@ -1629,7 +1682,7 @@ FloatBallAppWM.prototype.buildButtonEditorPanelView = function() {
         { label: "粉色", hex: "#FFD81B60" },
         { label: "棕色", hex: "#FF8D6E63" },
         { label: "银灰", hex: "#FFCBD5E1" }
-    ];
+    ]);
     var tintCi;
     for (tintCi = 0; tintCi < tintCommonDefs.length; tintCi++) {
         tintCommonGrid.addView(createTintSwatchCell(tintCommonDefs[tintCi].label, tintCommonDefs[tintCi].hex, !!tintCommonDefs[tintCi].followTheme));