|
1 | 1 | --- |
2 | | -title: 色彩選擇工具 |
| 2 | +title: 顏色選擇器工具 |
3 | 3 | slug: Web/CSS/CSS_colors/Color_picker_tool |
| 4 | +l10n: |
| 5 | + sourceCommit: 41cf05afdfff38fb460f7cae5b9523405c842ac6 |
4 | 6 | --- |
5 | 7 |
|
6 | 8 | {{CSSRef}} |
7 | 9 |
|
8 | | -這是個可以讓人新增、調整和測試網頁顏色的工具。藉由這個工具讓人可以輕鬆將顏色轉換成各種 CSS 支援的格式，包含：HEXA、RGB（Red/Green/Blue）和 HSL （Hue/Staturation/Lightness）。在 RGB（rgba）和 HSL（hsla）格式也支援控制阿爾法通道（alpha channel） |
| 10 | +這個工具讓你可以在 sRGB {{glossary("color space", "色彩空間")}}中選擇一個顏色，並在各種 CSS [顏色格式](/zh-TW/docs/Web/CSS/color_value)之間進行轉換，幫助你了解以下 sRGB 顏色標記法的語法： |
9 | 11 |
|
10 | | -隨著調整每個顏色都會顯示成三種 CSS 的標準格式；此外，基於目前選擇的顏色，一個調色板 HSL 和 HSV、還有 alpha，被創建。滴管風格的色彩選擇器對話框可以在 HSL 或 HSV 格式中切換。 |
| 12 | +- {{cssxref("hex-color")}}，一種 [sRGB](/zh-TW/docs/Glossary/RGB) 顏色的*十六進位顏色表示法*，使用其主要顏色元件（紅、綠、藍）以及其透明度，以十六進位數字書寫。 |
| 13 | +- {{CSSxRef("color_value/rgb", "rgb()")}}，根據其紅、綠、藍和 alpha（透明度）元件來定義一個給定的顏色。 |
| 14 | +- {{CSSxRef("color_value/hsl", "hsl()")}}，根據其色相、飽和度、亮度和 alpha（透明度）元件來定義一個給定的顏色。 |
| 15 | +- {{CSSxRef("color_value/hwb", "hwb()")}}，根據其色相、白度、黑度和 alpha（透明度）元件來定義一個給定的顏色。 |
| 16 | +- {{CSSxRef("color_value/color", "color()")}}，在給定的色彩空間中定義一個顏色。 |
11 | 17 |
|
12 | | -{{EmbedGHLiveSample("css-examples/tools/color-picker/", '100%', 900)}} |
| 18 | +當你選擇一個顏色時，它會以四種標準的 CSS 顏色格式顯示。也支援控制 alpha 色版。 |
| 19 | + |
| 20 | +{{EmbedGHLiveSample("css-examples/modules/colors.html", '100%', 450)}} |
| 21 | + |
| 22 | +產生的顏色值可以在 CSS 中任何支援 {{cssxref("color_value", "<color>")}} 資料型別的地方使用。 |
| 23 | + |
| 24 | +## 參見 |
| 25 | + |
| 26 | +- [使用 CSS 屬性應用顏色](/zh-TW/docs/Web/CSS/CSS_colors/Applying_color) |
| 27 | +- [CSS 顏色值](/zh-TW/docs/Web/CSS/CSS_colors/Color_values) |
| 28 | +- [明智地使用顏色](/zh-TW/docs/Web/CSS/CSS_colors/Using_color_wisely) |
| 29 | +- [使用相對顏色](/zh-TW/docs/Web/CSS/CSS_colors/Relative_colors) |
| 30 | +- [了解顏色與亮度](/zh-TW/docs/Web/Accessibility/Guides/Colors_and_Luminance) |
| 31 | +- [WCAG 1.4.1：顏色對比](/zh-TW/docs/Web/Accessibility/Guides/Understanding_WCAG/Perceivable/Color_contrast) |
| 32 | +- [學習：使用 CSS 設定背景與邊框樣式](/zh-TW/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders) |
| 33 | +- [學習無障礙：顏色與顏色對比](/zh-TW/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript#顏色與顏色對比) |
0 commit comments