Skip to content

[zh-TW]: update CSS "Color picker tool" #27994

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 10, 2025
Merged

[zh-TW]: update CSS "Color picker tool" #27994

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f8dfa53
update
Dr-XYZ Jul 8, 2025
4bb2948
Merge branch 'main' into 2025-7-9-1
Dr-XYZ Jul 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 25 additions & 4 deletions files/zh-tw/web/css/css_colors/color_picker_tool/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,33 @@
---
title: 色彩選擇工具
title: 顏色選擇器工具
slug: Web/CSS/CSS_colors/Color_picker_tool
l10n:
sourceCommit: 41cf05afdfff38fb460f7cae5b9523405c842ac6
---

{{CSSRef}}

這是個可以讓人新增、調整和測試網頁顏色的工具。藉由這個工具讓人可以輕鬆將顏色轉換成各種 CSS 支援的格式，包含：HEXA、RGB（Red/Green/Blue）和 HSL （Hue/Staturation/Lightness）。在 RGB（rgba）和 HSL（hsla）格式也支援控制阿爾法通道（alpha channel）
這個工具讓你可以在 sRGB {{glossary("color space", "色彩空間")}}中選擇一個顏色，並在各種 CSS [顏色格式](/zh-TW/docs/Web/CSS/color_value)之間進行轉換，幫助你了解以下 sRGB 顏色標記法的語法：

隨著調整每個顏色都會顯示成三種 CSS 的標準格式；此外，基於目前選擇的顏色，一個調色板 HSL 和 HSV、還有 alpha，被創建。滴管風格的色彩選擇器對話框可以在 HSL 或 HSV 格式中切換。
- {{cssxref("hex-color")}}，一種 [sRGB](/zh-TW/docs/Glossary/RGB) 顏色的*十六進位顏色表示法*，使用其主要顏色元件（紅、綠、藍）以及其透明度，以十六進位數字書寫。
- {{CSSxRef("color_value/rgb", "rgb()")}}，根據其紅、綠、藍和 alpha（透明度）元件來定義一個給定的顏色。
- {{CSSxRef("color_value/hsl", "hsl()")}}，根據其色相、飽和度、亮度和 alpha（透明度）元件來定義一個給定的顏色。
- {{CSSxRef("color_value/hwb", "hwb()")}}，根據其色相、白度、黑度和 alpha（透明度）元件來定義一個給定的顏色。
- {{CSSxRef("color_value/color", "color()")}}，在給定的色彩空間中定義一個顏色。

{{EmbedGHLiveSample("css-examples/tools/color-picker/", '100%', 900)}}
當你選擇一個顏色時，它會以四種標準的 CSS 顏色格式顯示。也支援控制 alpha 色版。

{{EmbedGHLiveSample("css-examples/modules/colors.html", '100%', 450)}}

產生的顏色值可以在 CSS 中任何支援 {{cssxref("color_value", "<color>")}} 資料型別的地方使用。

## 參見

- [使用 CSS 屬性應用顏色](/zh-TW/docs/Web/CSS/CSS_colors/Applying_color)
- [CSS 顏色值](/zh-TW/docs/Web/CSS/CSS_colors/Color_values)
- [明智地使用顏色](/zh-TW/docs/Web/CSS/CSS_colors/Using_color_wisely)
- [使用相對顏色](/zh-TW/docs/Web/CSS/CSS_colors/Relative_colors)
- [了解顏色與亮度](/zh-TW/docs/Web/Accessibility/Guides/Colors_and_Luminance)
- [WCAG 1.4.1：顏色對比](/zh-TW/docs/Web/Accessibility/Guides/Understanding_WCAG/Perceivable/Color_contrast)
- [學習：使用 CSS 設定背景與邊框樣式](/zh-TW/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders)
- [學習無障礙：顏色與顏色對比](/zh-TW/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript#顏色與顏色對比)