CSS3中的颜色变量是一种非常有用的新功能，它允许您使用颜色值的名称来指定颜色。这是一种更加简便和易读的方式来设置颜色，而且它也可以帮助您更快速地创建一致的设计风格。

:root {
--primary-color: #007bff;  /* 设置主要颜色 */
--secondary-color: #6c757d;  /* 设置次要颜色 */
--success-color: #28a745;  /* 设置成功颜色 */
}
body {
background-color: var(--primary-color);  /* 使用变量来设置背景颜色 */
}
h1 {
color: var(--secondary-color);  /* 使用变量来设置标题颜色 */
}
button {
background-color: var(--success-color); /* 使用变量来设置按钮背景颜色 */
}

在这个示例中，我们定义了三个颜色变量（primary-color，secondary-color和success-color），并将它们设置为根元素的属性。然后，我们使用这些变量来设置body元素的背景颜色、h1元素的文本颜色以及button元素的背景颜色。

现在，如果您想要更改任何一个颜色，您只需要更新变量的值，而不必在整个代码中查找和替换每个颜色值。这是一种更加快速、简单且易用的方法来管理颜色，并确保您的网站或应用程序风格保持一致。