要改變HTML頁面的滾動條顏色，可以使用CSS樣式來實現。以下是一種簡單的方法：

/* 修改垂直滾動條的顏色 */
::-webkit-scrollbar {
    width: 10px; /* 設置滾動條的寬度 */
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* 設置滾動條的背景顏色 */
}

::-webkit-scrollbar-thumb {
    background-color: #888; /* 設置滾動條的顏色 */
}

在上面的代碼中，::-webkit-scrollbar用于設置滾動條的寬度，::-webkit-scrollbar-track用于設置滾動條的背景顏色，::-webkit-scrollbar-thumb用于設置滾動條的顏色。

請注意，上述代碼只適用于支持Webkit內核的瀏覽器，如Chrome、Safari等。如果要同時兼容更多的瀏覽器，可以使用以下通用的CSS樣式來修改滾動條顏色：

/* 修改滾動條的顏色 */
::-webkit-scrollbar {
    width: 10px; /* 設置滾動條的寬度 */
    background-color: #f1f1f1; /* 設置滾動條的背景顏色 */
}

::-webkit-scrollbar-thumb {
    background-color: #888; /* 設置滾動條的顏色 */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* 設置滾動條懸停時的顏色 */
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* 設置滾動條的背景顏色 */
}

::-webkit-scrollbar-track:hover {
    background-color: #ccc; /* 設置滾動條懸停時的背景顏色 */
}

使用上述通用的CSS樣式可以在更多的瀏覽器上修改滾動條的顏色。但請注意，部分瀏覽器可能不支持自定義滾動條樣式，因此效果可能會有所不同。