diff --git a/files/en-us/web/html/reference/attributes/index.md b/files/en-us/web/html/reference/attributes/index.md
index b7860e4fa8d6145..db72c4e36a8ca1c 100644
--- a/files/en-us/web/html/reference/attributes/index.md
+++ b/files/en-us/web/html/reference/attributes/index.md
@@ -76,6 +76,13 @@ Elements in HTML have **attributes**; these are additional values that configure
Defines the color space that is used by a type="color" input.
+
cols
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 c44be048fb3e02a..9a3205f7189e01e 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
@@ -2,7 +2,10 @@
title:
slug: Web/HTML/Reference/Elements/input/color
page-type: html-attribute-value
-browser-compat: html.elements.input.type_color
+browser-compat:
+ - html.elements.input.type_color
+ - html.elements.input.alpha
+ - html.elements.input.colorspace
sidebar: htmlsidebar
---
@@ -61,7 +64,7 @@ In addition to the [global attribute](/en-US/docs/Web/HTML/Reference/Global_attr
- `colorspace` {{experimental_inline}}
- : Defines 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.
+ - `"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
@@ -251,3 +254,8 @@ The final result looks like this:
## Browser compatibility
{{Compat}}
+
+## See also
+
+- {{domxref('HTMLInputElement.alpha')}}
+- {{domxref('HTMLInputElement.colorspace')}}
diff --git a/files/en-us/web/html/reference/elements/input/index.md b/files/en-us/web/html/reference/elements/input/index.md
index 37cb6175a35f099..80a46ed2417a18f 100644
--- a/files/en-us/web/html/reference/elements/input/index.md
+++ b/files/en-us/web/html/reference/elements/input/index.md
@@ -343,42 +343,44 @@ This section provides a table listing all the attributes with a brief descriptio
Attributes for the `` element include the [global HTML attributes](/en-US/docs/Web/HTML/Reference/Global_attributes) and additionally:
-| Attribute | Type(s) | Description |
-| --------------------------------------------- | ----------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
-| [`accept`](#accept) | `file` | Hint for expected file type in file upload controls |
-| [`alt`](#alt) | `image` | alt attribute for the image type. Required for accessibility |
-| [`autocapitalize`](#autocapitalize) | all except `url`, `email`, and `password` | Controls automatic capitalization in inputted text. |
-| [`autocomplete`](#autocomplete) | all except `checkbox`, `radio`, and buttons | Hint for form autofill feature |
-| [`capture`](#capture) | `file` | Media capture input method in file upload controls |
-| [`checked`](#checked) | `checkbox`, `radio` | Whether the command or control is checked |
-| [`dirname`](#dirname) | `hidden`, `text`, `search`, `url`, `tel`, `email` | Name of form field to use for sending the element's directionality in form submission |
-| [`disabled`](#disabled) | all | Whether the form control is disabled |
-| [`form`](#form) | all | Associates the control with a form element |
-| [`formaction`](#formaction) | `image`, `submit` | URL to use for form submission |
-| [`formenctype`](#formenctype) | `image`, `submit` | Form data set encoding type to use for form submission |
-| [`formmethod`](#formmethod) | `image`, `submit` | HTTP method to use for form submission |
-| [`formnovalidate`](#formnovalidate) | `image`, `submit` | Bypass form control validation for form submission |
-| [`formtarget`](#formtarget) | `image`, `submit` | Browsing context for form submission |
-| [`height`](#height) | `image` | Same as height attribute for {{htmlelement('img')}}; vertical dimension |
-| [`list`](#list) | all except `hidden`, `password`, `checkbox`, `radio`, and buttons | Value of the id attribute of the {{htmlelement('datalist')}} of autocomplete options |
-| [`max`](#max) | `date`, `month`, `week`, `time`, `datetime-local`, `number`, `range` | Maximum value |
-| [`maxlength`](#maxlength) | `text`, `search`, `url`, `tel`, `email`, `password` | Maximum length (number of characters) of `value` |
-| [`min`](#min) | `date`, `month`, `week`, `time`, `datetime-local`, `number`, `range` | Minimum value |
-| [`minlength`](#minlength) | `text`, `search`, `url`, `tel`, `email`, `password` | Minimum length (number of characters) of `value` |
-| [`multiple`](#multiple) | `email`, `file` | Boolean. Whether to allow multiple values |
-| [`name`](#name) | all | Name of the form control. Submitted with the form as part of a name/value pair |
-| [`pattern`](#pattern) | `text`, `search`, `url`, `tel`, `email`, `password` | Pattern the `value` must match to be valid |
-| [`placeholder`](#placeholder) | `text`, `search`, `url`, `tel`, `email`, `password`, `number` | Text that appears in the form control when it has no value set |
-| [`popovertarget`](#popovertarget) | `button` | Designates an `` as a control for a popover element |
-| [`popovertargetaction`](#popovertargetaction) | `button` | Specifies the action that a popover control should perform |
-| [`readonly`](#readonly) | all except `hidden`, `range`, `color`, `checkbox`, `radio`, and buttons | Boolean. The value is not editable |
-| [`required`](#required) | all except `hidden`, `range`, `color`, and buttons | Boolean. A value is required or must be checked for the form to be submittable |
-| [`size`](#size) | `text`, `search`, `url`, `tel`, `email`, `password` | Size of the control |
-| [`src`](#src) | `image` | Same as `src` attribute for {{htmlelement('img')}}; address of image resource |
-| [`step`](#step) | `date`, `month`, `week`, `time`, `datetime-local`, `number`, `range` | Incremental values that are valid |
-| [`type`](#type) | all | Type of form control |
-| [`value`](#value) | all except `image` | The value of the control. When specified in the HTML, corresponds to the initial value |
-| [`width`](#width) | `image` | Same as `width` attribute for {{htmlelement('img')}} |
+| Attribute | Type(s) | Description |
+| --------------------------------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| [`accept`](#accept) | `file` | Hint for expected file type in file upload controls |
+| [`alpha`](#alpha) | `color` | Opacity of the color |
+| [`alt`](#alt) | `image` | alt attribute for the image type. Required for accessibility |
+| [`autocapitalize`](#autocapitalize) | all except `url`, `email`, and `password` | Controls automatic capitalization in inputted text. |
+| [`autocomplete`](#autocomplete) | all except `checkbox`, `radio`, and buttons | Hint for form autofill feature |
+| [`capture`](#capture) | `file` | Media capture input method in file upload controls |
+| [`checked`](#checked) | `checkbox`, `radio` | Whether the command or control is checked |
+| [`colorspace`](#colorspace) | `color` | The [color space](/en-US/docs/Glossary/Color_space) that should be used for selecting the color value |
+| [`dirname`](#dirname) | `hidden`, `text`, `search`, `url`, `tel`, `email` | Name of form field to use for sending the element's directionality in form submission |
+| [`disabled`](#disabled) | all | Whether the form control is disabled |
+| [`form`](#form) | all | Associates the control with a form element |
+| [`formaction`](#formaction) | `image`, `submit` | URL to use for form submission |
+| [`formenctype`](#formenctype) | `image`, `submit` | Form data set encoding type to use for form submission |
+| [`formmethod`](#formmethod) | `image`, `submit` | HTTP method to use for form submission |
+| [`formnovalidate`](#formnovalidate) | `image`, `submit` | Bypass form control validation for form submission |
+| [`formtarget`](#formtarget) | `image`, `submit` | Browsing context for form submission |
+| [`height`](#height) | `image` | Same as height attribute for {{htmlelement('img')}}; vertical dimension |
+| [`list`](#list) | all except `hidden`, `password`, `checkbox`, `radio`, and buttons | Value of the id attribute of the {{htmlelement('datalist')}} of autocomplete options |
+| [`max`](#max) | `date`, `month`, `week`, `time`, `datetime-local`, `number`, `range` | Maximum value |
+| [`maxlength`](#maxlength) | `text`, `search`, `url`, `tel`, `email`, `password` | Maximum length (number of characters) of `value` |
+| [`min`](#min) | `date`, `month`, `week`, `time`, `datetime-local`, `number`, `range` | Minimum value |
+| [`minlength`](#minlength) | `text`, `search`, `url`, `tel`, `email`, `password` | Minimum length (number of characters) of `value` |
+| [`multiple`](#multiple) | `email`, `file` | Boolean. Whether to allow multiple values |
+| [`name`](#name) | all | Name of the form control. Submitted with the form as part of a name/value pair |
+| [`pattern`](#pattern) | `text`, `search`, `url`, `tel`, `email`, `password` | Pattern the `value` must match to be valid |
+| [`placeholder`](#placeholder) | `text`, `search`, `url`, `tel`, `email`, `password`, `number` | Text that appears in the form control when it has no value set |
+| [`popovertarget`](#popovertarget) | `button` | Designates an `` as a control for a popover element |
+| [`popovertargetaction`](#popovertargetaction) | `button` | Specifies the action that a popover control should perform |
+| [`readonly`](#readonly) | all except `hidden`, `range`, `color`, `checkbox`, `radio`, and buttons | Boolean. The value is not editable |
+| [`required`](#required) | all except `hidden`, `range`, `color`, and buttons | Boolean. A value is required or must be checked for the form to be submittable |
+| [`size`](#size) | `text`, `search`, `url`, `tel`, `email`, `password` | Size of the control |
+| [`src`](#src) | `image` | Same as `src` attribute for {{htmlelement('img')}}; address of image resource |
+| [`step`](#step) | `date`, `month`, `week`, `time`, `datetime-local`, `number`, `range` | Incremental values that are valid |
+| [`type`](#type) | all | Type of form control |
+| [`value`](#value) | all except `image` | The value of the control. When specified in the HTML, corresponds to the initial value |
+| [`width`](#width) | `image` | Same as `width` attribute for {{htmlelement('img')}} |
A few additional non-standard attributes are listed following the descriptions of the standard attributes.
@@ -387,6 +389,9 @@ A few additional non-standard attributes are listed following the descriptions o
- [`accept`](/en-US/docs/Web/HTML/Reference/Attributes/accept)
- : Valid for the `file` input type only, the `accept` attribute defines which file types are selectable in a `file` upload control. See the {{HTMLElement("input/file", "file")}} input type.
+- `alpha`
+ - : Valid for the `color` input type only, the `alpha` attribute provides the end user with the ability to set the opacity of the color being selected.
+
- `alt`
- : Valid for the `image` button only, the `alt` attribute provides alternative text for the image, displaying the value of the attribute if the image [`src`](#src) is missing or otherwise fails to load. See the {{HTMLElement("input/image", "image")}} input type.
@@ -425,6 +430,11 @@ A few additional non-standard attributes are listed following the descriptions o
>
> For example, if a checkbox whose `name` is `fruit` has a `value` of `cherry`, and the checkbox is checked, the form data submitted will include `fruit=cherry`. If the checkbox isn't active, it isn't listed in the form data at all. The default `value` for checkboxes and radio buttons is `on`.
+- `colorspace`
+ - : Valid for the `color` input type only, the `colorspace` attribute specifies the [color space](/en-US/docs/Glossary/Color_space) that is used by the `type="color"` input. 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)`
+
- [`dirname`](/en-US/docs/Web/HTML/Reference/Attributes/dirname)
- : Valid for `hidden`, `text`, `search`, `url`, `tel`, and `email` input types, the `dirname` attribute enables the submission of the directionality of the element. When included, the form control will submit with two name/value pairs: the first being the [`name`](#name) and [`value`](#value), and the second being the value of the `dirname` attribute as the name, with a value of `ltr` or `rtl` as set by the browser.