From 2d031a2511f2a2a2f2fa9cf770dc7df049925836 Mon Sep 17 00:00:00 2001 From: Florian Scholz Date: Tue, 8 Jul 2025 17:02:43 +0200 Subject: [PATCH 1/7] Document serialization w/ colorspace & alpha --- .../web/api/htmlinputelement/alpha/index.md | 43 ++++++++++++++++ .../api/htmlinputelement/colorspace/index.md | 44 +++++++++++++++++ files/en-us/web/api/htmlinputelement/index.md | 6 +++ .../reference/elements/input/color/index.md | 49 ++++++++++++++----- 4 files changed, 131 insertions(+), 11 deletions(-) create mode 100644 files/en-us/web/api/htmlinputelement/alpha/index.md create mode 100644 files/en-us/web/api/htmlinputelement/colorspace/index.md diff --git a/files/en-us/web/api/htmlinputelement/alpha/index.md b/files/en-us/web/api/htmlinputelement/alpha/index.md new file mode 100644 index 000000000000000..966c3b16192208b --- /dev/null +++ b/files/en-us/web/api/htmlinputelement/alpha/index.md @@ -0,0 +1,43 @@ +--- +title: "HTMLInputElement: alpha property" +short-title: alpha +slug: Web/API/HTMLInputElement/alpha +page-type: web-api-instance-property +browser-compat: api.HTMLInputElement.alpha +--- + +{{ APIRef("HTML DOM") }} + +The **`HTMLInputElement.alpha`** property indicate whether the color's alpha component can be manipulated by the end user and does not have to be fully opaque. + +## Value + +A boolean value. + +## Examples + +```html + +``` + +```js +let fileInput = document.getElementById("color-picker"); + +if (fileInput.alpha) { + // Color values contain an alpha component +} else { + // We have fully opaque color values +} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [``](/en-US/docs/Web/HTML/Reference/Elements/input/color) diff --git a/files/en-us/web/api/htmlinputelement/colorspace/index.md b/files/en-us/web/api/htmlinputelement/colorspace/index.md new file mode 100644 index 000000000000000..3546a8c96f375e5 --- /dev/null +++ b/files/en-us/web/api/htmlinputelement/colorspace/index.md @@ -0,0 +1,44 @@ +--- +title: "HTMLInputElement: colorSpace property" +short-title: colorSpace +slug: Web/API/HTMLInputElement/colorSpace +page-type: web-api-instance-property +browser-compat: api.HTMLInputElement.colorSpace +--- + +{{ApiRef("HTML DOM")}} + +The **`colorSpace`** property of the {{domxref("HTMLInputElement")}} interface reflects the {{HTMLElement("input")}} element's [`colorspace`](/en-US/docs/Web/HTML/Reference/Elements/input/color#colorspace) attribute, indicating the color space of the serialized CSS color (SRGB or display-p3). + +## Value + +A string representing the element's `colorspace` value. Possible values: + +- `"limited-srgb"`: The SRGB color space and limited to 8-bits per component, e.g., `#123456` or `color(srgb 0 1 0 / 0.5)`. +- `"display-p3"`: The Display P3 color space, e.g., `color(display-p3 1.84 -0.19 0.72 / 0.6)` + +## Examples + +### Getting and setting color spaces + +```html + +``` + +```js +let fileInput = document.getElementById("color-picker"); +console.log(inputElement.colorSpace); // "display-p3" +inputElement.colorSpace = "limited-srgb"; // convert to srgb +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [``](/en-US/docs/Web/HTML/Reference/Elements/input/color) diff --git a/files/en-us/web/api/htmlinputelement/index.md b/files/en-us/web/api/htmlinputelement/index.md index 15a9519648af2c7..973ae4db4f4360e 100644 --- a/files/en-us/web/api/htmlinputelement/index.md +++ b/files/en-us/web/api/htmlinputelement/index.md @@ -20,6 +20,12 @@ Some properties only apply to input element types that support the corresponding - {{domxref("HTMLInputElement.align", "align")}} {{Deprecated_Inline}} - : A string that represents the alignment of the element. _Use CSS instead._ +- {{domxref("HTMLInputElement.alpha", "alpha")}} + - : A boolean that represents the element's [`alpha`](/en-US/docs/Web/HTML/Reference/Elements/input/color#alpha) attribute, indicating whether the color's alpha component can be manipulated by the end user and does not have to be fully opaque. + +- {{domxref("HTMLInputElement.colorSpace", "colorSpace")}} + - : A string that represents the element's [`colorspace`](/en-US/docs/Web/HTML/Reference/Elements/input/color#colorspace) attribute, indicating indicating the color space of the serialized CSS color (SRGB or display-p3). + - {{domxref("HTMLInputElement.defaultValue", "defaultValue")}} - : A string that represents the default value as originally specified in the HTML that created this object. diff --git a/files/en-us/web/html/reference/elements/input/color/index.md b/files/en-us/web/html/reference/elements/input/color/index.md index 631415f96905f7a..372cea7a7ef859a 100644 --- a/files/en-us/web/html/reference/elements/input/color/index.md +++ b/files/en-us/web/html/reference/elements/input/color/index.md @@ -7,9 +7,7 @@ browser-compat: html.elements.input.type_color {{HTMLSidebar}} -{{HTMLElement("input")}} elements of type **`color`** provide a user interface element that lets a user specify a color, either by using a visual color picker interface or by entering the color into a text field in `#rrggbb` hexadecimal format. - -Only basic hexadecimal colors (without alpha channel) are allowed though CSS colors has more formats, e.g., color names, functional notations and a hexadecimal format with an alpha channel. +{{HTMLElement("input")}} elements of type **`color`** provide a user interface element that lets a user specify a color, either by using a visual color picker interface or by entering the color into a text field in a [CSS color value](/en-US/docs/Web/CSS/color_value) format. The element's presentation may vary substantially from one browser and/or platform to another—it might be a basic textual input that automatically validates to ensure that the color information is entered in the proper format, or a platform-standard color picker, or some kind of custom color picker window. @@ -24,7 +22,13 @@ The element's presentation may vary substantially from one browser and/or platfo
- +
``` @@ -44,10 +48,22 @@ input { ## Value -The [`value`](/en-US/docs/Web/HTML/Reference/Elements/input#value) of an {{HTMLElement("input")}} element of type `color` is always a string which contains a 7-character string specifying an RGB color in hexadecimal format. While you can input the color in either upper- or lower-case, it will be stored in lower-case form. The value is never in any other form, and is never empty. +A [CSS color value](/en-US/docs/Web/CSS/color_value). > [!NOTE] -> Setting the value to anything that isn't a valid, fully-opaque, RGB color _in hexadecimal notation_ will result in the value being set to `#000000`. In particular, you can't use CSS's standardized color names, or any CSS function syntax, to set the value. This makes sense when you keep in mind that HTML and CSS are separate languages and specifications. In addition, colors with an alpha channel are not supported; specifying a color in 9-character hexadecimal notation (e.g., `#009900aa`) will also result in the color being set to `#000000`. +> Historically, only basic hexadecimal colors (without alpha channel) were allowed. In modern browsers, any CSS color formats, e.g., color names, functional notations and a hexadecimal format with an alpha channel can be used. Non-supporting browsers fall back to `#000000` (black). + +## Additional attributes + +In addition to the [common attributes](/en-US/docs/Web/HTML/Reference/Elements/input#attributes) shared by all {{HTMLElement("input")}} elements, `color` inputs support the following attributes. + +- `alpha` + - : A [boolean](/en-US/docs/Glossary/Boolean/HTML) attribute indicating whether the color's alpha component can be manipulated by the end user and does not have to be fully opaque. + +- `colorspace` + - : A string indicating the color space of the serialized CSS color. It also hints at the desired user interface for selecting a CSS color. Possible values: + - `"limited-srgb"`: The SRGB color space and limited to 8-bits per component, e.g., `#123456` or `color(srgb 0 1 0 / 0.5)`. + - `"display-p3"`: The Display P3 color space, e.g., `color(display-p3 1.84 -0.19 0.72 / 0.6)` ## Using color inputs @@ -55,15 +71,22 @@ Inputs of type `color` are simple, due to the limited number of attributes they ### Providing a default color -You can update the example above to set a default value, so that the color picker is pre-filled with the default color and the color picker (if any) will also default to that color: +You can update the example above to set a default value, so that the color picker is pre-filled with the default color and the color picker (if any) will also default to that color. ```html + ``` {{EmbedLiveSample("Providing_a_default_color", 700, 30)}} -If you don't specify a value, the default is `#000000`, which is black. The value must be in seven-character hexadecimal notation, meaning the "#" character followed by two digits each representing red, green, and blue, like this: `#rrggbb`. If you have colors that are in any other format (such as CSS color names or CSS color functions such as `rgb()` or `hsl()` ), you'll have to convert them to hexadecimal before setting the `value`. +If you don't specify a value or if the browser doesn't support more complex CSS color value notations, the default color `#000000` is used, which is black. ### Tracking color changes @@ -189,8 +212,7 @@ The final result looks like this: Value - A 7-character string specifying a - {{cssxref("<color>")}} in lower-case hexadecimal notation + Any CSS {{cssxref("<color>")}} value in any notation. @@ -209,7 +231,12 @@ The final result looks like this: IDL attributes - list and value + + alpha, + colorspace, + list, and + value + DOM interface From 0e323d68fdd3f69b25ea9d0c34af570d3e774f29 Mon Sep 17 00:00:00 2001 From: Florian Scholz Date: Thu, 10 Jul 2025 15:11:51 +0200 Subject: [PATCH 2/7] Apply suggestions from code review Co-authored-by: Estelle Weyl --- .../en-us/web/api/htmlinputelement/alpha/index.md | 2 +- .../web/api/htmlinputelement/colorspace/index.md | 2 +- files/en-us/web/api/htmlinputelement/index.md | 2 +- .../html/reference/elements/input/color/index.md | 14 +++++++------- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/files/en-us/web/api/htmlinputelement/alpha/index.md b/files/en-us/web/api/htmlinputelement/alpha/index.md index 966c3b16192208b..637e1cdab55cdf0 100644 --- a/files/en-us/web/api/htmlinputelement/alpha/index.md +++ b/files/en-us/web/api/htmlinputelement/alpha/index.md @@ -8,7 +8,7 @@ browser-compat: api.HTMLInputElement.alpha {{ APIRef("HTML DOM") }} -The **`HTMLInputElement.alpha`** property indicate whether the color's alpha component can be manipulated by the end user and does not have to be fully opaque. +The **`alpha`** property of the {{domxref("HTMLInputElement" interface returns a boolean value that indicates whether the color's alpha component can be manipulated by the end user and does not have to be fully opaque. It reflects the {{htmlelement("input")}} element's [`alpha`](/en-US/docs/Web/HTML/Reference/Elements/input/color#alpha) attribute, which indicates the CSS color's alpha component can be manipulated by the end user and does not have to be fully opaque, and is only relevant to [color](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/color) controls. ## Value diff --git a/files/en-us/web/api/htmlinputelement/colorspace/index.md b/files/en-us/web/api/htmlinputelement/colorspace/index.md index 3546a8c96f375e5..ef4b180a43e4a20 100644 --- a/files/en-us/web/api/htmlinputelement/colorspace/index.md +++ b/files/en-us/web/api/htmlinputelement/colorspace/index.md @@ -8,7 +8,7 @@ browser-compat: api.HTMLInputElement.colorSpace {{ApiRef("HTML DOM")}} -The **`colorSpace`** property of the {{domxref("HTMLInputElement")}} interface reflects the {{HTMLElement("input")}} element's [`colorspace`](/en-US/docs/Web/HTML/Reference/Elements/input/color#colorspace) attribute, indicating the color space of the serialized CSS color (SRGB or display-p3). +The **`colorSpace`** property of the {{domxref("HTMLInputElement")}} interface reflects the {{HTMLElement("input")}} element's [`colorspace`](/en-US/docs/Web/HTML/Reference/Elements/input/color#colorspace) attribute. Relevant to the `color` input type only, it indicates whether the {{glossary("color space")}} of the serialized CSS color is `sRGB` (the default) or `display-p3`. ## Value diff --git a/files/en-us/web/api/htmlinputelement/index.md b/files/en-us/web/api/htmlinputelement/index.md index 973ae4db4f4360e..99e6868423d0bbf 100644 --- a/files/en-us/web/api/htmlinputelement/index.md +++ b/files/en-us/web/api/htmlinputelement/index.md @@ -24,7 +24,7 @@ Some properties only apply to input element types that support the corresponding - : A boolean that represents the element's [`alpha`](/en-US/docs/Web/HTML/Reference/Elements/input/color#alpha) attribute, indicating whether the color's alpha component can be manipulated by the end user and does not have to be fully opaque. - {{domxref("HTMLInputElement.colorSpace", "colorSpace")}} - - : A string that represents the element's [`colorspace`](/en-US/docs/Web/HTML/Reference/Elements/input/color#colorspace) attribute, indicating indicating the color space of the serialized CSS color (SRGB or display-p3). + - : A string that represents the element's [`colorspace`](/en-US/docs/Web/HTML/Reference/Elements/input/color#colorspace) attribute, indicating indicating the {{glossary("color space")}} of the serialized CSS color (sRGB or display-p3). - {{domxref("HTMLInputElement.defaultValue", "defaultValue")}} - : A string that represents the default value as originally specified in the HTML that created this object. diff --git a/files/en-us/web/html/reference/elements/input/color/index.md b/files/en-us/web/html/reference/elements/input/color/index.md index 372cea7a7ef859a..4df5073faa26c5a 100644 --- a/files/en-us/web/html/reference/elements/input/color/index.md +++ b/files/en-us/web/html/reference/elements/input/color/index.md @@ -51,19 +51,19 @@ input { A [CSS color value](/en-US/docs/Web/CSS/color_value). > [!NOTE] -> Historically, only basic hexadecimal colors (without alpha channel) were allowed. In modern browsers, any CSS color formats, e.g., color names, functional notations and a hexadecimal format with an alpha channel can be used. Non-supporting browsers fall back to `#000000` (black). +> Historically, only basic hexadecimal colors (without alpha channel) were allowed. In modern browsers, any CSS color formats, e.g., color names, functional notations and a hexadecimal format with an alpha channel, can be used. The default value is `#000000` (black) if a `value` is omitted or is invalid. ## Additional attributes -In addition to the [common attributes](/en-US/docs/Web/HTML/Reference/Elements/input#attributes) shared by all {{HTMLElement("input")}} elements, `color` inputs support the following attributes. +In addition to the [global attribute](/en-US/docs/Web/HTML/Reference/Global_attributes) and the [input attributes](/en-US/docs/Web/HTML/Reference/Elements/input#attributes) common to all {{HTMLElement("input")}} elements, the `color` input also supports the following attributes: - `alpha` - - : A [boolean](/en-US/docs/Glossary/Boolean/HTML) attribute indicating whether the color's alpha component can be manipulated by the end user and does not have to be fully opaque. + - : A [boolean](/en-US/docs/Glossary/Boolean/HTML) attribute, if present, indicates the color's alpha component can be manipulated by the end user and does not have to be fully opaque. - `colorspace` - - : A string indicating the color space of the serialized CSS color. It also hints at the desired user interface for selecting a CSS color. Possible values: - - `"limited-srgb"`: The SRGB color space and limited to 8-bits per component, e.g., `#123456` or `color(srgb 0 1 0 / 0.5)`. - - `"display-p3"`: The Display P3 color space, e.g., `color(display-p3 1.84 -0.19 0.72 / 0.6)` + - : Defines the the {{glossary("color space")}} for the color and hints at the desired user interface for the color picker widget. Possible {{Glossary("enumerated", "enumerated")}} values are: + - `"limited-srgb"`: The color is in the {{glossary("RGB". "sRGB")}} color space. This includes [`rgb()`](/en-US/docs/Web/CSS/color_value/rgb), [`hsl()`](/en-US/docs/Web/CSS/color_value/hsl), [`hwb()`](/en-US/docs/Web/CSS/color_value/hwb), and {{cssxref("hex-color")}} values. The color value is limited to 8-bits per `r`, `g`, and `b` component. This is the default. + - `"display-p3"`: The [Display P3 color space](/en-US/docs/Glossary/Color_space#display-p3), e.g., `color(display-p3 1.84 -0.19 0.72 / 0.6)` ## Using color inputs @@ -86,7 +86,7 @@ You can update the example above to set a default value, so that the color picke {{EmbedLiveSample("Providing_a_default_color", 700, 30)}} -If you don't specify a value or if the browser doesn't support more complex CSS color value notations, the default color `#000000` is used, which is black. +If you don't specify a value or if the value is invalid or otherwise not supported by the browser, the value defaults to `#000000`, which is opaque black. ### Tracking color changes From 3b00a93fde69647479377ac7117223561c46239f Mon Sep 17 00:00:00 2001 From: Florian Scholz Date: Thu, 10 Jul 2025 15:14:43 +0200 Subject: [PATCH 3/7] Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/api/htmlinputelement/alpha/index.md | 2 +- files/en-us/web/html/reference/elements/input/color/index.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/api/htmlinputelement/alpha/index.md b/files/en-us/web/api/htmlinputelement/alpha/index.md index 637e1cdab55cdf0..a8b4bec1ed9974f 100644 --- a/files/en-us/web/api/htmlinputelement/alpha/index.md +++ b/files/en-us/web/api/htmlinputelement/alpha/index.md @@ -8,7 +8,7 @@ browser-compat: api.HTMLInputElement.alpha {{ APIRef("HTML DOM") }} -The **`alpha`** property of the {{domxref("HTMLInputElement" interface returns a boolean value that indicates whether the color's alpha component can be manipulated by the end user and does not have to be fully opaque. It reflects the {{htmlelement("input")}} element's [`alpha`](/en-US/docs/Web/HTML/Reference/Elements/input/color#alpha) attribute, which indicates the CSS color's alpha component can be manipulated by the end user and does not have to be fully opaque, and is only relevant to [color](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/color) controls. +The **`alpha`** property of the {{domxref("HTMLInputElement" interface returns a boolean value that indicates whether the color's alpha component can be manipulated by the end user and does not have to be fully opaque. It reflects the {{htmlelement("input")}} element's [`alpha`](/en-US/docs/Web/HTML/Reference/Elements/input/color#alpha) attribute, which indicates the CSS color's alpha component can be manipulated by the end user and does not have to be fully opaque, and is only relevant to [color](/en-US/docs/Web/HTML/Reference/Elements/input/color) controls. ## Value diff --git a/files/en-us/web/html/reference/elements/input/color/index.md b/files/en-us/web/html/reference/elements/input/color/index.md index 1bc3d48f219d2fb..dfffdf4e754a12a 100644 --- a/files/en-us/web/html/reference/elements/input/color/index.md +++ b/files/en-us/web/html/reference/elements/input/color/index.md @@ -60,8 +60,8 @@ In addition to the [global attribute](/en-US/docs/Web/HTML/Reference/Global_attr - : A [boolean](/en-US/docs/Glossary/Boolean/HTML) attribute, if present, indicates the color's alpha component can be manipulated by the end user and does not have to be fully opaque. - `colorspace` - - : Defines the the {{glossary("color space")}} for the color and hints at the desired user interface for the color picker widget. Possible {{Glossary("enumerated", "enumerated")}} values are: - - `"limited-srgb"`: The color is in the {{glossary("RGB". "sRGB")}} color space. This includes [`rgb()`](/en-US/docs/Web/CSS/color_value/rgb), [`hsl()`](/en-US/docs/Web/CSS/color_value/hsl), [`hwb()`](/en-US/docs/Web/CSS/color_value/hwb), and {{cssxref("hex-color")}} values. The color value is limited to 8-bits per `r`, `g`, and `b` component. This is the default. + - : Defines the the {{glossary("color space")}} for the color and hints at the desired user interface for the color picker widget. Possible {{Glossary("enumerated", "enumerated")}} values are: + - `"limited-srgb"`: The color is in the {{glossary("RGB". "sRGB")}} color space. This includes [`rgb()`](/en-US/docs/Web/CSS/color_value/rgb), [`hsl()`](/en-US/docs/Web/CSS/color_value/hsl), [`hwb()`](/en-US/docs/Web/CSS/color_value/hwb), and {{cssxref("hex-color")}} values. The color value is limited to 8-bits per `r`, `g`, and `b` component. This is the default. - `"display-p3"`: The [Display P3 color space](/en-US/docs/Glossary/Color_space#display-p3), e.g., `color(display-p3 1.84 -0.19 0.72 / 0.6)` ## Using color inputs From 0f2e61c2ddf693bb406c5825a5c9026169ed0d67 Mon Sep 17 00:00:00 2001 From: Florian Scholz Date: Thu, 10 Jul 2025 15:28:45 +0200 Subject: [PATCH 4/7] more tweaks --- .../en-us/web/api/htmlinputelement/alpha/index.md | 2 +- .../html/reference/elements/input/color/index.md | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/files/en-us/web/api/htmlinputelement/alpha/index.md b/files/en-us/web/api/htmlinputelement/alpha/index.md index a8b4bec1ed9974f..e62119b127c5d39 100644 --- a/files/en-us/web/api/htmlinputelement/alpha/index.md +++ b/files/en-us/web/api/htmlinputelement/alpha/index.md @@ -8,7 +8,7 @@ browser-compat: api.HTMLInputElement.alpha {{ APIRef("HTML DOM") }} -The **`alpha`** property of the {{domxref("HTMLInputElement" interface returns a boolean value that indicates whether the color's alpha component can be manipulated by the end user and does not have to be fully opaque. It reflects the {{htmlelement("input")}} element's [`alpha`](/en-US/docs/Web/HTML/Reference/Elements/input/color#alpha) attribute, which indicates the CSS color's alpha component can be manipulated by the end user and does not have to be fully opaque, and is only relevant to [color](/en-US/docs/Web/HTML/Reference/Elements/input/color) controls. +The **`alpha`** property of the {{domxref("HTMLInputElement")}} interface reflects the {{htmlelement("input")}} element's [`alpha`](/en-US/docs/Web/HTML/Reference/Elements/input/color#alpha) attribute, which indicates whether the CSS color's alpha component can be manipulated by the end user and does not have to be fully opaque. It is only relevant to [color](/en-US/docs/Web/HTML/Reference/Elements/input/color) controls. ## Value diff --git a/files/en-us/web/html/reference/elements/input/color/index.md b/files/en-us/web/html/reference/elements/input/color/index.md index dfffdf4e754a12a..ca67d538068d6a4 100644 --- a/files/en-us/web/html/reference/elements/input/color/index.md +++ b/files/en-us/web/html/reference/elements/input/color/index.md @@ -13,22 +13,22 @@ The element's presentation may vary substantially from one browser and/or platfo {{InteractiveExample("HTML Demo: <input type="color">", "tabbed-standard")}} ```html interactive-example -

Choose your monster's colors:

+

Choose your colors:

- - + +
- +
``` @@ -232,7 +232,7 @@ The final result looks like this: IDL attributes alpha, - colorspace, + colorSpace, list, and value From 480d1d0f5c5883ccf04e396bb09b8008f56b54b7 Mon Sep 17 00:00:00 2001 From: Florian Scholz Date: Thu, 31 Jul 2025 11:23:29 +0200 Subject: [PATCH 5/7] Update files/en-us/web/api/htmlinputelement/colorspace/index.md Co-authored-by: wbamberg --- files/en-us/web/api/htmlinputelement/colorspace/index.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/files/en-us/web/api/htmlinputelement/colorspace/index.md b/files/en-us/web/api/htmlinputelement/colorspace/index.md index ef4b180a43e4a20..6eeb9699e66b695 100644 --- a/files/en-us/web/api/htmlinputelement/colorspace/index.md +++ b/files/en-us/web/api/htmlinputelement/colorspace/index.md @@ -12,10 +12,7 @@ The **`colorSpace`** property of the {{domxref("HTMLInputElement")}} interface r ## Value -A string representing the element's `colorspace` value. Possible values: - -- `"limited-srgb"`: The SRGB color space and limited to 8-bits per component, e.g., `#123456` or `color(srgb 0 1 0 / 0.5)`. -- `"display-p3"`: The Display P3 color space, e.g., `color(display-p3 1.84 -0.19 0.72 / 0.6)` +A string; the value of the [`colorspace`](/en-US/docs/Web/HTML/Reference/Elements/input/color#colorspace) attribute. ## Examples From 986eba476cc34691936c764088793bf034207734 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Tue, 19 Aug 2025 16:03:51 -0400 Subject: [PATCH 6/7] Minor fixes --- files/en-us/web/api/htmlinputelement/alpha/index.md | 6 +++--- .../web/api/htmlinputelement/colorspace/index.md | 12 ++++++------ files/en-us/web/api/htmlinputelement/index.md | 2 +- .../web/html/reference/elements/input/color/index.md | 12 ++++++------ 4 files changed, 16 insertions(+), 16 deletions(-) diff --git a/files/en-us/web/api/htmlinputelement/alpha/index.md b/files/en-us/web/api/htmlinputelement/alpha/index.md index e62119b127c5d39..9b20f7e8574ce2b 100644 --- a/files/en-us/web/api/htmlinputelement/alpha/index.md +++ b/files/en-us/web/api/htmlinputelement/alpha/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-property browser-compat: api.HTMLInputElement.alpha --- -{{ APIRef("HTML DOM") }} +{{APIRef("HTML DOM")}} The **`alpha`** property of the {{domxref("HTMLInputElement")}} interface reflects the {{htmlelement("input")}} element's [`alpha`](/en-US/docs/Web/HTML/Reference/Elements/input/color#alpha) attribute, which indicates whether the CSS color's alpha component can be manipulated by the end user and does not have to be fully opaque. It is only relevant to [color](/en-US/docs/Web/HTML/Reference/Elements/input/color) controls. @@ -21,9 +21,9 @@ A boolean value. ``` ```js -let fileInput = document.getElementById("color-picker"); +const colorInput = document.getElementById("color-picker"); -if (fileInput.alpha) { +if (colorInput.alpha) { // Color values contain an alpha component } else { // We have fully opaque color values diff --git a/files/en-us/web/api/htmlinputelement/colorspace/index.md b/files/en-us/web/api/htmlinputelement/colorspace/index.md index 6eeb9699e66b695..12c754a4af71b58 100644 --- a/files/en-us/web/api/htmlinputelement/colorspace/index.md +++ b/files/en-us/web/api/htmlinputelement/colorspace/index.md @@ -6,13 +6,13 @@ page-type: web-api-instance-property browser-compat: api.HTMLInputElement.colorSpace --- -{{ApiRef("HTML DOM")}} +{{APIRef("HTML DOM")}} -The **`colorSpace`** property of the {{domxref("HTMLInputElement")}} interface reflects the {{HTMLElement("input")}} element's [`colorspace`](/en-US/docs/Web/HTML/Reference/Elements/input/color#colorspace) attribute. Relevant to the `color` input type only, it indicates whether the {{glossary("color space")}} of the serialized CSS color is `sRGB` (the default) or `display-p3`. +The **`colorSpace`** property of the {{domxref("HTMLInputElement")}} interface reflects the {{HTMLElement("input")}} element's [`colorspace`](/en-US/docs/Web/HTML/Reference/Elements/input/color#colorspace) attribute, which indicates whether the {{glossary("color space")}} of the serialized CSS color is `sRGB` (the default) or `display-p3`. It is only relevant to [color](/en-US/docs/Web/HTML/Reference/Elements/input/color) controls. ## Value -A string; the value of the [`colorspace`](/en-US/docs/Web/HTML/Reference/Elements/input/color#colorspace) attribute. +A string containing the value of the [`colorspace`](/en-US/docs/Web/HTML/Reference/Elements/input/color#colorspace) attribute. ## Examples @@ -23,9 +23,9 @@ A string; the value of the [`colorspace`](/en-US/docs/Web/HTML/Reference/Element ``` ```js -let fileInput = document.getElementById("color-picker"); -console.log(inputElement.colorSpace); // "display-p3" -inputElement.colorSpace = "limited-srgb"; // convert to srgb +const colorInput = document.getElementById("color-picker"); +console.log(colorInput.colorSpace); // "display-p3" +colorInput.colorSpace = "limited-srgb"; // convert to srgb ``` ## Specifications diff --git a/files/en-us/web/api/htmlinputelement/index.md b/files/en-us/web/api/htmlinputelement/index.md index 99e6868423d0bbf..71bc3f649aa0e47 100644 --- a/files/en-us/web/api/htmlinputelement/index.md +++ b/files/en-us/web/api/htmlinputelement/index.md @@ -24,7 +24,7 @@ Some properties only apply to input element types that support the corresponding - : A boolean that represents the element's [`alpha`](/en-US/docs/Web/HTML/Reference/Elements/input/color#alpha) attribute, indicating whether the color's alpha component can be manipulated by the end user and does not have to be fully opaque. - {{domxref("HTMLInputElement.colorSpace", "colorSpace")}} - - : A string that represents the element's [`colorspace`](/en-US/docs/Web/HTML/Reference/Elements/input/color#colorspace) attribute, indicating indicating the {{glossary("color space")}} of the serialized CSS color (sRGB or display-p3). + - : A string that represents the element's [`colorspace`](/en-US/docs/Web/HTML/Reference/Elements/input/color#colorspace) attribute, indicating the {{glossary("color space")}} of the serialized CSS color (sRGB or display-p3). - {{domxref("HTMLInputElement.defaultValue", "defaultValue")}} - : A string that represents the default value as originally specified in the HTML that created this object. diff --git a/files/en-us/web/html/reference/elements/input/color/index.md b/files/en-us/web/html/reference/elements/input/color/index.md index ca67d538068d6a4..eeed99a3102ca65 100644 --- a/files/en-us/web/html/reference/elements/input/color/index.md +++ b/files/en-us/web/html/reference/elements/input/color/index.md @@ -50,7 +50,7 @@ input { A [CSS color value](/en-US/docs/Web/CSS/color_value). > [!NOTE] -> Historically, only basic hexadecimal colors (without alpha channel) were allowed. In modern browsers, any CSS color formats, e.g., color names, functional notations and a hexadecimal format with an alpha channel, can be used. The default value is `#000000` (black) if a `value` is omitted or is invalid. +> Historically, only basic hexadecimal colors (without alpha channel) were allowed. Now, any CSS color format, including named colors, functional notations, and hexadecimal colors with an alpha channel, can be used. The default value is `#000000` (black) if a `value` is omitted or is invalid. ## Additional attributes @@ -60,7 +60,7 @@ In addition to the [global attribute](/en-US/docs/Web/HTML/Reference/Global_attr - : A [boolean](/en-US/docs/Glossary/Boolean/HTML) attribute, if present, indicates the color's alpha component can be manipulated by the end user and does not have to be fully opaque. - `colorspace` - - : Defines the the {{glossary("color space")}} for the color and hints at the desired user interface for the color picker widget. Possible {{Glossary("enumerated", "enumerated")}} values are: + - : Defines the the {{glossary("color space")}} for the color and hints at the desired user interface for the color picker widget. Possible {{Glossary("enumerated")}} values are: - `"limited-srgb"`: The color is in the {{glossary("RGB". "sRGB")}} color space. This includes [`rgb()`](/en-US/docs/Web/CSS/color_value/rgb), [`hsl()`](/en-US/docs/Web/CSS/color_value/hsl), [`hwb()`](/en-US/docs/Web/CSS/color_value/hwb), and {{cssxref("hex-color")}} values. The color value is limited to 8-bits per `r`, `g`, and `b` component. This is the default. - `"display-p3"`: The [Display P3 color space](/en-US/docs/Glossary/Color_space#display-p3), e.g., `color(display-p3 1.84 -0.19 0.72 / 0.6)` @@ -231,10 +231,10 @@ The final result looks like this: IDL attributes - alpha, - colorSpace, - list, and - value + alpha, + colorSpace, + list, and + value From e3e84a093f705396518c2c2773813435bb058049 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Tue, 19 Aug 2025 16:08:27 -0400 Subject: [PATCH 7/7] Add experimental --- files/en-us/web/api/htmlinputelement/alpha/index.md | 4 +++- files/en-us/web/api/htmlinputelement/colorspace/index.md | 4 +++- files/en-us/web/api/htmlinputelement/index.md | 4 ++-- files/en-us/web/html/reference/elements/input/color/index.md | 4 ++-- 4 files changed, 10 insertions(+), 6 deletions(-) diff --git a/files/en-us/web/api/htmlinputelement/alpha/index.md b/files/en-us/web/api/htmlinputelement/alpha/index.md index 9b20f7e8574ce2b..814fa45c490ec81 100644 --- a/files/en-us/web/api/htmlinputelement/alpha/index.md +++ b/files/en-us/web/api/htmlinputelement/alpha/index.md @@ -3,10 +3,12 @@ title: "HTMLInputElement: alpha property" short-title: alpha slug: Web/API/HTMLInputElement/alpha page-type: web-api-instance-property +status: + - experimental browser-compat: api.HTMLInputElement.alpha --- -{{APIRef("HTML DOM")}} +{{APIRef("HTML DOM")}}{{SeeCompatTable}} The **`alpha`** property of the {{domxref("HTMLInputElement")}} interface reflects the {{htmlelement("input")}} element's [`alpha`](/en-US/docs/Web/HTML/Reference/Elements/input/color#alpha) attribute, which indicates whether the CSS color's alpha component can be manipulated by the end user and does not have to be fully opaque. It is only relevant to [color](/en-US/docs/Web/HTML/Reference/Elements/input/color) controls. diff --git a/files/en-us/web/api/htmlinputelement/colorspace/index.md b/files/en-us/web/api/htmlinputelement/colorspace/index.md index 12c754a4af71b58..19f4c2382ff9384 100644 --- a/files/en-us/web/api/htmlinputelement/colorspace/index.md +++ b/files/en-us/web/api/htmlinputelement/colorspace/index.md @@ -3,10 +3,12 @@ title: "HTMLInputElement: colorSpace property" short-title: colorSpace slug: Web/API/HTMLInputElement/colorSpace page-type: web-api-instance-property +status: + - experimental browser-compat: api.HTMLInputElement.colorSpace --- -{{APIRef("HTML DOM")}} +{{APIRef("HTML DOM")}}{{SeeCompatTable}} The **`colorSpace`** property of the {{domxref("HTMLInputElement")}} interface reflects the {{HTMLElement("input")}} element's [`colorspace`](/en-US/docs/Web/HTML/Reference/Elements/input/color#colorspace) attribute, which indicates whether the {{glossary("color space")}} of the serialized CSS color is `sRGB` (the default) or `display-p3`. It is only relevant to [color](/en-US/docs/Web/HTML/Reference/Elements/input/color) controls. diff --git a/files/en-us/web/api/htmlinputelement/index.md b/files/en-us/web/api/htmlinputelement/index.md index 71bc3f649aa0e47..7b04fd9436fcc28 100644 --- a/files/en-us/web/api/htmlinputelement/index.md +++ b/files/en-us/web/api/htmlinputelement/index.md @@ -20,10 +20,10 @@ Some properties only apply to input element types that support the corresponding - {{domxref("HTMLInputElement.align", "align")}} {{Deprecated_Inline}} - : A string that represents the alignment of the element. _Use CSS instead._ -- {{domxref("HTMLInputElement.alpha", "alpha")}} +- {{domxref("HTMLInputElement.alpha", "alpha")}} {{experimental_inline}} - : A boolean that represents the element's [`alpha`](/en-US/docs/Web/HTML/Reference/Elements/input/color#alpha) attribute, indicating whether the color's alpha component can be manipulated by the end user and does not have to be fully opaque. -- {{domxref("HTMLInputElement.colorSpace", "colorSpace")}} +- {{domxref("HTMLInputElement.colorSpace", "colorSpace")}} {{experimental_inline}} - : A string that represents the element's [`colorspace`](/en-US/docs/Web/HTML/Reference/Elements/input/color#colorspace) attribute, indicating the {{glossary("color space")}} of the serialized CSS color (sRGB or display-p3). - {{domxref("HTMLInputElement.defaultValue", "defaultValue")}} diff --git a/files/en-us/web/html/reference/elements/input/color/index.md b/files/en-us/web/html/reference/elements/input/color/index.md index eeed99a3102ca65..ec7a1124c156b8f 100644 --- a/files/en-us/web/html/reference/elements/input/color/index.md +++ b/files/en-us/web/html/reference/elements/input/color/index.md @@ -56,10 +56,10 @@ A [CSS color value](/en-US/docs/Web/CSS/color_value). In addition to the [global attribute](/en-US/docs/Web/HTML/Reference/Global_attributes) and the [input attributes](/en-US/docs/Web/HTML/Reference/Elements/input#attributes) common to all {{HTMLElement("input")}} elements, the `color` input also supports the following attributes: -- `alpha` +- `alpha` {{experimental_inline}} - : A [boolean](/en-US/docs/Glossary/Boolean/HTML) attribute, if present, indicates the color's alpha component can be manipulated by the end user and does not have to be fully opaque. -- `colorspace` +- `colorspace` {{experimental_inline}} - : Defines the the {{glossary("color space")}} for the color and hints at the desired user interface for the color picker widget. Possible {{Glossary("enumerated")}} values are: - `"limited-srgb"`: The color is in the {{glossary("RGB". "sRGB")}} color space. This includes [`rgb()`](/en-US/docs/Web/CSS/color_value/rgb), [`hsl()`](/en-US/docs/Web/CSS/color_value/hsl), [`hwb()`](/en-US/docs/Web/CSS/color_value/hwb), and {{cssxref("hex-color")}} values. The color value is limited to 8-bits per `r`, `g`, and `b` component. This is the default. - `"display-p3"`: The [Display P3 color space](/en-US/docs/Glossary/Color_space#display-p3), e.g., `color(display-p3 1.84 -0.19 0.72 / 0.6)`