Repository: gmt-china/GMT_docs
Pull request #1460: Add color-picker 
Author: login: Dengda98
Created: 2025-05-14T12:13:57Z | Merged: 2025-05-15T02:07:20Z

see issue (#1410).


Diff:
diff --git a/source/basis/color-picker.html b/source/basis/color-picker.html
new file mode 100644
index 0000000000..20d39f0297
--- /dev/null
+++ b/source/basis/color-picker.html
@@ -0,0 +1,786 @@
+<style>
+    .color-box {
+        width: 30px; /* Increase the width to 30px */
+        height: 30px; /* Increase the height to 30px */
+        margin: 0px; /* Decreased horizontal spacing between columns */
+        display: inline-block;
+        cursor: pointer;
+        transition: transform 0.1s, border 0.1s; /* Add smooth transition effects for transform and border */
+    }
+
+    .color-box::after {
+        content: attr(data-tooltip); /* 从 data-tooltip 获取文本 */
+        position: absolute;
+        bottom: 100%;
+        left: 0%;
+        transform: translateX(0);
+        background-color: var(--tooltip-bg, #333);  /* 点击时切换背景颜色 */
+        color: #fff;
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-size: 12px;
+        line-height: 15px;
+        white-space: nowrap;
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity 0s, visibility 0s;  /* 悬停时显示 Tooltip，并设置延迟 */
+        z-index: 100;
+    }
+
+    .color-box:hover {
+        transform: scale(1.3); /* Magnify the box on hover */
+        border: 1px solid #000; /* Add a border on hover */
+    }
+
+    .color-box:hover::after {
+        opacity: 1;
+        visibility: visible;
+    }
+
+    .color-row {
+        text-align: center;
+        line-height: 0; /* 每行之间无缝衔接 */
+    }
+
+    #color-container {
+        text-align: center;
+        border: 2px solid #333;
+        border-radius: 4px;
+        padding: 10px;
+        display: inline-block;
+    }
+
+    #notification {
+        display: none;
+        text-align: center;
+        background-color: #4CAF50;
+        color: white;
+        padding: 10px;
+        position: fixed;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+</style>
+
+<div id="color-container"></div>
+
+<div id="notification">RGB value copied to clipboard</div>
+
+<script>
+    // Function to copy text to clipboard and show notification
+    function copyToClipboard(box, name, rgb, notification) {
+        const textToCopy = `Name: ${name}\nRGB: ${rgb}`;
+        const textArea = document.createElement('textarea');
+        textArea.value = textToCopy;
+        document.body.appendChild(textArea);
+        textArea.select();
+        document.execCommand('copy');
+        document.body.removeChild(textArea);
+
+        // Show the notification
+        notification.style.display = 'block';
+        box.style.setProperty("--tooltip-bg", "#4CAF50");
+
+        // Hide the notification after a delay (e.g., 2 seconds)
+        setTimeout(() => {
+            notification.style.display = 'none';
+            box.style.setProperty("--tooltip-bg", "#333");
+        }, 2000);
+
+    }
+    const colors = [
+        { name: "snow", rgb: "255/250/250"},
+        { name: "ghostwhite", rgb: "248/248/255"},
+        { name: "floralwhite", rgb: "255/250/240"},
+        { name: "seashell", rgb: "255/245/238"},
+        { name: "oldlace", rgb: "253/245/230"},
+        { name: "linen", rgb: "250/240/230"},
+        { name: "antiquewhite", rgb: "250/235/215"},
+        { name: "papayawhip", rgb: "255/239/213"},
+        { name: "blanchedalmond", rgb: "255/235/205"},
+        { name: "bisque", rgb: "255/228/196"},
+        { name: "peachpuff", rgb: "255/218/185"},
+        { name: "navajowhite", rgb: "255/222/173"},
+        { name: "moccasin", rgb: "255/228/181"},
+        { name: "lemonchiffon", rgb: "255/250/205"},
+        { name: "cornsilk", rgb: "255/248/220"},
+        { name: "ivory", rgb: "255/255/240"},
+        { name: "honeydew", rgb: "240/255/240"},
+        { name: "mintcream", rgb: "245/255/250"},
+        { name: "azure", rgb: "240/255/255"},
+        { name: "aliceblue", rgb: "240/248/255"},
+        { name: "lavender", rgb: "230/230/250"},
+        { name: "lavenderblush", rgb: "255/240/245"},
+        { name: "mistyrose", rgb: "255/228/225"},
+        { name: "midnightblue", rgb: "25/25/112"},
+        { name: "navy", rgb: "0/0/128"},
+        { name: "navyblue", rgb: "0/0/128"},
+        { name: "cornflowerblue", rgb: "100/149/237"},
+        { name: "darkslateblue", rgb: "72/61/139"},
+        { name: "slateblue", rgb: "106/90/205"},
+        { name: "mediumslateblue", rgb: "123/104/238"},
+        { name: "lightslateblue", rgb: "132/112/255"},
+        { name: "mediumblue", rgb: "0/0/205"},
+        { name: "royalblue", rgb: "65/105/225"},
+        { name: "blue", rgb: "0/0/255"},
+        { name: "darkblue", rgb: "0/0/139"},
+        { name: "dodgerblue", rgb: "30/144/255"},
+        { name: "steelblue", rgb: "70/130/180"},
+        { name: "deepskyblue", rgb: "0/191/255"},
+        { name: "skyblue", rgb: "135/206/235"},
+        { name: "lightskyblue", rgb: "135/206/250"},
+        { name: "lightslategray", rgb: "119/136/153"},
+        { name: "lightslategrey", rgb: "119/136/153"},
+        { name: "slategray", rgb: "112/128/144"},
+        { name: "slategrey", rgb: "112/128/144"},
+        { name: "lightsteelblue", rgb: "176/196/222"},
+        { name: "lightblue", rgb: "173/216/230"},
+        { name: "lightcyan", rgb: "224/255/255"},
+        { name: "powderblue", rgb: "176/224/230"},
+        { name: "paleturquoise", rgb: "175/238/238"},
+        { name: "cadetblue", rgb: "95/158/160"},
+        { name: "darkturquoise", rgb: "0/206/209"},
+        { name: "mediumturquoise", rgb: "72/209/204"},
+        { name: "turquoise", rgb: "64/224/208"},
+        { name: "cyan", rgb: "0/255/255"},
+        { name: "darkcyan", rgb: "0/139/139"},
+        { name: "darkslategray", rgb: "47/79/79"},
+        { name: "darkslategrey", rgb: "47/79/79"},
+        { name: "mediumaquamarine", rgb: "102/205/170"},
+        { name: "aquamarine", rgb: "127/255/212"},
+        { name: "darkgreen", rgb: "0/100/0"},
+        { name: "lightgreen", rgb: "144/238/144"},
+        { name: "darkseagreen", rgb: "143/188/143"},
+        { name: "seagreen", rgb: "46/139/87"},
+        { name: "mediumseagreen", rgb: "60/179/113"},
+        { name: "lightseagreen", rgb: "32/178/170"},
+        { name: "palegreen", rgb: "152/251/152"},
+        { name: "springgreen", rgb: "0/255/127"},
+        { name: "lawngreen", rgb: "124/252/0"},
+        { name: "green", rgb: "0/255/0"},
+        { name: "chartreuse", rgb: "127/255/0"},
+        { name: "mediumspringgreen", rgb: "0/250/154"},
+        { name: "greenyellow", rgb: "173/255/47"},
+        { name: "limegreen", rgb: "50/205/50"},
+        { name: "yellowgreen", rgb: "154/205/50"},
+        { name: "forestgreen", rgb: "34/139/34"},
+        { name: "olivedrab", rgb: "107/142/35"},
+        { name: "darkolivegreen", rgb: "85/107/47"},
+        { name: "darkkhaki", rgb: "189/183/107"},
+        { name: "khaki", rgb: "240/230/140"},
+        { name: "palegoldenrod", rgb: "238/232/170"},
+        { name: "lightgoldenrod", rgb: "238/221/130"},
+        { name: "lightyellow", rgb: "255/255/224"},
+        { name: "lightgoldenrodyellow", rgb: "250/250/210"},
+        { name: "yellow", rgb: "255/255/0"},
+        { name: "darkyellow", rgb: "128/128/0"},
+        { name: "gold", rgb: "255/215/0"},
+        { name: "goldenrod", rgb: "218/165/32"},
+        { name: "darkgoldenrod", rgb: "184/134/11"},
+        { name: "rosybrown", rgb: "188/143/143"},
+        { name: "indianred", rgb: "205/92/92"},
+        { name: "saddlebrown", rgb: "139/69/19"},
+        { name: "sienna", rgb: "160/82/45"},
+        { name: "peru", rgb: "205/133/63"},
+        { name: "burlywood", rgb: "222/184/135"},
+        { name: "beige", rgb: "245/245/220"},
+        { name: "wheat", rgb: "245/222/179"},
+        { name: "sandybrown", rgb: "244/164/96"},
+        { name: "tan", rgb: "210/180/140"},
+        { name: "chocolate", rgb: "210/105/30"},
+        { name: "firebrick", rgb: "178/34/34"},
+        { name: "lightbrown", rgb: "235/190/85"},
+        { name: "brown", rgb: "165/42/42"},
+        { name: "darkbrown", rgb: "120/60/30"},
+        { name: "darksalmon", rgb: "233/150/122"},
+        { name: "salmon", rgb: "250/128/114"},
+        { name: "lightsalmon", rgb: "255/160/122"},
+        { name: "lightorange", rgb: "255/192/128"},
+        { name: "orange", rgb: "255/165/0"},
+        { name: "darkorange", rgb: "255/140/0"},
+        { name: "coral", rgb: "255/127/80"},
+        { name: "lightcoral", rgb: "240/128/128"},
+        { name: "tomato", rgb: "255/99/71"},
+        { name: "orangered", rgb: "255/69/0"},
+        { name: "red", rgb: "255/0/0"},
+        { name: "lightred", rgb: "255/128/128"},
+        { name: "darkred", rgb: "139/0/0"},
+        { name: "deeppink", rgb: "255/20/147"},
+        { name: "hotpink", rgb: "255/105/180"},
+        { name: "pink", rgb: "255/192/203"},
+        { name: "lightpink", rgb: "255/182/193"},
+        { name: "palevioletred", rgb: "219/112/147"},
+        { name: "maroon", rgb: "176/48/96"},
+        { name: "mediumvioletred", rgb: "199/21/133"},
+        { name: "violetred", rgb: "208/32/144"},
+        { name: "darkmagenta", rgb: "139/0/139"},
+        { name: "magenta", rgb: "255/0/255"},
+        { name: "lightmagenta", rgb: "255/128/255"},
+        { name: "violet", rgb: "238/130/238"},
+        { name: "orchid", rgb: "218/112/214"},
+        { name: "plum", rgb: "221/160/221"},
+        { name: "mediumorchid", rgb: "186/85/211"},
+        { name: "darkorchid", rgb: "153/50/204"},
+        { name: "darkviolet", rgb: "148/0/211"},
+        { name: "blueviolet", rgb: "138/43/226"},
+        { name: "purple", rgb: "160/32/240"},
+        { name: "mediumpurple", rgb: "147/112/219"},
+        { name: "thistle", rgb: "216/191/216"},
+        { name: "black", rgb: "0/0/0"},
+        { name: "dimgray", rgb: "105/105/105"},
+        { name: "dimgrey", rgb: "105/105/105"},
+        { name: "darkgray", rgb: "169/169/169"},
+        { name: "darkgrey", rgb: "169/169/169"},
+        { name: "gray", rgb: "190/190/190"},
+        { name: "grey", rgb: "190/190/190"},
+        { name: "lightgrey", rgb: "211/211/211"},
+        { name: "lightgray", rgb: "211/211/211"},
+        { name: "gainsboro", rgb: "220/220/220"},
+        { name: "whitesmoke", rgb: "245/245/245"},
+        { name: "white", rgb: "255/255/255"},
+        { name: "snow1", rgb: "255/250/250"},
+        { name: "snow2", rgb: "238/233/233"},
+        { name: "snow3", rgb: "205/201/201"},
+        { name: "snow4", rgb: "139/137/137"},
+        { name: "seashell1", rgb: "255/245/238"},
+        { name: "seashell2", rgb: "238/229/222"},
+        { name: "seashell3", rgb: "205/197/191"},
+        { name: "seashell4", rgb: "139/134/130"},
+        { name: "antiquewhite1", rgb: "255/239/219"},
+        { name: "antiquewhite2", rgb: "238/223/204"},
+        { name: "antiquewhite3", rgb: "205/192/176"},
+        { name: "antiquewhite4", rgb: "139/131/120"},
+        { name: "bisque1", rgb: "255/228/196"},
+        { name: "bisque2", rgb: "238/213/183"},
+        { name: "bisque3", rgb: "205/183/158"},
+        { name: "bisque4", rgb: "139/125/107"},
+        { name: "peachpuff1", rgb: "255/218/185"},
+        { name: "peachpuff2", rgb: "238/203/173"},
+        { name: "peachpuff3", rgb: "205/175/149"},
+        { name: "peachpuff4", rgb: "139/119/101"},
+        { name: "navajowhite1", rgb: "255/222/173"},
+        { name: "navajowhite2", rgb: "238/207/161"},
+        { name: "navajowhite3", rgb: "205/179/139"},
+        { name: "navajowhite4", rgb: "139/121/94"},
+        { name: "lemonchiffon1", rgb: "255/250/205"},
+        { name: "lemonchiffon2", rgb: "238/233/191"},
+        { name: "lemonchiffon3", rgb: "205/201/165"},
+        { name: "lemonchiffon4", rgb: "139/137/112"},
+        { name: "cornsilk1", rgb: "255/248/220"},
+        { name: "cornsilk2", rgb: "238/232/205"},
+        { name: "cornsilk3", rgb: "205/200/177"},
+        { name: "cornsilk4", rgb: "139/136/120"},
+        { name: "ivory1", rgb: "255/255/240"},
+        { name: "ivory2", rgb: "238/238/224"},
+        { name: "ivory3", rgb: "205/205/193"},
+        { name: "ivory4", rgb: "139/139/131"},
+        { name: "honeydew1", rgb: "240/255/240"},
+        { name: "honeydew2", rgb: "224/238/224"},
+        { name: "honeydew3", rgb: "193/205/193"},
+        { name: "honeydew4", rgb: "131/139/131"},
+        { name: "lavenderblush1", rgb: "255/240/245"},
+        { name: "lavenderblush2", rgb: "238/224/229"},
+        { name: "lavenderblush3", rgb: "205/193/197"},
+        { name: "lavenderblush4", rgb: "139/131/134"},
+        { name: "mistyrose1", rgb: "255/228/225"},
+        { name: "mistyrose2", rgb: "238/213/210"},
+        { name: "mistyrose3", rgb: "205/183/181"},
+        { name: "mistyrose4", rgb: "139/125/123"},
+        { name: "azure1", rgb: "240/255/255"},
+        { name: "azure2", rgb: "224/238/238"},
+        { name: "azure3", rgb: "193/205/205"},
+        { name: "azure4", rgb: "131/139/139"},
+        { name: "slateblue1", rgb: "131/111/255"},
+        { name: "slateblue2", rgb: "122/103/238"},
+        { name: "slateblue3", rgb: "105/89/205"},
+        { name: "slateblue4", rgb: "71/60/139"},
+        { name: "royalblue1", rgb: "72/118/255"},
+        { name: "royalblue2", rgb: "67/110/238"},
+        { name: "royalblue3", rgb: "58/95/205"},
+        { name: "royalblue4", rgb: "39/64/139"},
+        { name: "blue1", rgb: "0/0/255"},
+        { name: "blue2", rgb: "0/0/238"},
+        { name: "blue3", rgb: "0/0/205"},
+        { name: "blue4", rgb: "0/0/139"},
+        { name: "dodgerblue1", rgb: "30/144/255"},
+        { name: "dodgerblue2", rgb: "28/134/238"},
+        { name: "dodgerblue3", rgb: "24/116/205"},
+        { name: "dodgerblue4", rgb: "16/78/139"},
+        { name: "steelblue1", rgb: "99/184/255"},
+        { name: "steelblue2", rgb: "92/172/238"},
+        { name: "steelblue3", rgb: "79/148/205"},
+        { name: "steelblue4", rgb: "54/100/139"},
+        { name: "deepskyblue1", rgb: "0/191/255"},
+        { name: "deepskyblue2", rgb: "0/178/238"},
+        { name: "deepskyblue3", rgb: "0/154/205"},
+        { name: "deepskyblue4", rgb: "0/104/139"},
+        { name: "skyblue1", rgb: "135/206/255"},
+        { name: "skyblue2", rgb: "126/192/238"},
+        { name: "skyblue3", rgb: "108/166/205"},
+        { name: "skyblue4", rgb: "74/112/139"},
+        { name: "lightskyblue1", rgb: "176/226/255"},
+        { name: "lightskyblue2", rgb: "164/211/238"},
+        { name: "lightskyblue3", rgb: "141/182/205"},
+        { name: "lightskyblue4", rgb: "96/123/139"},
+        { name: "slategray1", rgb: "198/226/255"},
+        { name: "slategray2", rgb: "185/211/238"},
+        { name: "slategray3", rgb: "159/182/205"},
+        { name: "slategray4", rgb: "108/123/139"},
+        { name: "lightsteelblue1", rgb: "202/225/255"},
+        { name: "lightsteelblue2", rgb: "188/210/238"},
+        { name: "lightsteelblue3", rgb: "162/181/205"},
+        { name: "lightsteelblue4", rgb: "110/123/139"},
+        { name: "lightblue1", rgb: "191/239/255"},
+        { name: "lightblue2", rgb: "178/223/238"},
+        { name: "lightblue3", rgb: "154/192/205"},
+        { name: "lightblue4", rgb: "104/131/139"},
+        { name: "lightcyan1", rgb: "224/255/255"},
+        { name: "lightcyan2", rgb: "209/238/238"},
+        { name: "lightcyan3", rgb: "180/205/205"},
+        { name: "lightcyan4", rgb: "122/139/139"},
+        { name: "paleturquoise1", rgb: "187/255/255"},
+        { name: "paleturquoise2", rgb: "174/238/238"},
+        { name: "paleturquoise3", rgb: "150/205/205"},
+        { name: "paleturquoise4", rgb: "102/139/139"},
+        { name: "cadetblue1", rgb: "152/245/255"},
+        { name: "cadetblue2", rgb: "142/229/238"},
+        { name: "cadetblue3", rgb: "122/197/205"},
+        { name: "cadetblue4", rgb: "83/134/139"},
+        { name: "turquoise1", rgb: "0/245/255"},
+        { name: "turquoise2", rgb: "0/229/238"},
+        { name: "turquoise3", rgb: "0/197/205"},
+        { name: "turquoise4", rgb: "0/134/139"},
+        { name: "cyan1", rgb: "0/255/255"},
+        { name: "cyan2", rgb: "0/238/238"},
+        { name: "cyan3", rgb: "0/205/205"},
+        { name: "cyan4", rgb: "0/139/139"},
+        { name: "darkslategray1", rgb: "151/255/255"},
+        { name: "darkslategray2", rgb: "141/238/238"},
+        { name: "darkslategray3", rgb: "121/205/205"},
+        { name: "darkslategray4", rgb: "82/139/139"},
+        { name: "aquamarine1", rgb: "127/255/212"},
+        { name: "aquamarine2", rgb: "118/238/198"},
+        { name: "aquamarine3", rgb: "102/205/170"},
+        { name: "aquamarine4", rgb: "69/139/116"},
+        { name: "darkseagreen1", rgb: "193/255/193"},
+        { name: "darkseagreen2", rgb: "180/238/180"},
+        { name: "darkseagreen3", rgb: "155/205/155"},
+        { name: "darkseagreen4", rgb: "105/139/105"},
+        { name: "seagreen1", rgb: "84/255/159"},
+        { name: "seagreen2", rgb: "78/238/148"},
+        { name: "seagreen3", rgb: "67/205/128"},
+        { name: "seagreen4", rgb: "46/139/87"},
+        { name: "palegreen1", rgb: "154/255/154"},
+        { name: "palegreen2", rgb: "144/238/144"},
+        { name: "palegreen3", rgb: "124/205/124"},
+        { name: "palegreen4", rgb: "84/139/84"},
+        { name: "springgreen1", rgb: "0/255/127"},
+        { name: "springgreen2", rgb: "0/238/118"},
+        { name: "springgreen3", rgb: "0/205/102"},
+        { name: "springgreen4", rgb: "0/139/69"},
+        { name: "green1", rgb: "0/255/0"},
+        { name: "green2", rgb: "0/238/0"},
+        { name: "green3", rgb: "0/205/0"},
+        { name: "green4", rgb: "0/139/0"},
+        { name: "chartreuse1", rgb: "127/255/0"},
+        { name: "chartreuse2", rgb: "118/238/0"},
+        { name: "chartreuse3", rgb: "102/205/0"},
+        { name: "chartreuse4", rgb: "69/139/0"},
+        { name: "olivedrab1", rgb: "192/255/62"},
+        { name: "olivedrab2", rgb: "179/238/58"},
+        { name: "olivedrab3", rgb: "154/205/50"},
+        { name: "olivedrab4", rgb: "105/139/34"},
+        { name: "darkolivegreen1", rgb: "202/255/112"},
+        { name: "darkolivegreen2", rgb: "188/238/104"},
+        { name: "darkolivegreen3", rgb: "162/205/90"},
+        { name: "darkolivegreen4", rgb: "110/139/61"},
+        { name: "khaki1", rgb: "255/246/143"},
+        { name: "khaki2", rgb: "238/230/133"},
+        { name: "khaki3", rgb: "205/198/115"},
+        { name: "khaki4", rgb: "139/134/78"},
+        { name: "lightgoldenrod1", rgb: "255/236/139"},
+        { name: "lightgoldenrod2", rgb: "238/220/130"},
+        { name: "lightgoldenrod3", rgb: "205/190/112"},
+        { name: "lightgoldenrod4", rgb: "139/129/76"},
+        { name: "lightyellow1", rgb: "255/255/224"},
+        { name: "lightyellow2", rgb: "238/238/209"},
+        { name: "lightyellow3", rgb: "205/205/180"},
+        { name: "lightyellow4", rgb: "139/139/122"},
+        { name: "yellow1", rgb: "255/255/0"},
+        { name: "yellow2", rgb: "238/238/0"},
+        { name: "yellow3", rgb: "205/205/0"},
+        { name: "yellow4", rgb: "139/139/0"},
+        { name: "gold1", rgb: "255/215/0"},
+        { name: "gold2", rgb: "238/201/0"},
+        { name: "gold3", rgb: "205/173/0"},
+        { name: "gold4", rgb: "139/117/0"},
+        { name: "goldenrod1", rgb: "255/193/37"},
+        { name: "goldenrod2", rgb: "238/180/34"},
+        { name: "goldenrod3", rgb: "205/155/29"},
+        { name: "goldenrod4", rgb: "139/105/20"},
+        { name: "darkgoldenrod1", rgb: "255/185/15"},
+        { name: "darkgoldenrod2", rgb: "238/173/14"},
+        { name: "darkgoldenrod3", rgb: "205/149/12"},
+        { name: "darkgoldenrod4", rgb: "139/101/8"},
+        { name: "rosybrown1", rgb: "255/193/193"},
+        { name: "rosybrown2", rgb: "238/180/180"},
+        { name: "rosybrown3", rgb: "205/155/155"},
+        { name: "rosybrown4", rgb: "139/105/105"},
+        { name: "indianred1", rgb: "255/106/106"},
+        { name: "indianred2", rgb: "238/99/99"},
+        { name: "indianred3", rgb: "205/85/85"},
+        { name: "indianred4", rgb: "139/58/58"},
+        { name: "sienna1", rgb: "255/130/71"},
+        { name: "sienna2", rgb: "238/121/66"},
+        { name: "sienna3", rgb: "205/104/57"},
+        { name: "sienna4", rgb: "139/71/38"},
+        { name: "burlywood1", rgb: "255/211/155"},
+        { name: "burlywood2", rgb: "238/197/145"},
+        { name: "burlywood3", rgb: "205/170/125"},
+        { name: "burlywood4", rgb: "139/115/85"},
+        { name: "wheat1", rgb: "255/231/186"},
+        { name: "wheat2", rgb: "238/216/174"},
+        { name: "wheat3", rgb: "205/186/150"},
+        { name: "wheat4", rgb: "139/126/102"},
+        { name: "tan1", rgb: "255/165/79"},
+        { name: "tan2", rgb: "238/154/73"},
+        { name: "tan3", rgb: "205/133/63"},
+        { name: "tan4", rgb: "139/90/43"},
+        { name: "chocolate1", rgb: "255/127/36"},
+        { name: "chocolate2", rgb: "238/118/33"},
+        { name: "chocolate3", rgb: "205/102/29"},
+        { name: "chocolate4", rgb: "139/69/19"},
+        { name: "firebrick1", rgb: "255/48/48"},
+        { name: "firebrick2", rgb: "238/44/44"},
+        { name: "firebrick3", rgb: "205/38/38"},
+        { name: "firebrick4", rgb: "139/26/26"},
+        { name: "brown1", rgb: "255/64/64"},
+        { name: "brown2", rgb: "238/59/59"},
+        { name: "brown3", rgb: "205/51/51"},
+        { name: "brown4", rgb: "139/35/35"},
+        { name: "salmon1", rgb: "255/140/105"},
+        { name: "salmon2", rgb: "238/130/98"},
+        { name: "salmon3", rgb: "205/112/84"},
+        { name: "salmon4", rgb: "139/76/57"},
+        { name: "lightsalmon1", rgb: "255/160/122"},
+        { name: "lightsalmon2", rgb: "238/149/114"},
+        { name: "lightsalmon3", rgb: "205/129/98"},
+        { name: "lightsalmon4", rgb: "139/87/66"},
+        { name: "orange1", rgb: "255/165/0"},
+        { name: "orange2", rgb: "238/154/0"},
+        { name: "orange3", rgb: "205/133/0"},
+        { name: "orange4", rgb: "139/90/0"},
+        { name: "darkorange1", rgb: "255/127/0"},
+        { name: "darkorange2", rgb: "238/118/0"},
+        { name: "darkorange3", rgb: "205/102/0"},
+        { name: "darkorange4", rgb: "139/69/0"},
+        { name: "coral1", rgb: "255/114/86"},
+        { name: "coral2", rgb: "238/106/80"},
+        { name: "coral3", rgb: "205/91/69"},
+        { name: "coral4", rgb: "139/62/47"},
+        { name: "tomato1", rgb: "255/99/71"},
+        { name: "tomato2", rgb: "238/92/66"},
+        { name: "tomato3", rgb: "205/79/57"},
+        { name: "tomato4", rgb: "139/54/38"},
+        { name: "orangered1", rgb: "255/69/0"},
+        { name: "orangered2", rgb: "238/64/0"},
+        { name: "orangered3", rgb: "205/55/0"},
+        { name: "orangered4", rgb: "139/37/0"},
+        { name: "red1", rgb: "255/0/0"},
+        { name: "red2", rgb: "238/0/0"},
+        { name: "red3", rgb: "205/0/0"},
+        { name: "red4", rgb: "139/0/0"},
+        { name: "deeppink1", rgb: "255/20/147"},
+        { name: "deeppink2", rgb: "238/18/137"},
+        { name: "deeppink3", rgb: "205/16/118"},
+        { name: "deeppink4", rgb: "139/10/80"},
+        { name: "hotpink1", rgb: "255/110/180"},
+        { name: "hotpink2", rgb: "238/106/167"},
+        { name: "hotpink3", rgb: "205/96/144"},
+        { name: "hotpink4", rgb: "139/58/98"},
+        { name: "pink1", rgb: "255/181/197"},
+        { name: "pink2", rgb: "238/169/184"},
+        { name: "pink3", rgb: "205/145/158"},
+        { name: "pink4", rgb: "139/99/108"},
+        { name: "lightpink1", rgb: "255/174/185"},
+        { name: "lightpink2", rgb: "238/162/173"},
+        { name: "lightpink3", rgb: "205/140/149"},
+        { name: "lightpink4", rgb: "139/95/101"},
+        { name: "palevioletred1", rgb: "255/130/171"},
+        { name: "palevioletred2", rgb: "238/121/159"},
+        { name: "palevioletred3", rgb: "205/104/137"},
+        { name: "palevioletred4", rgb: "139/71/93"},
+        { name: "maroon1", rgb: "255/52/179"},
+        { name: "maroon2", rgb: "238/48/167"},
+        { name: "maroon3", rgb: "205/41/144"},
+        { name: "maroon4", rgb: "139/28/98"},
+        { name: "violetred1", rgb: "255/62/150"},
+        { name: "violetred2", rgb: "238/58/140"},
+        { name: "violetred3", rgb: "205/50/120"},
+        { name: "violetred4", rgb: "139/34/82"},
+        { name: "magenta1", rgb: "255/0/255"},
+        { name: "magenta2", rgb: "238/0/238"},
+        { name: "magenta3", rgb: "205/0/205"},
+        { name: "magenta4", rgb: "139/0/139"},
+        { name: "orchid1", rgb: "255/131/250"},
+        { name: "orchid2", rgb: "238/122/233"},
+        { name: "orchid3", rgb: "205/105/201"},
+        { name: "orchid4", rgb: "139/71/137"},
+        { name: "plum1", rgb: "255/187/255"},
+        { name: "plum2", rgb: "238/174/238"},
+        { name: "plum3", rgb: "205/150/205"},
+        { name: "plum4", rgb: "139/102/139"},
+        { name: "mediumorchid1", rgb: "224/102/255"},
+        { name: "mediumorchid2", rgb: "209/95/238"},
+        { name: "mediumorchid3", rgb: "180/82/205"},
+        { name: "mediumorchid4", rgb: "122/55/139"},
+        { name: "darkorchid1", rgb: "191/62/255"},
+        { name: "darkorchid2", rgb: "178/58/238"},
+        { name: "darkorchid3", rgb: "154/50/205"},
+        { name: "darkorchid4", rgb: "104/34/139"},
+        { name: "purple1", rgb: "155/48/255"},
+        { name: "purple2", rgb: "145/44/238"},
+        { name: "purple3", rgb: "125/38/205"},
+        { name: "purple4", rgb: "85/26/139"},
+        { name: "mediumpurple1", rgb: "171/130/255"},
+        { name: "mediumpurple2", rgb: "159/121/238"},
+        { name: "mediumpurple3", rgb: "137/104/205"},
+        { name: "mediumpurple4", rgb: "93/71/139"},
+        { name: "thistle1", rgb: "255/225/255"},
+        { name: "thistle2", rgb: "238/210/238"},
+        { name: "thistle3", rgb: "205/181/205"},
+        { name: "thistle4", rgb: "139/123/139"},
+        { name: "gray0", rgb: "0/0/0"},
+        { name: "grey0", rgb: "0/0/0"},
+        { name: "gray1", rgb: "3/3/3"},
+        { name: "grey1", rgb: "3/3/3"},
+        { name: "gray2", rgb: "5/5/5"},
+        { name: "grey2", rgb: "5/5/5"},
+        { name: "gray3", rgb: "8/8/8"},
+        { name: "grey3", rgb: "8/8/8"},
+        { name: "gray4", rgb: "10/10/10"},
+        { name: "grey4", rgb: "10/10/10"},
+        { name: "gray5", rgb: "13/13/13"},
+        { name: "grey5", rgb: "13/13/13"},
+        { name: "gray6", rgb: "15/15/15"},
+        { name: "grey6", rgb: "15/15/15"},
+        { name: "gray7", rgb: "18/18/18"},
+        { name: "grey7", rgb: "18/18/18"},
+        { name: "gray8", rgb: "20/20/20"},
+        { name: "grey8", rgb: "20/20/20"},
+        { name: "gray9", rgb: "23/23/23"},
+        { name: "grey9", rgb: "23/23/23"},
+        { name: "gray10", rgb: "26/26/26"},
+        { name: "grey10", rgb: "26/26/26"},
+        { name: "gray11", rgb: "28/28/28"},
+        { name: "grey11", rgb: "28/28/28"},
+        { name: "gray12", rgb: "31/31/31"},
+        { name: "grey12", rgb: "31/31/31"},
+        { name: "gray13", rgb: "33/33/33"},
+        { name: "grey13", rgb: "33/33/33"},
+        { name: "gray14", rgb: "36/36/36"},
+        { name: "grey14", rgb: "36/36/36"},
+        { name: "gray15", rgb: "38/38/38"},
+        { name: "grey15", rgb: "38/38/38"},
+        { name: "gray16", rgb: "41/41/41"},
+        { name: "grey16", rgb: "41/41/41"},
+        { name: "gray17", rgb: "43/43/43"},
+        { name: "grey17", rgb: "43/43/43"},
+        { name: "gray18", rgb: "46/46/46"},
+        { name: "grey18", rgb: "46/46/46"},
+        { name: "gray19", rgb: "48/48/48"},
+        { name: "grey19", rgb: "48/48/48"},
+        { name: "gray20", rgb: "51/51/51"},
+        { name: "grey20", rgb: "51/51/51"},
+        { name: "gray21", rgb: "54/54/54"},
+        { name: "grey21", rgb: "54/54/54"},
+        { name: "gray22", rgb: "56/56/56"},
+        { name: "grey22", rgb: "56/56/56"},
+        { name: "gray23", rgb: "59/59/59"},
+        { name: "grey23", rgb: "59/59/59"},
+        { name: "gray24", rgb: "61/61/61"},
+        { name: "grey24", rgb: "61/61/61"},
+        { name: "gray25", rgb: "64/64/64"},
+        { name: "grey25", rgb: "64/64/64"},
+        { name: "gray26", rgb: "66/66/66"},
+        { name: "grey26", rgb: "66/66/66"},
+        { name: "gray27", rgb: "69/69/69"},
+        { name: "grey27", rgb: "69/69/69"},
+        { name: "gray28", rgb: "71/71/71"},
+        { name: "grey28", rgb: "71/71/71"},
+        { name: "gray29", rgb: "74/74/74"},
+        { name: "grey29", rgb: "74/74/74"},
+        { name: "gray30", rgb: "77/77/77"},
+        { name: "grey30", rgb: "77/77/77"},
+        { name: "gray31", rgb: "79/79/79"},
+        { name: "grey31", rgb: "79/79/79"},
+        { name: "gray32", rgb: "82/82/82"},
+        { name: "grey32", rgb: "82/82/82"},
+        { name: "gray33", rgb: "84/84/84"},
+        { name: "grey33", rgb: "84/84/84"},
+        { name: "gray34", rgb: "87/87/87"},
+        { name: "grey34", rgb: "87/87/87"},
+        { name: "gray35", rgb: "89/89/89"},
+        { name: "grey35", rgb: "89/89/89"},
+        { name: "gray36", rgb: "92/92/92"},
+        { name: "grey36", rgb: "92/92/92"},
+        { name: "gray37", rgb: "94/94/94"},
+        { name: "grey37", rgb: "94/94/94"},
+        { name: "gray38", rgb: "97/97/97"},
+        { name: "grey38", rgb: "97/97/97"},
+        { name: "gray39", rgb: "99/99/99"},
+        { name: "grey39", rgb: "99/99/99"},
+        { name: "gray40", rgb: "102/102/102"},
+        { name: "grey40", rgb: "102/102/102"},
+        { name: "gray41", rgb: "105/105/105"},
+        { name: "grey41", rgb: "105/105/105"},
+        { name: "gray42", rgb: "107/107/107"},
+        { name: "grey42", rgb: "107/107/107"},
+        { name: "gray43", rgb: "110/110/110"},
+        { name: "grey43", rgb: "110/110/110"},
+        { name: "gray44", rgb: "112/112/112"},
+        { name: "grey44", rgb: "112/112/112"},
+        { name: "gray45", rgb: "115/115/115"},
+        { name: "grey45", rgb: "115/115/115"},
+        { name: "gray46", rgb: "117/117/117"},
+        { name: "grey46", rgb: "117/117/117"},
+        { name: "gray47", rgb: "120/120/120"},
+        { name: "grey47", rgb: "120/120/120"},
+        { name: "gray48", rgb: "122/122/122"},
+        { name: "grey48", rgb: "122/122/122"},
+        { name: "gray49", rgb: "125/125/125"},
+        { name: "grey49", rgb: "125/125/125"},
+        { name: "gray50", rgb: "127/127/127"},
+        { name: "grey50", rgb: "127/127/127"},
+        { name: "gray51", rgb: "130/130/130"},
+        { name: "grey51", rgb: "130/130/130"},
+        { name: "gray52", rgb: "133/133/133"},
+        { name: "grey52", rgb: "133/133/133"},
+        { name: "gray53", rgb: "135/135/135"},
+        { name: "grey53", rgb: "135/135/135"},
+        { name: "gray54", rgb: "138/138/138"},
+        { name: "grey54", rgb: "138/138/138"},
+        { name: "gray55", rgb: "140/140/140"},
+        { name: "grey55", rgb: "140/140/140"},
+        { name: "gray56", rgb: "143/143/143"},
+        { name: "grey56", rgb: "143/143/143"},
+        { name: "gray57", rgb: "145/145/145"},
+        { name: "grey57", rgb: "145/145/145"},
+        { name: "gray58", rgb: "148/148/148"},
+        { name: "grey58", rgb: "148/148/148"},
+        { name: "gray59", rgb: "150/150/150"},
+        { name: "grey59", rgb: "150/150/150"},
+        { name: "gray60", rgb: "153/153/153"},
+        { name: "grey60", rgb: "153/153/153"},
+        { name: "gray61", rgb: "156/156/156"},
+        { name: "grey61", rgb: "156/156/156"},
+        { name: "gray62", rgb: "158/158/158"},
+        { name: "grey62", rgb: "158/158/158"},
+        { name: "gray63", rgb: "161/161/161"},
+        { name: "grey63", rgb: "161/161/161"},
+        { name: "gray64", rgb: "163/163/163"},
+        { name: "grey64", rgb: "163/163/163"},
+        { name: "gray65", rgb: "166/166/166"},
+        { name: "grey65", rgb: "166/166/166"},
+        { name: "gray66", rgb: "168/168/168"},
+        { name: "grey66", rgb: "168/168/168"},
+        { name: "gray67", rgb: "171/171/171"},
+        { name: "grey67", rgb: "171/171/171"},
+        { name: "gray68", rgb: "173/173/173"},
+        { name: "grey68", rgb: "173/173/173"},
+        { name: "gray69", rgb: "176/176/176"},
+        { name: "grey69", rgb: "176/176/176"},
+        { name: "gray70", rgb: "179/179/179"},
+        { name: "grey70", rgb: "179/179/179"},
+        { name: "gray71", rgb: "181/181/181"},
+        { name: "grey71", rgb: "181/181/181"},
+        { name: "gray72", rgb: "184/184/184"},
+        { name: "grey72", rgb: "184/184/184"},
+        { name: "gray73", rgb: "186/186/186"},
+        { name: "grey73", rgb: "186/186/186"},
+        { name: "gray74", rgb: "189/189/189"},
+        { name: "grey74", rgb: "189/189/189"},
+        { name: "gray75", rgb: "191/191/191"},
+        { name: "grey75", rgb: "191/191/191"},
+        { name: "gray76", rgb: "194/194/194"},
+        { name: "grey76", rgb: "194/194/194"},
+        { name: "gray77", rgb: "196/196/196"},
+        { name: "grey77", rgb: "196/196/196"},
+        { name: "gray78", rgb: "199/199/199"},
+        { name: "grey78", rgb: "199/199/199"},
+        { name: "gray79", rgb: "201/201/201"},
+        { name: "grey79", rgb: "201/201/201"},
+        { name: "gray80", rgb: "204/204/204"},
+        { name: "grey80", rgb: "204/204/204"},
+        { name: "gray81", rgb: "207/207/207"},
+        { name: "grey81", rgb: "207/207/207"},
+        { name: "gray82", rgb: "209/209/209"},
+        { name: "grey82", rgb: "209/209/209"},
+        { name: "gray83", rgb: "212/212/212"},
+        { name: "grey83", rgb: "212/212/212"},
+        { name: "gray84", rgb: "214/214/214"},
+        { name: "grey84", rgb: "214/214/214"},
+        { name: "gray85", rgb: "217/217/217"},
+        { name: "grey85", rgb: "217/217/217"},
+        { name: "gray86", rgb: "219/219/219"},
+        { name: "grey86", rgb: "219/219/219"},
+        { name: "gray87", rgb: "222/222/222"},
+        { name: "grey87", rgb: "222/222/222"},
+        { name: "gray88", rgb: "224/224/224"},
+        { name: "grey88", rgb: "224/224/224"},
+        { name: "gray89", rgb: "227/227/227"},
+        { name: "grey89", rgb: "227/227/227"},
+        { name: "gray90", rgb: "229/229/229"},
+        { name: "grey90", rgb: "229/229/229"},
+        { name: "gray91", rgb: "232/232/232"},
+        { name: "grey91", rgb: "232/232/232"},
+        { name: "gray92", rgb: "235/235/235"},
+        { name: "grey92", rgb: "235/235/235"},
+        { name: "gray93", rgb: "237/237/237"},
+        { name: "grey93", rgb: "237/237/237"},
+        { name: "gray94", rgb: "240/240/240"},
+        { name: "grey94", rgb: "240/240/240"},
+        { name: "gray95", rgb: "242/242/242"},
+        { name: "grey95", rgb: "242/242/242"},
+        { name: "gray96", rgb: "245/245/245"},
+        { name: "grey96", rgb: "245/245/245"},
+        { name: "gray97", rgb: "247/247/247"},
+        { name: "grey97", rgb: "247/247/247"},
+        { name: "gray98", rgb: "250/250/250"},
+        { name: "grey98", rgb: "250/250/250"},
+        { name: "gray99", rgb: "252/252/252"},
+        { name: "grey99", rgb: "252/252/252"},
+        { name: "gray100", rgb: "255/255/255"},
+        { name: "grey100", rgb: "255/255/255"},
+
+    ];
+
+
+    function generateColorGrid(columnsPerRow) {
+        const container = document.getElementById("color-container");
+        container.innerHTML = ""; // 清空容器
+
+        for (let i = 0; i < colors.length; i += columnsPerRow) {
+            const row = document.createElement("div");
+            row.className = "color-row";
+
+            colors.slice(i, i + columnsPerRow).forEach(color => {
+                const box = document.createElement("div");
+                box.className = "color-box";
+                box.setAttribute("data-tooltip", `Name: ${color.name} RGB: ${color.rgb}`);
+                box.style.backgroundColor = `rgb(${color.rgb.replace(/\//g, ",")})`;
+                box.onclick = () => copyToClipboard(box, color.name, color.rgb, notification);
+                row.appendChild(box);
+            });
+
+            container.appendChild(row);
+        }
+    }
+
+    // 传入列数
+    generateColorGrid(28);
+
+</script>
+
+
diff --git a/source/basis/color.md b/source/basis/color.md
index 8d2c765147..672c5a2306 100644
--- a/source/basis/color.md
+++ b/source/basis/color.md
@@ -1,3 +1,8 @@
+---
+author: 田冬冬, 朱邓达
+date: 2025-05-15
+---
+
 ```{index} ! colors
 ```
 
@@ -39,6 +44,12 @@ GMT 支持通过颜色名指定663种颜色。下图中列出了GMT支持的所
 {download}`USLetter PNG 格式 <GMT_RGBchart_letter.png>` |
 {download}`USLetter PDF 格式 <GMT_RGBchart_letter.pdf>`
 
+**在以下色标上悬停可显示颜色名称和RGB值，单击可复制到剪贴板。**
+
+```{include} color-picker.html
+```
+
+
 ## RGB
 
 即三原色光模型，或又称RGB颜色模型，是一种加色模型，将红（**R**ed）、


Reviews:
user: login: seisman
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-05-15T01:27:23Z
user: login: Dengda98
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-15T01:38:00Z

Review comments:
diff_hunk: @@ -39,6 +39,12 @@ GMT 支持通过颜色名指定663种颜色。下图中列出了GMT支持的所
 {download}`USLetter PNG 格式 <GMT_RGBchart_letter.png>` |
 {download}`USLetter PDF 格式 <GMT_RGBchart_letter.pdf>`
 
+**在以下色标上悬停可显示颜色名称和RGB值，单击可复制到剪贴板。**
path: source/basis/color.md
user: login: seisman
body: @Dengda98 Thanks for your contribution. Could you please add the following metadata at the beginning of this file:
```
---
author: 田冬冬, 朱邓达
date: 2025-05-15
---
```
created_at: 2025-05-15T01:27:23Z
author_association: MEMBER
diff_hunk: @@ -39,6 +39,12 @@ GMT 支持通过颜色名指定663种颜色。下图中列出了GMT支持的所
 {download}`USLetter PNG 格式 <GMT_RGBchart_letter.png>` |
 {download}`USLetter PDF 格式 <GMT_RGBchart_letter.pdf>`
 
+**在以下色标上悬停可显示颜色名称和RGB值，单击可复制到剪贴板。**
path: source/basis/color.md
user: login: Dengda98
body: metadata added.
created_at: 2025-05-15T01:38:00Z
author_association: CONTRIBUTOR

PR comments:
user: login: seisman
created_at: 2025-05-15T02:09:54Z
body: @Dengda98 Thanks again for your contributions. I've sent invitation emails to join the gmt-china community. After accepting the invitation, you should be able to work directly on the this repository rather than in your own fork. Let me if you have questions.
author_association: MEMBER
user: login: Dengda98
created_at: 2025-05-15T11:33:07Z
body: Thank you for the invitation! Looking forward to collaborating with the gmt-china community.! 🎉 
author_association: CONTRIBUTOR