點擊顏色變化是一個常見的網頁UI效果，在CSS中實現起來非常簡單。我們可以使用:hover偽類來給元素添加鼠標懸停的樣式，然后使用transition屬性來使顏色變化平滑。以下是HTML和CSS代碼的示例：

<style>
.color-block {
width: 100px;
height: 100px;
background-color: blue;
transition: background-color 0.5s;
}
.color-block:hover {
background-color: red;
}
</style>
<div class="color-block"></div>

以上代碼實現了一個藍色方塊，在鼠標懸停時顏色會平滑地變成紅色。其中，.color-block是一個自定義的CSS類名，用來選擇要應用樣式的元素。可以根據需求更改類名和屬性值。

除了使用:hover偽類，我們還可以使用JavaScript來實現點擊顏色變化。以下是一段簡單的JavaScript代碼示例：

<script>
function changeColor(element) {
if (element.style.backgroundColor === "red") {
element.style.backgroundColor = "blue";
} else {
element.style.backgroundColor = "red";
}
}
</script>
<div class="color-block" onclick="changeColor(this)"></div>

以上代碼實現了一個與CSS示例相同的效果，但是通過點擊元素來觸發顏色變化。其中，changeColor()函數接受一個參數表示被點擊的元素。我們在HTML中使用onclick屬性來指定點擊事件處理函數，并將this關鍵字作為參數傳遞。

無論是使用CSS還是JavaScript實現點擊顏色變化，都可以為網頁添加動態、生動的效果，提升用戶體驗。