HTML開關按鈕是很常見的網頁控件，許多網頁都使用它來實現一些交互功能。很多時候，我們需要自定義開關按鈕的顏色，以便讓它更符合我們的UI風格。下面介紹一下如何使用CSS來設置開關按鈕的顏色。

/* CSS代碼示例 */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

以上CSS代碼是一個基本的開關按鈕樣式。其中，.switch類表示整個開關按鈕的容器，.slider類表示按鈕的滑塊。背景顏色、邊框等樣式可以根據需要進行修改。如果要修改開關按鈕的顏色，“background-color”屬性需要設置為需要的顏色。

需要注意的是，在以上示例中，“input:checked + .slider”表示在按鈕被選中時的樣式。如果需要修改按鈕未被選中時的樣式，可以使用“input:not(:checked) + .slider”來設置。